I want to display zoom in and out icons (controls) when on desktop and to display gps icon only when browsing on mobile. I'm using this css https://unpkg.com/leaflet@1.1.0/dist/leaflet.css when I disable controls in css all control icons disappear.
Asked
Active
Viewed 2,851 times
2 Answers
2
As pointed out here there is an option for this:
var map = new L.Map('map', { zoomControl:false });

Oriol Grau
- 609
- 6
- 8
1
Assuming the HTML class of the zoom thing is .leaflet-zoom-box
, and you don't have much knowledge of CSS and HTML,
a very basic fix is to add this into the .leaflet-zoom-box
part of the CSS:
.leaflet-zoom-box {
display: none;
}
That basically makes it not appear, but it can still be clicked on.
To truly remove it, go into the HTML file which holds the code, look for the div
or whatever container the .leaflet-zoom-box
is housed in, and remove all of that code.
Caution though, doing that may destroy the alignment of other items on the page, so always back it up first before attempting it.
Hope I helped!

Minal Chauhan
- 6,025
- 8
- 21
- 41

Mark
- 389
- 2
- 14
-
thanks for helping .leaflet-zoom-box doesn't work .leaflet-control {display:none;}works but even the GPS icon doesn't display – Kiwagi Aug 21 '17 at 13:54
-
Can you edit your question and post in all the HTML that you have? I'll take a look and see what I can do – Mark Aug 21 '17 at 13:57
-
it created with this javascript https://github.com/stefanocudini/leaflet-search/blob/master/dist/leaflet-search.src.js only on html – Kiwagi Aug 21 '17 at 14:30
-
I can't help you with this one, I'm very good at HTML and CSS, but I know practically nuts about JS. What I do know however, if you want to remove the zoom, it's going to be complicated. JavaScript code easily breaks when some things are not "found". If something is not declared (if you remove the zoom), and there are some actions regarding the zoom, it will not work, and may even break the whole code, or the rest of it after whatever is affected. – Mark Aug 21 '17 at 16:36