How do you add a class to a Leaflet marker?

leaflet extra markers
leaflet marker color
leaflet add marker to layer
leaflet examples
leaflet marker offset
leaflet use icon as marker
leaflet marker icon size
leaflet popup on click

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?

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
}

Markers With Custom Icons - Leaflet, You can do the same with your classes too. OK, let's finally put some markers with these icons on the map: L.marker([51.5, -0.09]  This is the best method to do it I think. Unfortunately classList remains undefined until the user clicks it, so can't add a class right after creating it with this method. Also, tip for those using leaflet markercluster, it's in event.layer._icon. – dvtan Mar 4 '17 at 3:44. I had to do this with polygons.

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');

Documentation - Leaflet, The Leaflet library has a possibility to set up a map marker icon, its size, a position as well as marker shadow icon. Moreover, the extended class  Use this option if you want to put the marker on top of all others (or below), specifying a high value like 1000 (or high negative value, respectively). opacity: Number: 1.0: The opacity of the marker. riseOnHover: Boolean: false: If true, the marker will get on top of others when you hover the mouse over it. riseOffset: Number: 250

without using jQuery,

marker._icon.classList.add("className");

Map marker icon with HTML and CSS only. Contains Leaflet example, and read it, then drop it. Go north twice to a Forest Path location and climb the tree. Get the egg from the nest and go back down. Custom Markers for Leaflet JS based on Awesome Markers - coryasilva/Leaflet.ExtraMarkers Join GitHub today. space delimited classes to add: icon: Name of the

Zork I walkthrough, and a simple, readable source code that is a joy to contribute to. Thanks. FYI, I'm finding the .number div element for the number text introduces an issue meeting WCAG 2.0 success criteria: Ensure that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.

Leaflet, add('leaflet-marker-active');. Since we are showing more than 500 points, I use the map.flyTo function to flyTo the selected marker's position and  Contribute to Asymmetrik/ngx-leaflet development by creating an account on GitHub. You can add layers (baselayers, markers, export class MyCustomDirective

dynamically added class not retained on leaflet marker, Marker([17.385044, 78.486671]);. Step 5 − Add the marker object created in the previous steps to the map using the addTo() method of the Marker class. // Adding  Canva’s brochure maker takes the hassle out of creating beautiful brochures. From travel brochures to real estate brochures, Canva’s extensive template library has you covered. Simply add your details, customize according to your needs and there you have it: A custom brochure, made by you.

Comments
  • what is the $(marker)?
  • jQuery. Which doesn't work, as jQuery targets DOM elements, not JavaScript objects.
  • Confirmed this works, thanks. This is the best method to do it I think. Unfortunately classList remains undefined until the user clicks it, so can't add a class right after creating it with this method. Also, tip for those using leaflet markercluster, it's in event.layer._icon.
  • I had to do this with polygons. layer._path.classList.add("className") worked for me in that case.