Highly customisable map markers on Leaflet JS.
Most of us in the field of Geographic Information Systems (GIS) who have handled GeoSpatial technologies would have encountered the opensourced JavaScript plugin Leaflet JS for rendering interactive web maps.

Since a map marker’s symbology can convey useful information, it is more appropriate to display a custom map marker instead. To do, the rest of this article shall demonstrate the various approaches for styling a map marker in Leaflet.
Prequisite Steps To Setup Leaflet
- Basic leaflet libraries http://leafletjs.com/download.html and initialise a basic map and marker. Note that in the below examples, Leaflet v1.2.0 is used.
Then, proceed to include both leaflet.js and leaflet.css into a HTML page as shown –
- The above code translates to the below map view of Singapore

Types Of Map Markers
Default Icon:
This line of code:
L.marker([1.2800945, 103.85094909999998]).addTo(map);
creates a default marker on the map as shown:
Marker Type I. Circular Marker
To convert it to a simple circle in leaflet, the change in code is as follows:

Additionally, you can vary the radius, colour or opacity of the above marker but this is not the point (no pun intended) of this demo.
Marker Type II. Image Icon
While a circular point as a marker can be ideal in certain map visualisations, at times more specific icons/images can be more appropriate instead. In which case, the following approach should be used rather than the ones stated above:

Marker Type III. Encoded Image (base64) Icon
Going a step further, I have experimented with using base64 as a substitute for the parameter for iconUrl and guess what? It works perfectly fine too!

Personally I would recommend using a base64 string to substitute the image path when the marker used is a one-off thing and the developer finds it not necessary to include the actual image file inside the project. One of the base64 image encoder tools online I will recommend will be this: https://www.base64-image.de/
Marker Type IV. Class Name and Font Icons
Finally, if you are one of the majority of developers who make use of font icons (e.g. font-awesome), then using L.divIcon will be most appropriate in this case:

These are some of the the icon customisation styles that you can use when you find the default leaflet icon not suited to your visualisations. Hope this article helps you in your ongoing journey for web geospatial visualisations!
Thanks for reading.