2

I am trying to add a popup function to some polygons. I've been consulting a few different tutorials trying to work it out and I'm concerned that I am getting conflicting instructions.

The map I have now is displaying perfectly. The next step for me is to add the popup when the polygon is clicked on. I keep getting the error "Argument 1 of Node.appendChild is not an object." I have no idea what this means. My only guess is that it has something to do with using a var within landscape.js to create the landscape.geojson, since that might not be creating it in the right way to use it for the popup.

<html>
<head>
<link rel="stylesheet" href="./leaflet/leaflet.css" />
<script type="text/javascript" src="./leaflet/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="landscape.js" type="text/javascript"></script>
</head>
<body>

<div id=map></div>

<script type="text/javascript">
var map = L.map('map').setView([42.505, -100], 3);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);

function toAddPopup (feature, layer) {
        layer.bindPopup(feature.properties.metro_severePct);
        }

L.geoJson(landscape,{
        onEachFeature: toAddPopup
}).addTo(map);

</script>
</body>

</html>
2

The layer.bindPopup method is expecting a string, but you are passing it a numeric property. You can avoid the error by either using .toString():

function toAddPopup (feature, layer) {
        layer.bindPopup(feature.properties.metro_severePct.toString());
        }

or by appending your property to another string using the + operator, which will also convert the numeric value to a string:

function toAddPopup (feature, layer) {
        layer.bindPopup('Percent severe:' + feature.properties.metro_severePct);
        }
  • 1
    Brilliant! There's nothing in the tutorials about that, so thank you for the insight. Is there a way to check what it's expecting? – Brian Feb 23 '16 at 21:02
  • It's in the Leaflet docs if you know where to look. You will see that L.geoJson doesn't list any method for .bindPopup, but it extends (and thus inherits the methods from) L.featureGroup, which does have a .bindPopup method accepting a string and an optional popup options object as arguments. – nathansnider Feb 23 '16 at 21:52
  • Interesting. Thanks for the added info. I'm guessing that knowing where to look in the documentation might come in handy at some point in the future, too. – Brian Feb 23 '16 at 22:58

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.