Leaflet - Create a custom icon to use with a GeoJSON layer instead of the default blue marker

leaflet-geojson-custom-icon.js

/*
 * Create a custom icon to use with a GeoJSON layer instead of the default blue
 * marker. This snippet assumes the map object (map) and GeoJSON object
 * (myLayerData) have already been declared.
 */

// replace Leaflet's default blue marker with a custom icon
function createCustomIcon (feature, latlng) {
  let myIcon = L.icon({
    iconUrl: 'my-icon.png',
    shadowUrl: 'my-icon.png',
    iconSize:     [25, 25], // width and height of the image in pixels
    shadowSize:   [35, 20], // width, height of optional shadow image
    iconAnchor:   [12, 12], // point of the icon which will correspond to marker's location
    shadowAnchor: [12, 6],  // anchor point of the shadow. should be offset
    popupAnchor:  [0, 0] // point from which the popup should open relative to the iconAnchor
  })
  return L.marker(latlng, { icon: myIcon })
}

// create an options object that specifies which function will called on each feature
let myLayerOptions = {
  pointToLayer: createCustomIcon
}

// create the GeoJSON layer
L.geoJSON(myLayerData, myLayerOptions).addTo(map)

Thx for you example. It works fine!

thx!!! It works!!

Great example: one of my students found this and found it very useful! Thanks for posting.

Amazing!! Thank you