Skip to content

Instantly share code, notes, and snippets.

@geog4046instructor
Last active June 13, 2024 03:22
Show Gist options
  • Save geog4046instructor/80ee78db60862ede74eacba220809b64 to your computer and use it in GitHub Desktop.
Save geog4046instructor/80ee78db60862ede74eacba220809b64 to your computer and use it in GitHub Desktop.
Leaflet - Create a custom icon to use with a GeoJSON layer instead of the default blue marker
/*
* 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)
@francobarrionuevoenv21
Copy link

Amazing!! Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment