Loading geojson markers into mapbox setting custom icon image

I'm new to mapbox/leaflet and I think it's a pretty basic problem I'm fighting the last two days and though I've tried several ways I can't wrap my head around it.

I'm loading markers via geojson:

var ma_3 = L.mapbox.featureLayer().loadURL('./data/marathon/marker3x.geojson');

and then try to change properties like size or color according to the title used in the geojson data:

ma_3.on('ready', function(layer) {
                this.eachLayer(function(marker) {
            if (marker.toGeoJSON().properties.title === 'Verpflegung') {

                marker.setIcon(L.mapbox.marker.icon({                   
                    "marker-size": 'large'
                }));
            } else {
                marker.setIcon(L.mapbox.marker.icon({}));
            }

            marker.bindPopup(marker.toGeoJSON().properties.id + ', ' +
                marker.toGeoJSON().properties.title);
        });
    })
    .addTo(baseMap);

The geojson looks like this:

{
      "type": "Feature",
      "properties": {
        "id": "marker-ie2tbbh05",
        "title": "Verpflegung",
        "description": "",
        "marker-size": "medium",
        "marker-color": "#b7ddf3",
        "marker-symbol": "marker-stroked"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          6.431395,
          51.19433
        ]
      },

Am I missing something because I've also tried giving the marker a new face by using

var icon_live = L.icon({ iconUrl: './img/icon-live.png', iconSize: [35,35] });

somewhere in the setIcon function but nothing seems to work. If someone could please point me in right direction. It's really appriciated.

I guess it's a typical beginners mistake and maybe it's just me but I found it pretty confusing in which context to use the several options of setIcon. In the end I made it work using .on(layeradd) and marker.setIcon(pathToYourIcon).

ma_3.on('layeradd', function(layer) {
            this.eachLayer(function(marker) {
        if (marker.toGeoJSON().properties.title === 'Verpflegung') {
            marker.setIcon(icon_live);
        } 

        marker.bindPopup(marker.toGeoJSON().properties.id + ', ' +
            marker.toGeoJSON().properties.title);
    });
});

Have you seen this example yet?

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Custom marker icons</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([40, -74.50], 8);

var myLayer = L.mapbox.featureLayer().addTo(map);

var geoJson = [{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-75.00, 40]
    },
    "properties": {
        "title": "Small astronaut",
        "icon": {
            "iconUrl": "/mapbox.js/assets/images/astronaut1.png",
            "iconSize": [50, 50], // size of the icon
            "iconAnchor": [25, 25], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
        }
    }
}, {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-74.00, 40]
    },
    "properties": {
        "title": "Big astronaut",
        "icon": {
            "iconUrl": "/mapbox.js/assets/images/astronaut2.png",
            "iconSize": [100, 100],
            "iconAnchor": [50, 50],
            "popupAnchor": [0, -55],
            "className": "dot"
        }
    }
}];

// Set a custom icon on each marker based on feature properties.
myLayer.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;

    marker.setIcon(L.icon(feature.properties.icon));
});

// Add features to the map.
myLayer.setGeoJSON(geoJson);
</script>
</body>
</html>

*Source: https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/

来源：https://stackoverflow.com/questions/32499631/loading-geojson-markers-into-mapbox-setting-custom-icon-image

标签

javascript

leaflet

mapbox