Styling GeoJSON polygons loaded via a URL in javascript, MapBox

Question

Below is a little bit of code that produces two polygon layers displayed as gray, semitransparent shaded polygons by default:

var overlays = {
  SeniorsNorm: L.mapbox.featureLayer().loadURL('data/SeniorsAge65+.geojson'),
  AQIRiskZones: L.mapbox.featureLayer().loadURL('data/AQIZones.geojson'),
};

Would it be possible to assign a fill color, opacity, etc? Have tried just about everything and I just can't quite get there. Thank you in advance.

Answer 1

The signature for L.mapbox.featureLayer is as follows:

L.mapbox.featureLayer(id|url|geojson, options)

https://www.mapbox.com/mapbox.js/api/v2.2.4/l-mapbox-featurelayer/#section-l-mapbox-featurelayer

Which means you can pass the URL directly to it as the first parameter so you don't need to use loadURL . You can use that if later on want to reload or load another URL. To set style on the layer's features you can use the setStyle method as described in the documentation for L.FeatureGroup which L.mapbox.featureLayer is extended from:

Sets the given path options to each layer of the group that has a setStyle method.

http://leafletjs.com/reference.html#featuregroup-setstyle

Which would boil down to something like this:

L.mapbox.featureLayer('data/SeniorsAge65+.geojson').setStyle({fillColor: 'red'})

The style object supports all the path options decribed in this link:

http://leafletjs.com/reference.html#path-options