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?


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/

| improve this answer | |

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

| improve this answer | |

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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