[GIS] Is it possible to have a Leaflet control with large images / icons

leaflet

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.

https://leaflet-extras.github.io/leaflet-providers/preview/

Does anyone have a good example?

Best Answer

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/

Related Question