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?
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/
<total> markers, where <total> is a variable? Thus 5 markers
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
