how to get the current location of the user along with latitude and longitude in OpenLayers

Question

I am getting the current location of the user but not able to display the latitude and longitude. How to show the latitude and longitude when we click on the marker.

Any help will be appreciated

Thank You!

function init() {

    this.convert = function(lat1, lon1, lat2, lon2){ 
        var R = 6378.137; // Radius of earth in KM
        var dLat = (lat2 - lat1) * Math.PI / 180;
        var dLon = (lon2 - lon1) * Math.PI / 180;
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
        Math.sin(dLon/2) * Math.sin(dLon/2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        var d = R * c;
        return d * 1000; // meters
    };

    this.addMarker = function(position) {
        var markers = new OpenLayers.Layer.Markers("Markers");
        map.addLayer(markers);
        markers.addMarker(new OpenLayers.Marker(position));
        map.on('click', function(e) {
    alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng)
});

     };


    this.findLocations = function(latitude, longitude, fromProjection, toProjection) {
        for (i in Locations) {
          long = Locations[i].lon;
          lat = Locations[i].lat;

          if (convert(latitude,longitude,lat,long) <= 300) {
            var positionLocation = new OpenLayers.LonLat(long,lat).transform(fromProjection, toProjection);
            addMarker(positionLocation);
          } else {continue;}
        }   
    };

    this.getPosition = function(position){
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

        var position = new OpenLayers.LonLat(longitude,latitude).transform(fromProjection, toProjection);
        var zoom = 18; //maximum value

        addMarker(position);
        map.setCenter(position, zoom);
        findLocations(latitude, longitude, fromProjection, toProjection);
    };

    this.map = new OpenLayers.Map("basicMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();

    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(getPosition);
    } 
}

Answer 1

You can add a click event to the map. Here's an example for ol5:

function onClick(e) {
  var features = map.getFeaturesAtPixel(e.pixel);
  if (features && features.length > 0) {
    var coords = features[0].getGeometry().getCoordinates();
    alert(ol.proj.transform(coords, "EPSG:3857", "EPSG:4326"));
  }
}
map.on("click", onClick);