I just started playing with MapBox and am running into a confusing issue. I'm creating a map with a geoJSON layer using this code:

var map = L.mapbox.map('map', '<MapBoxID>');
            var zipLayer = L.mapbox.featureLayer('data/blah.json');
            zipLayer.addTo(map);
            zipLayer.setStyle({color: 'red'});

The map appears and shows the geoJSON, but it ignores the styling. When I copy that last line into the JS console in my browser, it works fine, though.

What am I missing here? Also, I've tried at least a dozen different ways of including the style in the options directly in the featureLayer() call, but nothing has worked. How do I specify the style when creating the feature layer?

I just started playing with MapBox and am running into a confusing issue. I'm creating a map with a geoJSON layer using this code:

var map = L.mapbox.map('map', '<MapBoxID>');
            var zipLayer = L.mapbox.featureLayer('data/blah.json');
            zipLayer.addTo(map);
            zipLayer.setStyle({color: 'red'});

The map appears and shows the geoJSON, but it ignores the styling. When I copy that last line into the JS console in my browser, it works fine, though.

What am I missing here? Also, I've tried at least a dozen different ways of including the style in the options directly in the featureLayer() call, but nothing has worked. How do I specify the style when creating the feature layer?

• javascript
• geojson
• mapbox

3 Answers 3

I'm guessing a bit here, since I don't know the Mapbox JS very well, but it sounds a lot like an async error. Strangely, I don't see anything in the Mapbox or Leaflet APIs about a callback for this function. But, you can pass straight GeoJSON to featureLayer(), so I'd suggest using jQuery (or your XHR library of choice) to grab the data:

var map = L.mapbox.map('map', '<MapBoxID>');
var zipLayer;

$.getJSON('data/blah.json', function(data) {
    zipLayer = L.mapbox.featureLayer(data);
    zipLayer.addTo(map);
    zipLayer.setStyle({color: 'red'});
});

Hopefully that'll do the trick.

I would go the route of using the built-in featureLayer function, then listening for it to be ready. This should help get you pointed in the right direction:

var featureLayer = L.mapbox.featureLayer()
    .loadURL('/example-single.geojson')
    .on('ready', function(layer) {
        this.eachLayer(function(marker) {
            // See the following for styling hints:
            // https://help.github./articles/mapping-geojson-files-on-github#styling-features
            marker.setIcon(L.mapbox.marker.icon({
                'marker-color': '#CC0000'
            }));
        });
    })
    .addTo(map);

Have you tried adding the zipLayer after setting the style?