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>";
});