How to add a custom attribute to an html element on a map

[LLStudent83]

Good afternoon. I would appreciate your help. I need to add a custom attribute "data-test id" to the icons of the beginning and end of the route and to the route itself, for further testing in jest. Please tell me how to do it? I mean to the html element with the "leaflet-marker-icon" class and the html element of the route. Thank you in advance.

[curtisy1]

Does it have to be an attribute? Adding a class is probably the more easy and straightforward way since Leaflet icons have a className option that you should be able to use. Taking the code from the previous sample, something like this would hopefully work

createMarker: (i, start, n) => {
   const marker = L.marker(start.latLng, {
        icon: new Icon({
             iconUrl: home,
             iconSize: [45, 45],
            className: "test-class"
        });
return marker;
}

If you really need an attribute, the easy way would be a DivIcon again (although that seems to not be possible for your use-case) Another option, although quite computation heavy, would be adding a MutationObserver to the map and listening for new childNodes with the given class

[LLStudent83]

Thank you Alex for your answer. We will try different solutions to our problem.