excuse me, can anybody tell me why when wearing open street map, a map appears first on the continent of Africa? I like it when the map appeared in Indonesia country, examples can be viewed at www.mediawave.biz/heatmap1
code is in use as follows:
<script type="text/javascript">
var map, layer, heatmap, lat, lon, cnt;
function init()
{
$.ajax
({
url: "http://localhost/katanya_new/map/data_katanya.xml",
dataType:"xml",
success: function(xmlDoc)
{
//kita ambil data element yang tidak mempunyai attribute name
var heat = $(xmlDoc).find("data[name!=Geo_map]");
var arrayHeatMapData = new Array(heat.length);
for (var i=0; i<heat.length; i++)
{
//create array untuk menampung heatMapData
var heatMapData =
{
lat:parseFloat($(heat[i]).find("lat").text()),
lon:parseFloat($(heat[i]).find("lng").text()),
count:parseFloat($(heat[i]).find("count").text())
}
arrayHeatMapData[i] = heatMapData;
}
var testData={max:100, data:arrayHeatMapData};
var transformedTestData = { max: testData.max , data: []},
data = testData.data,
datalen = data.length,
nudata = [];
// in order to use the OpenLayers Heatmap Layer we have to transform our data into
while(datalen--)
{
nudata.push
({
lonlat: new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat),
count: data[datalen].count
});
}
transformedTestData.data = nudata;
map = new OpenLayers.Map('heatmapArea');
//create map new
layer = new OpenLayers.Layer.OSM();
// create our heatmap layer
heatmap = new OpenLayers.Layer.Heatmap("Heatmap Layer", map, layer, {visible: true, radius:5}, {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
map.addLayers([layer, heatmap]);
map.zoomToMaxExtent();
map.zoomIn();
heatmap.setDataSet(transformedTestData);
}
});
}
window.onload = function()
{
init();
};
document.getElementById("tog").onclick = function()
{
heatmap.toggle();
};
</script>
This code has managed to focus on areas of the country indosesia,
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" type="image/png" href="http://www.patrick-wied.at/img/favicon.png" />
</head>
<body>
<div id="main"><div id="heatmapArea"></div>
<div style="position:absolute;width:940px;top:750px;text-align:center;"></div>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="src/heatmap.js"></script>
<script type="text/javascript" src="src/heatmap-openlayers.js"></script>
<script type="text/javascript" src="loadxmldoc.js"></script>
<script type="text/javascript">
var map, layer, heatmap, lat, lon, cnt;
function init()
{
$.ajax
({
// source data koordinat dalam bentuk xml
url: "http://localhost/katanya_new/map/data_katanya.xml",
dataType:"xml",
success: function(xmlDoc)
{
//kita ambil data element yang tidak mempunyai attribute name
var heat = $(xmlDoc).find("data[name!=Geo_map]");
var arrayHeatMapData = new Array(heat.length);
for (var i=0; i<heat.length; i++)
{
//create array untuk menampung heatMapData
var heatMapData =
{
lat:parseFloat($(heat[i]).find("lat").text()),
lon:parseFloat($(heat[i]).find("lng").text()),
count:parseFloat($(heat[i]).find("count").text())
}
arrayHeatMapData[i] = heatMapData;
}
var testData={max:100, data:arrayHeatMapData};
var transformedTestData = { max: testData.max , data: []},
data = testData.data,
datalen = data.length,
nudata = [];
// untuk menggunakan Layer OpenLayers Heatmap kita harus mengubah data kita menjadi
while(datalen--)
{
nudata.push
({
lonlat: new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat),
count: data[datalen].count
});
}
transformedTestData.data = nudata;
//create new map position :
map = new OpenLayers.Map('heatmapArea');
var layer = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // 23834 to Spherical Mercator Projection
var position = new OpenLayers.LonLat(113.921327,0.789200).transform( fromProjection, toProjection);
var zoom = 5;
// create our heatmap layer :
heatmap = new OpenLayers.Layer.Heatmap("Heatmap Layer", map, layer, {visible: true, radius:5}, {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
map.addLayers([layer, heatmap]);
map.setCenter(position,zoom);
heatmap.setDataSet(transformedTestData);
}
});
}
window.onload = function()
{
init();
};
document.getElementById("tog").onclick = function()
{
heatmap.toggle();
};
</script>
</html>