CODEWITHSUNDEEP
javascriptd3.jsleaflet
renny
renny

Reputation: 600

When i click on the marker, the pop up doesn't appear. I get the following error

I tried copy pasting the error and found a resource but i am literally unable to understand what it is. I'm stuck with this pop up issue, do help me out with it. I'm attaching the snippet of my code along with the error that pops out in the console log.

snippet:

for (var i=0; i<quakePoints.length; i++) {

        var lon = quakePoints[i][1];
        var lat = quakePoints[i][0];
        var popupText = quakePoints[i][2];
        var markerLocation = new L.LatLng(lat, lon);
        var marker = new L.marker(markerLocation);
        marker.bindPopup(popupText).addTo(map);

    }

Error:

leaflet.js:7 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
        at e._updateContent (leaflet.js:7)
        at e.update (leaflet.js:7)
        at e.onAdd (leaflet.js:7)
        at e._layerAdd (leaflet.js:6)
        at e.addLayer (leaflet.js:6)
        at e.openPopup (leaflet.js:7)
        at e.openPopup (leaflet.js:7)
        at e.togglePopup (leaflet.js:7)
        at e.fireEvent (leaflet.js:6)
        at e._onMouseClick (leaflet.js:7)

Error- After using leaflet-src.js

leaflet-src.js:4046 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at NewClass._updateContent (leaflet-src.js:4046)
    at NewClass.update (leaflet-src.js:3974)
    at NewClass.onAdd (leaflet-src.js:3899)
    at NewClass._layerAdd (leaflet-src.js:2265)
    at NewClass.addLayer (leaflet-src.js:1723)
    at NewClass.openPopup (leaflet-src.js:4172)
    at NewClass.openPopup (leaflet-src.js:4197)
    at NewClass.togglePopup (leaflet-src.js:4215)
    at NewClass.fireEvent (leaflet-src.js:466)
    at NewClass._onMouseClick (leaflet-src.js:3738)

Edit, Attaching sample data

var quakePoints = [
    [17.123184,79.208824,1.7345],
    [19.123184,76.208824,2.7345],
    [18.123184,69.208824,2.7345],
    [21.123184,70.208824,3.7345],
    [23.123184,72.208824,2.6645],
    [22.123184,77.208824,1.2245],
    [24.123184,85.208824,2.7345],
    [18.123184,78.208824,1.7345],
    [11.123184,89.208824,1.7345]];

Upvotes: 2

Views: 1000

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19089

According to your other question, the quakePoints array looks like:

var quakePoints = [
    [17.123184,79.208824,1.7345],
    ...
];

Which means that popupText here ...

    var popupText = quakePoints[i][2];

...gets the value 1.7345, but as a Number, not as a String.

Later, Leaflet is running this piece of code, with the internal parameter content set to the Number 1.7345:

    if (typeof content === 'string') {
        node.innerHTML = content;
    } else {
        // snip
        node.appendChild(content);
    }

The parameter is not a String, therefore it tries to handle it as a HTMLElement.

Please carefully read the definition of the bindPopup method from the Leaflet API reference:

bindPopup(<String|HTMLElement|Function|Popup> content, <Popup options> options?)

Binds a popup to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement.

Note how the first parameter to bindPopup has to be a String, an HTMLElement, a Function that returns either a String or an HTMLElement, or an instance of Popup. You are passing in a Number, which is none of those, so your issue is actually a case of GIGO.

The approach here would be to ensure that you're passing a String:

e.g. with String():

    var popupText = String(quakePoints[i][2]);

or e.g. with Number.toString():

    var popupText = quakePoints[i][2].toString();

Upvotes: 3

Related Questions