Angular Leaflet geojson custom marker

Question

Is it possible to define your own marker icons in GeoJSON?

I have tried many ways to get the desired effect but nothing works ..

Example code from geojson FeatureCollection where i want add custom icon:

{
    "type": "Feature",
    "id": "Point1",
    "properties": {
        "name": "Last point"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [22.57031047873893, 51.25080964529834]
    }
}

sfletche sfletche · Accepted Answer · 2014-05-01T18:59:56

MapBox has created a CustomMarker plugin for Leaflet that should do the trick.

And another great example from Mapbox, GeoJSON Custom Markers and Style

Here's some sample code from that site:

var geoJsonData = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "fillColor": "#eeffee",
        "fillOpacity": 0.8
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [119.2895599, 21.718679],
            [119.2895599, 25.373809],
            [122.61840, 25.37380917],
            [122.61840, 21.71867980],
            [119.2895599, 21.718679]
          ]
        ]
      }
    }, {
      "type": "Feature",
      "properties": {
        "marker-color": "#00ff00"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [120.89355, 23.68477]
      }
    }]
};

var geoJson = L.geoJson(geoJsonData, {
    pointToLayer: L.mapbox.marker.style,
    style: function(feature) { return feature.properties; }
}).addTo(map);

NOTE: This is not part of the core LeafletJS library, it requires mapbox.js (and mapbox.css)

Angular Leaflet geojson custom marker

2 Answers