CODEWITHSUNDEEP
mapsleafletgeojson
Rose Kane Quinn
Rose Kane Quinn

Reputation: 45

geojson Leaflet pop-up will not appear or breaks marker

I have geoJson data I am displaying using Leaflet. The markers appear on the map as they are supposed to but I cannot bind a popup to it. If I append it to the marker directly, nothing will appear. If I append it to the layer, it just doesn't appear but the marker does. Please take a look and advise what the problem is!

function playgroundMarker(feature, layer){
    var popupOptions = {width: 200};
    var popupContent = "This is some content";


    var marker = new L.icon({iconUrl: "lib/leaflet/images/play_icon.png"});
    //L.marker.bindPopup(popupContent, popupOptions); - This breaks it
    //layer.bindPopup(popupContent, popupOptions); - This just doesn't appear
    layer.setIcon(marker);

};  
var playground = L.geoJson(playgrounds, {
    onEachFeature: playgroundMarker
}).addTo(map);

Upvotes: 2

Views: 716

Answers (2)

nrhode
nrhode

Reputation: 942

I am not sure if I understand you right, but if you have geojson objects you can use the pointToLayer function to add an Marker. The eachFeature function is good for binding a popup.

var playground = L.geoJson(playgrounds, {
     pointToLayer: function (feature, latlng) {
         return L.marker(latlng, {icon: new L.icon({iconUrl: "lib/leaflet/images/play_icon.png"})});
     },
    onEachFeature: playgroundMarker
}).addTo(map);



function playgroundMarker(feature, layer) {
            var popup = new L.Popup({
                autoPan: false,
                keepInView: true,
                closeButton: false,
                offset: new L.point(0, -5)
            }).setContent("This is some content");


        layer.bindPopup(popup);
        //you can also choose the click event oder simply no event and add layer.openPopup();
        layer.on({
            mouseover: function () {
                layer.openPopup();
            },
            mouseout: function () {
                layer.closePopup()
            },
            mousemove: function (e) {
                popup.setLatLng(e.latlng);
            }
        });
    }

Upvotes: 0

IvanSanchez
IvanSanchez

Reputation: 19089

If you just .bindPopup(), nothing appears. This is expected.

If you .bindPopup() and then .openPopup(), the popup will show.

The main problem you have there is the call to setIcon. setIcon expects its only argument to be an instance of L.Icon, not an instance of L.Marker. The marker is already the layer received by the onEachFeature callback.

You do not need to (and should not) create markers in onEachFeature. Markers are created in the pointToLayer callback option of L.GeoJSON. If you need to create markers, override the default pointToLayer callback and do it there.

When you use GeoJSON, the pointToLayer and style options work their magic to convert points into L.Markers (pointToLayer), and LineStrings/Polygons into L.Polylines/L.Polygons. Once all GeoJSON features have been converted to either a marker or a polyline/polygon, then onEachFeature iterates through all. It's easy to mix these up.

Upvotes: 2

Related Questions