8

I'm trying to load more than 13 thousand points in leaflet from a geoJson file, everything seems to work just fine except the Popup function. I've looked everywhere for a solution and most answers out here do not work in my case. Here is an excerpt of my code:

//calling the geoJSON    
        var SaoPaulo = L.geoJson(SP_ResSinglePoint, {

            pointToLayer: function (feature, latlng) {
                var popupContent = feature.properties.Time;
                console.log(popupContent);
                return L.circleMarker(latlng, Style(feature)).bindPopup(popupContent);
            },

        });

When I click on a given point I get the following message on the console:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

But I do get all the info I'm looking for through the console.log so I'm assuming that that my popup parameters are correct, but yet no luck in the map.

Improve this question
4
  • What type is feature.properties.Time? It seems that the popup content needs to be in string type
    – Alexandru Pufan
    Apr 3, 2015 at 5:54
  • ... This was exactly the issue! I had no clue that popup could only take string values, does the documentation mention this at all?
    – Ricardo Oliveira
    Apr 3, 2015 at 13:56
  • @RicardoOliveira The leaflet documentation shows it can take a string, html element, or an already created popup object.
    – pk.
    Apr 3, 2015 at 14:59
  • 3
    @AlexandruPufan post as answer?
    – camdenl
    Apr 3, 2015 at 15:59

1 Answer 1

Reset to default
14

I had the exact same problem and it solved when I concatenated a string to it.

// the number shows correctly itself
console.log(layer.feature.properties.ROWID); // 46

// but bindPopup() won't accept numbers
layer.bindPopup(layer.feature.properties.ROWID); // error

// Then you must convert to string 
layer.bindPopup('quartier ' + layer.feature.properties.ROWID); // working fine
Improve this answer
3
  • 1
    This is a nice trick.
    – Ricardo Oliveira
    Oct 15, 2015 at 14:12
  • 1
    The problem is that it requires the content to be a string, it won't automatically convert it. The proper way is to cast the parameter into a string using String(param) e.g. layer.bindPopup(String(param));
    – kyriakos
    Jun 24, 2017 at 16:40
  • I had used .toString() to solve this today. If you don't need a label in front of the value, it could be helpful. In the example above, it would be: layer.bindPopup (layer.feature.properties.ROWID.toString());
    – Mr.ecos
    Jun 30, 2021 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.