Mapbox set icon for featureLayer

Question

I am having some problems with setting an icon for a feature layer. I keep getting layer.setIcon is not a function and similar errors. How can I change the icon style for this layer?

 var layer = L.mapbox.featureLayer()
            .loadURL(attrs.geoJsonSource)
            .addTo(map);

        layer.on('ready', function() {
            this.eachLayer(function(layer){
                layer.setIcon(L.mapbox.marker.icon({
                    'marker-color': '#8834bb',
                    'marker-size': 'large',
                    'marker-symbol': 'restaurant'
                }))
            });
            map.fitBounds(featureLayer.getBounds());
        });

Answer 1

I am not sure why, but none of the proposed solutions work for me. Instead I have to iterate through the layers of the layer.

        layer.on('layeradd', function(e) {
            var marker = e.layer, feature = marker.feature;
            e.layer.getLayers().forEach(function(marker) {
                marker.setIcon(L.mapbox.marker.icon({
                    'marker-color': '#8834bb',
                    'marker-size': 'large',
                    'marker-symbol': 'restaurant'
                }));
            })
        });

Answer 2

You can use the simple style spec to style the geojson. Looks like this needs to happen before you add it to the feature layer. You could try running eachLayer instead of the for loop, then adding that layer to another feature layer, once the geojson has the style/icons you want. This is modified from the original example. Or you could just use the Leaflet pointToLayer function as shown below.

var key = 'your key here'
L.mapbox.accessToken = key;
var map = L.mapbox.map('map')
  .setView([37.8, -96], 3);

var geojson = [
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-77.031952, 38.913184]
    },
    properties: {
      title: 'Title'
    }
  }
 ];
//Option A - set the properties of the geojson using the simple style spec supported in mapbox.js for mapbox feature layers

/*for(i = 0; i < geojson.length; i++) {
  geojson[i].properties['marker-color'] = '#63b6e5';
  geojson[i].properties['marker-size'] = 'large';
  geojson[i].properties['marker-symbol'] = 'rocket';
}*/

//Option B - use the native leaflet function for points - very simple and extendable to other icon plugins
var features = L.geoJson(geojson, { 
  pointToLayer: function(feature, latlng){
    return new L.marker(latlng, {
      icon: L.mapbox.marker.icon({
        'marker-color': '#00f',
        'marker-symbol': 'star'
        })
    })
  }
 }).addTo(map);

body { margin:0; padding:0; }
    .map { position:absolute; top:0; bottom:0; width:100%; }

<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<div id='map' class='map'></div>

Answer 3

You can take a look at https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/ and http://leafletjs.com/examples/custom-icons/ to get more information, but apparently you may fit your need:

• using your own icon style. (FIRST)

and/or

• using geoJSON file icon style. (SECOND)

The code:

var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 9);
var layer = L.mapbox.featureLayer().addTo(map);

layer.on('layeradd', function(e) {
    var marker = e.layer,feature = marker.feature;

    // TWO POSSIBILITIES

    // FIRST // your own method to define how icon will be rendered   
    marker.setIcon(L.mapbox.marker.icon({
        'marker-color': '#8834bb',
        'marker-size': 'large',
        'marker-symbol': 'restaurant' 
    }));

    // SECOND // use json directly to define how icon will be rendered   
    //marker.setIcon(L.mapbox.marker.icon(feature.properties.icon));
});

layer.setGeoJSON(geoJson);

assuming the geoJSON file look like this:

var geoJson = [{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-75.00, 40]
    },
    "properties": {
        "title": "Small astronaut",
        "icon": {
            'marker-color': '#0034bb',
            'marker-size': 'large',
            'marker-symbol': 'restaurant' 
        }
    }
}, {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-74.00, 40]
    },
    "properties": {
        "title": "Big astronaut",
        "icon": {
            'marker-color': '#8834bb',
            'marker-size': 'large',
            'marker-symbol': 'restaurant' 
        }
    }
}];