The world’s leading publication for data science, AI, and ML professionals.

Leaflet Javascript Library Point Coordinate Styling and Design

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.

Image by Author | Leaflet's default map marker
Image by Author | Leaflet’s default map marker

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

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
Image by Author | A rendered map view of Singapore by leaflet.js
Image by Author | A rendered map view of Singapore by leaflet.js

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:

Image by Author | Note: The method pointToLayer is used and for simplicity, the marker is given a white fill with a black border.
Image by Author | Note: The method pointToLayer is used and for simplicity, the marker is given a white fill with a black border.

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:

Image by Author | (left) The image icon is rendered in the map above | (right) Preview of image file "ERP.png" stated in the code snippet
Image by Author | (left) The image icon is rendered in the map above | (right) Preview of image file "ERP.png" stated in the code snippet

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!

Image by Author | (left) The image icon is rendered in the map above as a base64 encoded string | (right) Preview of encoded image file stated in the code snippet
Image by Author | (left) The image icon is rendered in the map above as a base64 encoded string | (right) Preview of encoded image file stated in the code snippet

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:

Image by Author | Note that for the font icon above to render correctly, the class name "fa fa-star" in font-awesome.css has to be included
Image by Author | Note that for the font icon above to render correctly, the class name "fa fa-star" in font-awesome.css has to be included

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.


Related Articles