0

I am using leaflet.js for my application. The click event is not triggering alongwith the mouseover event.

   layer.on({
            mouseover: function (e) {
                L.popup().setLatLng(e.latlng)
                .setContent("Test")
                .openOn(map);
            },
            click: function () {
                alert("Click");
                map.fire("click", e);
            }
        });

I am using the custom marker instead of circle marker

     option.pointToLayer = function (feature, latlng) {
         var marker = L.marker(latlng);
                var icon = L.icon({
        iconUrl: 'Image/InvestmentIcons/environmentalflow.png',
        iconSize: [12, 12], // size of the icon
    });

                    marker.options.icon = icon;
                    return marker;
                }
2

You need onEachFeature function defined to show what should be in the popup, then bind that to the layer, that way when you click on it it opens the popup.

var marker = L.marker(latlng); 

should be

var marker = L.marker(latlng, {onEachFeature: forEachFeature})

Then define this popupContent with some HTML and the attributes from the feature. The Misc and Street are fields in my GeoJSON file.

function forEachFeature(feature, layer) {
    var popupContent = "<p> <b>" + feature.properties.Misc + 
        "</b></br>"+ feature.properties.Street + "</p>";

    layer.bindPopup(popupContent);
}

The mouse over is also defined in the onEachFeature function, in this case it's running a function called highlightFeature that you defined before.

layer.on({

        mouseover: highlightFeature

})

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.