I'm using custom divIcons for my Leaflet markers. I want to add a border to whatever marker I click on, with some simple CSS:
.selectedMarker {
border: 10px solid gold;
}
However, the following with jQuery doesn't work:
$(marker).addClass('selectedMarker');
Then I tried to use Leaflet's own addClass() method. I tried to call use it in the following ways:
marker.addClass('selectedMarker');
L.addClass(marker, 'selectedMarker');
addClass(marker, 'selectedMarker');
DomUtil.addClass(marker, 'selectedMarker');
None of these work. How do I add the selectedMarker class to my marker?
Adding a Simple MarkerStep 1 − Create a Map object by passing a <div> element (String or object) and map options (optional). Step 2 − Create a Layer object by passing the URL of the desired tile. Step 3 − Add the layer object to the map using the addLayer() method of the Map class.
The Clusterer can handle 10,000 or even 50,000 markers (in chrome).
In 1.0 and 0.7 you can use L.DomUtil to add remove classes from a DOM element:
L.DomUtil.addClass(marker._icon, 'className');
L.DomUtil.removeClass(marker._icon, 'className');
I have done it by adding a class to the marker with
var marker = L.marker(loc);
marker.on('click', function() {
$(marker._icon).addClass('selectedMarker');
}
and then use the css
.leaflet-marker-icon.selectedMarker{
//your css
}
without using jQuery,
marker._icon.classList.add("className");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With