4

I'm trying to add popups for point icons using Leaflet.js and ran into this error: "Uncaught TypeError: points.eachLayer is not a function"

Here's my code:

function addPoints(data){
    for (var feature in data.features){
        if(data.features[feature].properties.activity == "hunting"){   
            points = L.marker([data.features[feature].geometry.coordinates[1],data.features[feature].geometry.coordinates[0]], {
                icon: L.mapbox.marker.icon({
                    'marker-color': '#FF5A5C',
                    'marker-symbol': 'bus'
                })
            }).addTo(map).on({
                mouseover: function(e){
                    this.openPopup();
                }, mouseout: function(e){
                    this.closePopup();
                }   
            });
        } 
    };
    drawPopup(data);
} //end addPoints
function drawPopup(data){
    points.eachLayer(function(layer){
        var popupContent = "Park: " + data.features[feature].properties.name + "<br />" + "Activities: " + data.features[feature].properties.activity; 
        layer.bindPopup(popupContent);
    });
}

I've used nearly identical code before and have never run into this problem, what am I doing wrong?

3

EDIT 1:

You code with Layer Group would be like:

var points = L.layerGroup();

addPoints(data);

function addPoints(data) {
    for (var feature in data.features) {
        if (data.features[feature].properties.activity == "hunting") {
            var marker = L.marker([
                data.features[feature].geometry.coordinates[1],
                data.features[feature].geometry.coordinates[0]
            ], {
                icon: L.mapbox.marker.icon({
                    'marker-color': '#FF5A5C',
                        'marker-symbol': 'bus'
                })
            }).addTo(map).on({
                mouseover: function (e) {
                    this.openPopup();
                },
                mouseout: function (e) {
                    this.closePopup();
                }
            });

            // Keeping a reference to feature key.
            marker.feature = feature;
            // You could directly store all feature data into
            // the marker instead…

            // Finally adding the built marker into `points` Layer Group.
            points.addLayer(marker);
        }
    };
    drawPopup(data);
} //end addPoints

function drawPopup(data) {
    points.eachLayer(function (layer) {
        // Probably missing an assignment for `feature`?
        var feature = layer.feature;

        var popupContent =
            "Park: " +
            data.features[feature].properties.name +
            "<br />" + "Activities: " +
            data.features[feature].properties.activity;
        layer.bindPopup(popupContent);
    });
}    layer.bindPopup(popupContent);
    });
}

As said in the comments, your code could probably be simplified by using L.geoJson factory rather than looping yourself through data. But it should do the job as is.


Your points variable looks to be only the last created marker:

points = L.marker( ...

You probably want to make a Layer Group (which has the eachLayer method) and add your markers into it:

var points = L.layerGroup();

...
points.addLayer(L.marker(/* ... */));

...
points.eachLayer(function (layer) { /* ... */ })
  • That makes sense, but now I have the same error for points.addLayer "Uncaught TypeError: points.addLayer is not a function" – kkowalsky Nov 24 '15 at 2:24
  • Most probable reason is that points is not properly initialized before using addLayer. Any chance you could reproduce your issue online? (e.g. on jsfiddle) You might also be interested in using L.geoJson to create your group with markers, rather than looping through the data yourself. In particular, you have the filter method to select only the features that you want to keep. – ghybs Nov 24 '15 at 4:36

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.