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

var LeafIcon = L.Icon.extend({
    options: {
       iconSize:     [38, 95],
       shadowSize:   [50, 64],
       iconAnchor:   [22, 94],
       shadowAnchor: [4, 62],
       popupAnchor:  [-3, -76]
    }
});

Step 2; Create an icon object

var customIcon = new LeafIcon({
    iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png'
})

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

Step 3; Set this object as your marker

var drawControl = new L.Control.Draw({
position: 'bottomleft',
draw: {
marker: {
icon: customIcon
},
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);

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

Full Code;