1

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) :

  1. Initial load over Israel , see the lat/lon of the mouse.

enter image description here

  1. I pan over to europe , lat/lon stay around the same values of the original map extent

enter image description here

  1. I zoom in and back out and the lat/lon update to the current map view extent range.

enter image description here

Improve this question
2
  • What do you mean by "the coords I get are the original from before the pan"? The mousemove event is not triggered? Did you try debugging? Note that position 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 with console.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. – kryger Jun 8 '15 at 13:58
  • I've updated with screenshots to explain the problem. – Alophind Jun 8 '15 at 15:57
2

You should use getLonLatFromPixel instead of getLonLatFromLayerPx. Unfortunately the latter method is not documented at all (see here) so I'll leave it to you to investigate where they differ.

You can easily verify this by going to http://openlayers.org/two/ and pasting the following code in your JS console:

map.events.register("mousemove", map, function(e) {
  var position = map.getLonLatFromPixel(this.events.getMousePosition(e));
  position = position.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
  console.log("Lat (N): " + position.lat.toFixed(4) + "   Long (E): " + position.lon.toFixed(4));
});

Now grabbing and dragging an area using your mouse will show that lon/lat stays the same, that is - correct.

Note that if you try the same code with getLonLatFromLayerPx instead the coordinates "slide" along with the map that you're dragging which is clearly wrong (and this is what I descripbed in my comment under your question).

If I misunderstood your description please try to create a function that's easily reproducible, e.g. by pasting on http://openlayers.org/two/ and watching the JS console.

Improve this answer
2
  • I've used map.getLonLatFromViewPortPx and it sovled the problem. – Alophind Jun 8 '15 at 16:39
  • Just tried your solution and it also works. – Alophind Jun 8 '15 at 16:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.