Im trying to create a map where the layer control have large icons or images, and the "buttons" are located in the bottom of the map and not on the sides. I have used the simple controls until now.

I want something similar to this, where the control is located in along the bottom and not in the side.


Does anyone have a good example?

3 Answers 3


This should get you started. Basically you can add any HTML inside the layer control layer names.

var basemaps = { "<div class='layers-control-img'><img src='assets/images/layer-control-images/osm-streets.png'></div> Streets": osm };

Then part of the CSS:

.layers-control-img { max-width: 40px; overflow: hidden; max-height: 40px; cursor: pointer; display: inline-block; vertical-align: middle; }

You can see it in action at http://ovrdc.github.io/parcel-viewer/

  • is there any way to make that variable. E.g make the text <total> markers, where <total> is a variable? Thus 5 markers
    – Mawg
    Commented Feb 8, 2021 at 13:04

If you look at the source code for the leaflet-providers preview, you'll see that it uses Leaflet.Control.Minimap.


https://github.com/Leaflet/Leaflet/issues/5826 download images from the link and keep in the folder structure


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.