CODEWITHSUNDEEP
leaflet
arman
arman

Reputation: 125

How can i add css class to zoomIn and zoomOut buttons? Leaflet map

I have two css class "mapzoom-in" and "mapzoom-out" for zoom in and zoom out controls But I do not know how to add classes to the buttons Does anyone have an idea?

I want get element by this code: https://leafletjs.com/reference-1.3.4.html#domutil

get(<String|HTMLElement> id)

But for example this is zoomIn button html content.But the button does not have a specific id

<a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+<div></div></a>

and then use addClass and add my class to zoom in control

I try 

var zoomInBtn = document.getElementsByClassName("leaflet-control-zoom-in")[0].className="mapzoom-in";
var zoomOutBtn =document.getElementsByClassName("leaflet-control-zoom-out")[0].className="mapzoom-out";

work but they hide

Upvotes: 1

Views: 1126

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

This is a XY problem. You just want to get a reference to the HTMLElements for each button, and you thought about adding a CSS class to each as a solution; then you're asking about problems implementing your attempted solution, rather than asking about what you want to achieve.

You can get a reference to each of the HTMLElements for the zoom buttons by pairing Leaflet's getContainer() method for L.Control.Zoom together with the querySelector() method of any HTMLElement, e.g.:

var leafletMap = L.map('map-container');
var control = leafletMap.zoomControl;
var controlElement = control.getContainer();
var zoomInElement = controlElement.querySelector('.leaflet-control-zoom-in');
var zoomOutElement = controlElement.querySelector('.leaflet-control-zoom-out');

Also, if you only have one zoom control per map, you can use CSS selectors to get the appropriate HTMLElements via querySelector, e.g.:

var zoomInElement = document.querySelector('#map-container .leaflet-control-zoom-in');

There is no need for IDs or CSS classes for individual buttons.

Upvotes: 2

Related Questions