CODEWITHSUNDEEP
javascriptdictionaryleaflet
Kalmer Rautam
Kalmer Rautam

Reputation: 11

Adding Leaflet markers to geojson data in Leaflet

Is there any possibility to apply pre-defined marker styles to geojson data. I have property 'type' defined in my geojson file and I'm trying to set marker according to type.

I have following leaflet marker defined:

   var chargerBlue = L.icon({
      iconUrl: iconURL + 'marker_blue.png',
      iconRetinaUrl: iconURL + '[email protected]',
      iconSize: [39, 52],
      iconAnchor: [19, 50],
      popupAnchor: [-3, -76],
      shadowUrl: iconURL + 'marker_shadow.png',
      shadowRetinaUrl: iconURL + '[email protected]',
      shadowSize: [63, 69],
      shadowAnchor: [22, 69]
   });

I'm loading my geojson file:

   $.getJSON("elmo.geojson",function(data){
      L.geoJson(data).addTo(map);
   });

And my geojson's structure looks following:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          24.829726,
          59.505779,
          0
        ]
      },
      "properties": {
        "address": "Street",
        "type": "evCharger",
        "id": 37007,
        "status": "available",
        "name": "Charger name"
      }
    }
  ]
}

Upvotes: 1

Views: 2893

Answers (1)

snkashis
snkashis

Reputation: 2991

Yes, provide a pointToLayer function in the GeoJSON options object to create the predefined marker type you need.

const options = {
  pointToLayer: (feature, latLng) => L.marker(latLng, { icon: chargerBlue })
}
const layer = L.geoJSON(data, options)

There is a GeoJSON tutorial on the leaflet site may help you.

Upvotes: 1

Related Questions