I'm currently working on customizing the leaflet marker using a divIcon and custom HTML. My aim is to have my marker displayed similarly to this example: https://i.sstatic.net/a5RnY.png
So far, I've managed to create a marker and a divIcon with the following code:
leaflet.marker(NETHERLANDS_CENTER, {
icon: leaflet.divIcon({
html: '<div class="vehicle-container"><div><img src="../../assets/images/bus-solid.svg" width="16" height="16"/></div><div><p>HTM</p></div></div>',
})
}).addTo(this.map);
The map displays the marker as follows:
This piece of code is in my Angular map component that comes with its own CSS file. However, no matter what I try to do in the CSS file, it seems to have no effect on the styling of the marker displayed on the map.
I've experimented with customizing the vehicle-container class in various ways, but none seem to take effect. I even tried using the className property of the divIconOptions, which removed the white square, yet did not change anything when attempting to customize the CSS for that class name.
I also inspected the marker and noticed it was wrapped in an element with the class .leaflet-div-icon. Despite trying to modify the styling of this class, I was not successful.
Is there a special trick to styling leaflet markers, or am I missing something?