Question

100

How do you add a class to a Leaflet marker?

rated 0 times [ 102] [ 2] / answers: 1 / hits: 30275 / 10 Years ago, wed, december 3, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

byrondonavanc

Add To Favorites

Follow

Total Points: 675

Total Questions: 107

Total Answers: 105

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

byrondonavanc questions

1 Mongoose, getting TypeError: Cannot read properties of undefined (reading 'find')

Tue, Dec 28, 21, 00:00, 2 Years ago

1 Properly handle multiple files input with Formik and React

Tue, Apr 6, 21, 00:00, 3 Years ago

1 Puppeteer pdf page break bug

Thu, Mar 25, 21, 00:00, 3 Years ago

1 React useEffect() : Most efficient way to compare if two arrays of objects are equal

Fri, Dec 4, 20, 00:00, 4 Years ago

1 How to close dropdown on outside click NEXT.JS

Sat, Jul 25, 20, 00:00, 4 Years ago

View All

answered 10 Years ago jacklynr · Accepted Answer

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

}