open street map

eltaziky · 2012-08-03T02:49:42.000Z

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>

Where should I change?

Tordanik · 2012-08-04T14:33:18.000Z

Have a look at the setCenter method. http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example#A_little_more_extensive_example contains a simple example how it is used.

eltaziky · 2012-08-06T08:58:50.000Z

in its existing code that needs to be changed? I do not understand which of the above wiki

eltaziky · 2012-08-07T04:37:16.000Z

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>

thank you for that already provide a solution