I'm trying to get the longitude and latitude of a POI every time a map marker is placed on a map.
This seems to work but it's not returning the correct LonLat -- it's a much larger number that is not a lonlat point.
Is GetLonLatFromPixel the right way to do it?
Apologies in advance for the messy code!
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#heatmapArea {
position:relative;
float:left;
width:800px;
height:600px;
border:1px dashed black;
}
</style>
</head>
<body>
<div id="main">
<div id="heatmapArea">
</div>
<script src=".js"></script>
<script src="//ajax.googleapis/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var map, layer
function init(){
//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(0,51.4791).transform( fromProjection, toProjection);
var zoom = 16;
map.addLayers([layer]);
map.setCenter(position,zoom);
markers = new OpenLayers.Layer.Markers( "Markers" );
markers.id = "Markers";
map.addLayer(markers);
//get lonlat:
map.events.register("click", map, function(e) {
//var position = this.events.getMousePosition(e);
var position = map.getLonLatFromPixel(e.xy);
var size = new OpenLayers.Size(40,50);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('eats.png', size, offset);
var markerslayer = map.getLayer('Markers');
markerslayer.addMarker(new OpenLayers.Marker(position,icon));
$("<p>{lat:"+position["lat"]+",lon:"+position["lon"]+",count=1},</p>").insertAfter("p.longlat");
});
}
window.onload = function(){
init();
};
</script>
<div id="position">
<p class="longlat">LonLat</p>
</div>
</html>
I'm trying to get the longitude and latitude of a POI every time a map marker is placed on a map.
This seems to work but it's not returning the correct LonLat -- it's a much larger number that is not a lonlat point.
Is GetLonLatFromPixel the right way to do it?
Apologies in advance for the messy code!
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#heatmapArea {
position:relative;
float:left;
width:800px;
height:600px;
border:1px dashed black;
}
</style>
</head>
<body>
<div id="main">
<div id="heatmapArea">
</div>
<script src="http://openlayers/api/OpenLayers.js"></script>
<script src="//ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var map, layer
function init(){
//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(0,51.4791).transform( fromProjection, toProjection);
var zoom = 16;
map.addLayers([layer]);
map.setCenter(position,zoom);
markers = new OpenLayers.Layer.Markers( "Markers" );
markers.id = "Markers";
map.addLayer(markers);
//get lonlat:
map.events.register("click", map, function(e) {
//var position = this.events.getMousePosition(e);
var position = map.getLonLatFromPixel(e.xy);
var size = new OpenLayers.Size(40,50);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('eats.png', size, offset);
var markerslayer = map.getLayer('Markers');
markerslayer.addMarker(new OpenLayers.Marker(position,icon));
$("<p>{lat:"+position["lat"]+",lon:"+position["lon"]+",count=1},</p>").insertAfter("p.longlat");
});
}
window.onload = function(){
init();
};
</script>
<div id="position">
<p class="longlat">LonLat</p>
</div>
</html>
1 Answer
Reset to default 8The lon and lat will be in "map units". This is the same as longitude and latitude only if your map is in a geographic projection.
To get it to be the latitude and longitude values you expect, you need to run transform on the LonLat object:
map.events.register("click", map, function(e) {
var toProjection = new OpenLayers.Projection("EPSG:4326");
var position = map.getLonLatFromPixel(e.xy).transform(map.getProjectionObject(), toProjection);
...
(Of course, you don't need to go through the overhead of creating the toProjection object like that every time the callback is run if you make it otherwise available to the callback through another mechanism.)
Note that running transform() will alter the LonLat object, so if you need it in map units for other purposes, be sure to clone() it first.