0

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?

1

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
});
  • Thank you very much for your detailed idea. It really works for me. – Alberto H. Aug 15 '17 at 16:53

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.