Super Simple Way to Change Leaflet Marker Color

Photo by henry perks on Unsplash

Is there a way to randomly change marker-colors in native Leaflet? Many ways demonstrated in Leaflet changing Marker color.

Here is a super simple way without swallowing up the documentation to achieve your goal presented by sil.

A cheap way to change the Leaflet marker colour is to use the CSS filter property. Give the icon an extra class and then change its colour in the stylesheet

1
2
3
4
5
6
7

<style>  
img.huechange { filter: hue-rotate(120deg); }  
</style>  
<script>  
var marker = L.marker([y, x]).addTo(map);  
marker._icon.classList.add("huechange");  
</script>

And this will produce a red marker: alter the value given to hue-rotate to alter the colour. Like my example — 臺灣清冠一號地圖 Taiwan NRICM101 Map (chienhsiang-hung.github.io).

Contact me: Hung, Chien-Hsiang (chienhsiang-hung.github.io)