I would like to dynamically display coordinates of the point, using label for example, while drawing polygon. I did so far:

var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
map.events.register("mousemove", map, function(evt){
    if (polygon.active) {
        var position = map.getLonLatFromPixel(this.events.getMousePosition(evt));
        var g = position.transform(toProjection, fromProjection);
        var f = formatLonlats(g);//my owny function which displays coordinates as: x1 deg y1 min z1 sec N, x2 deg y2 min z2 sec E (and here its decimal values)
        console.log(">> coordinates = " + f);

It's working for console, but how can I display a label with "f" value while drawing polygon?


you can replace

console.log(">> coordinates = " + f);

by this line if we suppose that "coordiantes" is the id of your label

OpenLayers.Util.getElement("coordiantes").innerHTML = f ;

you can see also this ISSUE

you can also use the MousePosition Control if you want to show mouse position inside the map

map.addControl(new OpenLayers.Control.MousePosition());   
  • Thank you for your help. I have already did it. I was not precise with my question. My OpenLayers.Control.MousePosition is on the map and works fine - but it is static. OpenLayers.Util.getElement("coordiantes").innerHTML = f - also will be static. I would like to have "mobile" label which is attached to polygon point while drawing. – Serg Apr 25 '14 at 11:42
  • in this case you can use jQuery and use the attribute tooltip I don't know if it works but try to replace console.log(">> coordinates = " + f); by $('#map_div_id').tooltip({ track: true, delay: 0, opacity: 0.95, left: -120 , content: f }); – b-eyes Apr 25 '14 at 13:31
  • and add this css class just to let this tooltip more pretty .ui-tooltip { font-size:10pt; font-family:Calibri; } – b-eyes Apr 25 '14 at 13:36
  • of course if you are using JQuery – b-eyes Apr 25 '14 at 13:37
  • Thank you once again for your efforts to help me. I have attached jquery-1.8.2.min.js, but I'm getting: 'Type error: ${...}.tooltip is not a function.' – Serg Apr 28 '14 at 6:51

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.