Search code examples
functionleafletgeojson

leaflet geoJSON.onEachFeature is not a function?

I am trying to implement an "Add to Cart" model with a series of point popups (you click on a point and there is a button that says "Add to Cart", which adds info from the popup to a separate ul tag.

I had the following code which worked, but was returning values of undefined:

        var content = [];

        //create popups
        function onEachPopup(feature, layer) {
            layer.bindPopup("<button type='button' onclick = 'addToCart(" + layer._leaflet_id + 
                            ")'>Add to Cart</button>")
        };

        //create geoJSON
        geojson = L.geoJSON(pointfixed, {
        pointToLayer: function (feature, latlng){
            return L.circleMarker(latlng, {
                radius: 3,
                fillColor: getColor(feature.properties.Coordinate),
                color: "#000",
                fillOpacity: 1,
                weight: 1
                }); 
        },
            onEachFeature : onEachPopup, function(feature, layer){feature.layer=layer}
        }).addTo(map);

        //add to cart function
        function addToCart(i){
            content.push(geojson._layers[i])
            content.forEach(function (c){
            document.getElementById("cartlist").innerHTML += '<li>' + content + '</li>' 
        })
        };

This works, but returns a value of undefined.

I thought there was a timing issue with my geojson creation, so I tried to move things around a bit, like this:

        geojson = L.geoJSON(pointfixed, {
        pointToLayer: function (feature, latlng){
            return L.circleMarker(latlng, {
                radius: 3,
                fillColor: getColor(feature.properties.Coordinate),
                color: "#000",
                fillOpacity: 1,
                weight: 1
                }); 
        },
        }).addTo(map);
    geojson.onEachFeature(onEachPopup);

This causes an issue with the popups (they do not display) and I get the following error: Uncaught TypeError: geojson.onEachFeature is not a function

enter image description here

I'm still pretty new to leaflet and am having a hard time determining where the issue is coming from. Is there something obvious I'm missing?

Solution

  • You get undefined because your layer has no leaflet_id, because the layer is not already added to the map.

    Change your code to:

    geojson = L.geoJSON(pointfixed, {
        pointToLayer: function (feature, latlng){
            return L.circleMarker(latlng, {
                radius: 3,
                fillColor: getColor(feature.properties.Coordinate),
                color: "#000",
                fillOpacity: 1,
                weight: 1
                }); 
        },
}).addTo(map);

geojson.eachLayer(function(layer){
     layer.bindPopup("<button type='button' onclick = 'addToCart(" + layer._leaflet_id +")'>Add to Cart</button>");
});