How to get lat/lng values from openlayers map

Question

I want to get lat/lon of marker on the openlayers map:

...
var dragVectorC = new OpenLayers.Control.DragFeature(vectorLayer, {
            onComplete: function (feature) {
        var lonlat = new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y);
                alert(lonlat.lat + ', ' + lonlat.lon);

But value that I get is:

5466016.2318036, 2328941.4188153

I have tried different ways to transform it but I always missing something.
What am I doing wrong?

var map = new OpenLayers.Map('map');
    var layer = new OpenLayers.Layer.OSM("Simple OSM Map");
    var vector = new OpenLayers.Layer.Vector('vector');
    map.addLayers([layer, vector]);

    map.setCenter(
        new OpenLayers.LonLat(-71.147, 42.472).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()
        ), 12
    );

    var pulsate = function (feature) {
        var point = feature.geometry.getCentroid(),
            bounds = feature.geometry.getBounds(),
            radius = Math.abs((bounds.right - bounds.left) / 2),
            count = 0,
            grow = 'up';

        var resize = function () {
            if (count > 16) {
                clearInterval(window.resizeInterval);
            }
            var interval = radius * 0.03;
            var ratio = interval / radius;
            switch (count) {
                case 4:
                case 12:
                    grow = 'down'; break;
                case 8:
                    grow = 'up'; break;
            }
            if (grow !== 'up') {
                ratio = -Math.abs(ratio);
            }
            feature.geometry.resize(1 + ratio, point);
            vector.drawFeature(feature);
            count++;
        };
        window.resizeInterval = window.setInterval(resize, 50, point, radius);
    };

    var geolocate = new OpenLayers.Control.Geolocate({
        bind: false,
        geolocationOptions: {
            enableHighAccuracy: false,
            maximumAge: 0,
            timeout: 7000
        }
    });


    map.addControl(geolocate);
    var firstGeolocation = true;
    geolocate.events.register("locationupdated", geolocate, function (e) {

        vector.removeAllFeatures();

        var circle = new OpenLayers.Feature.Vector(
            OpenLayers.Geometry.Polygon.createRegularPolygon(
                new OpenLayers.Geometry.Point(e.point.x, e.point.y),
                e.position.coords.accuracy / 2,
                40,
                0
            ),
            {},
            style
        );

        vector.addFeatures([
            new OpenLayers.Feature.Vector(
                e.point,
                {},
                {
                    graphicName: '', // cross
                    strokeColor: '', // #f00
                    strokeWidth: 2,
                    fillOpacity: 0,
                    pointRadius: 10
                }
            ),
            circle
        ]);

        if (firstGeolocation) {
            map.zoomToExtent(vector.getDataExtent());
            pulsate(circle);
            firstGeolocation = false;
            this.bind = true;
        }
        // create marker
        var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
        var feature = new OpenLayers.Feature.Vector(
         new OpenLayers.Geometry.Point(e.point.x, e.point.y),
         { some: 'data' },
         { externalGraphic: 'http://opportunitycollaboration.net/wp-content/uploads/2013/12/icon-map-pin.png', graphicHeight: 48, graphicWidth: 48 });
        vectorLayer.addFeatures(feature);
        map.addLayer(vectorLayer);
        var dragVectorC = new OpenLayers.Control.DragFeature(vectorLayer, {
            onComplete: function (feature) {

                alert('x=' + feature.geometry.x + ', y=' + feature.geometry.y);

            }
        });

        map.addControl(dragVectorC);
        dragVectorC.activate();

    });
    geolocate.events.register("locationfailed", this, function () {
        OpenLayers.Console.log('Location detection failed');
    });

    var style = {
        fillColor: '#000',
        fillOpacity: 0,
        strokeWidth: 0
    };

    $(window).load(function () {

        initMap();

    });


    function initMap() {

        vector.removeAllFeatures();
        geolocate.deactivate();

        geolocate.watch = false;
        firstGeolocation = true;
        geolocate.activate();

    }

And what are are the feature's x and y? This output could suggest that you're not setting your map's projection (it's all in the documentation). — kryger
– kryger, Commented Nov 23, 2014 at 16:19
X & Y are: x=2328962.0689932304, y=5466001.601399122. I am not sure what I am doing wrong. I will update my question with whole code. — 1110
– 1110, Commented Nov 23, 2014 at 16:26
@kryger I have updated question. This code (where I am tryting to get lat/lon) is bellow create marker comment — 1110
– 1110, Commented Nov 23, 2014 at 16:28

sifriday · Accepted Answer · 2014-11-23 17:07:09Z

2

You need to turn the point geometry's X,Y into a LonLat then transform it from your map's projection into WGS84 aka EPSG:4326 to get a 'conventional' lon/lat:

   var dragVectorC = new OpenLayers.Control.DragFeature(vectorLayer, {
        onComplete: function (feature) {
            var lonlat = new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y).transform(
                map.getProjectionObject(),
                new OpenLayers.Projection("EPSG:4326")
            ))
            alert(lonlat.lat + ', ' + lonlat.lon)

answered Nov 23, 2014 at 17:07

sifriday

4,5011 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikolay Traykov · Accepted Answer · 2022-02-16 14:55:32Z

0

2022 update:

import { toLonLat } from 'ol/proj'

let lonLat = toLonLat(coordinates)

answered Feb 16, 2022 at 14:55

Nikolay Traykov

1,71518 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to get lat/lng values from openlayers map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related