Changing the default Marker Style in LeafletJS

Are you bored with the default leaflet markers? Well here is a very short article on what you need to do to change it up.

Default leaflet markers look something like:

Default marker

Now, what we want to see is something like:

This is much easier to achieve than you may think.

Step 1; Create an icon class

Step 2; Create an icon object

Different icons can be selected by setting a different URL to iconUrl.

Step 3; Set this object as your marker

And that’s pretty much all there is to it.

Full Code;



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bojitha Piyathilake

I am an undergraduate at the University of Moratuwa following a degree in Information Technology and Management.