[GIS] Getting latlong in popup on mouse click over linear feature using Leaflet

leaflet

I´ve created a Geojson layer of linear features using the option "onEachFeature" to binding a popup wich shows some data for each feature.
This is the code that is working right for this purpose:

function onEachFeature (feature, layer) {
    layer.id = feature.properties.num,
    layer.bindPopup(
        "<div class='row'>"+
            "<b>Orden de trabajo (</b>" + feature.properties.estado +"<b>)</b></br>"+
            "</br>"+
            "<b>Identificador: </b>" + feature.properties.num +"</br>" +
            "<b>Fecha ini.: </b>" + feature.properties.f_ini +"</br>" +
            "<b>Fecha est. fin: </b>" + feature.properties.f_estimada+"</br>"+
        "</div>"

    )
};

var l_encurso = L.geoJson(<%- ordenesl %>, {
    filter: function(feature, layer) {
        return feature.properties.estado == "En curso";
    },
    style: function(feature) {
        return {
            weight: 5,
            color: 'green'
        };
    },
    onEachFeature: onEachFeature
});

Now, i would like to get the coordinates (lat long) of the mouse position when i click over the linear feature and show them also in the poup.

Can you give me any idea, please?

Best Answer

To insert dynamic data into a popup you want to pass a function into bindPopup that returns the rendered popup content at the time of popup creation. In this rendering function, you can use a stored value for the latlng to display the location of the clicked coordinate. To obtain the clicked coordinate you want to use leaflet's click event, which contains information on the coordinate that was clicked.

Edit: Because you want to use feature data in the render function you actually need to use a function factory (a function that returns a function), so you can specialize each function to use the feature-specific data.

// variable that will store the coordinate
var clickedLatLng = {lat: null, lng: null}; 

// function that creates the popup content
function createPopupContent(values) {
    return function () {
        return "....other data like " + values.data1 + " and " + values.data2 + "..." + clickedLatLng.lat + ', ' + clickedLatLng.lng;
    }
}

// function that is called when line is clicked
function onLineClick(e) { // e is a leaflet Event object
    clickedLatLng = e.latlng;
}

function onEachFeature (feature, layer) {
    layer.id = feature.properties.num;
    layer.bindPopup(createPopupContent(feature));
    layer.on('click', onLineClick)
};

var l_encurso = L.geoJson(<%- ordenesl %>, {
    filter: function(feature, layer) {
        return feature.properties.estado == "En curso";
    },
    style: function(feature) {
        return {
            weight: 5,
            color: 'green'
        };
    },
    onEachFeature: onEachFeature
});
Related Question