Most of us who are involved in GeoSpatial technologies have come across the opensourced library known as “Leaflet” at some point in our software development journey.

This is just a simple article to explain the conversion of its default markers to your preferred images, icons etc. Hopefully by the end of this article, changing this:

Default leaflet marker

will be at the tip of your fingertips. No more googling of “how to customise leaflet markers” just to get a bunch of complicated yet non-usable replies.

For starters, you are required to include in the basic leaflet libraries which can be found here: http://leafletjs.com/download.html and initialise a basic map and marker. In this example, I am going to use the leaflet v1.2.0 available for download at http://cdn.leafletjs.com/leaflet/v1.2.0/leaflet.zip and include leaflet.css, leaflet.js, images folder on a simple html page:

In which case, the above code translates to the below map view of Singapore:

Image by Author | A rendered map view of Singapore by leaflet.js

Default Icon:

This line of code:

L.marker([1.2800945, 103.85094909999998]).addTo(map);

creates a default marker on the map as shown:

#geospatial #leaflet #web-design #map-visualization #ui-design