I'm trying to display mouse position on external div (ExtJS based) using this code :
map.events.register("mousemove", map, function(e) {
position = map.getLonLatFromLayerPx(this.events.getMousePosition(e));
position = position.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
Ext.fly(mouseposition.getEl()).update("Lat (N): " + position.lat.toFixed(4) + " Long (E): " + position.lon.toFixed(4) );
});
The problem is that when I pan the map than the coords I get are the original from before the pan , only if I zoom in/out than I get the correct coords from the mouse position.
How can I fix this ?
Here is example (look on the coords on the bottom of the map) :
- Initial load over Israel , see the lat/lon of the mouse.
- I pan over to europe , lat/lon stay around the same values of the original map extent
- I zoom in and back out and the lat/lon update to the current map view extent range.
mousemove
event is not triggered? Did you try debugging? Note thatposition
should be a local variable. You can easily test your code directly on openlayers.org/two by using Chrome JS console (just replace Ext stuff withconsole.log
), output looks more or less OK. BTW. the logic seems flawed anyway because the same place returns different lat/lon depending on which part of the div it's in - not sure if converting mouse position to lat/lon makes any sense from geographical POV.