0

I have an OpenLayers interface with two maps side-by-side. They are synced so that any pan or zoom action on either map affects both of them.

I also have MousePosition controls on each map so that the user can see the lon/lat coords on mouseover. I like having a separate MousePosition on each map rather than a single one in an external div. I was able to sync the MousePosition controls to one another using the code below.

My question is this: Is there a better way to get a handle on the MousePosition elements? The getElement approach I'm using feels a bit hacky. Thanks.

map1.events.register("mousemove", map1, function (e) {
  var position = map1.getLonLatFromViewPortPx(e.xy).transform(WGS84_SM, WGS84);
  var lat = position.lat.toFixed(5);
  var lon = position.lon.toFixed(5);
OpenLayers.Util.getElement("OpenLayers.Control.MousePosition_68").innerHTML =
                           "<label>" + lon + " " + lat + "</label>";
});

map2.events.register("mousemove", map2, function (e) {
  var position = map2.getLonLatFromViewPortPx(e.xy).transform(WGS84_SM, WGS84);
  var lat = position.lat.toFixed(5);
  var lon = position.lon.toFixed(5);
OpenLayers.Util.getElement("OpenLayers.Control.MousePosition_37").innerHTML =
                           "<label>" + lon + " " + lat + "</label>";
});
0

1 Answer 1

1

Why not just listen to the mouse-move event and write to your own div and just place it on top of your map with relative positioning and a high z-index? Then you'll know exactly the ID of each div and can write to it what you like.

1
  • Agreed, this seems like the best way to do it. Thanks.
    – vulture
    Sep 13, 2012 at 6:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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