Trouble Creating Mapbox Popups with External GeoJSON

143 Views Asked by At

I have a map with external GeoJSON and a search box feature. I am having a problem with getting the popups to display. The markers display and the filter works fine currently. I looked at several suggestions here and here. It appears to be an easy fix but I have not been able to get any of the suggested solutions to work. I'm thinking I am missing some small detail. Any help is greatly appreciated.

Here is my GeoJSON variable and the popup I have been trying.

var locations = L.mapbox.featureLayer()
.setGeoJSON(geojson)
.addTo(map)
    .on('ready', function(){

        locations.eachlayer(function(layer){
            var prop = layer.feature.properties;
            var popup = '<b>' + prop.state + '</b>';
                locations.bindPopup(popup);

    })

 })
.addTo(map);
2

There are 2 best solutions below

0
On BEST ANSWER

You can remove the 'ready' callback, and just do

var locations = L.mapbox.featureLayer()
.setGeoJSON(geojson)
.addTo(map)

locations.eachLayer(function (layer) {
  var prop = layer.feature.properties;
  var popup = '<b>' + prop.state + '</b>';
  layer.bindPopup(popup);
})
0
On

Thanks for your help @snkashis, but that did not resolve the problem. I recieved a response from Mapbox with a working solution. They instructed me that when working with filters I need to use the 'layeradd' parameter. The solution they offered is below.

var locations = L.mapbox.featureLayer()
  .setGeoJSON(geojson)
  .addTo(map);

locations.on('layeradd', function(e){
  var prop = e.layer.feature.properties;
  var popup = '<b>' + prop.state + '</b>';
  e.layer.bindPopup(popup);
});