leaflet.layerscontrol-minimap

Leaflet layers control with minimaps

Usage no npm install needed!

<script type="module">
  import leafletLayerscontrolMinimap from 'https://cdn.skypack.dev/leaflet.layerscontrol-minimap';
</script>

README

Leaflet Layers control with minimaps

Displays minimaps in a layers control.

Only updates layers currently visible in the control.
Uses Leaflet.Sync and leaflet-clonelayer
Tested with Leaflet 1.7.1
Available on npm: npm install leaflet.layerscontrol-minimap

Usage

Exactly like Leaflets default layers control, with some extra options. Add the scripts + css to your html:

<link rel="stylesheet" href="control.layers.minimap.css" />
<script src="L.Control.Layers.Minimap.js"></script>

and add the control to your map:

L.control.layers.minimap(basemaps, overlays, options).addTo(map);

Extra options

In addition to the options available for L.Control.Layers:

topPadding: number of pixels padding to the top of the map. Defaults to 10.
bottomPadding: number of pixels padding at the bottom of the map. Defaults to 40.
overlayBackgroundLayer a (tile)layer which is added to the minimap of each overlay as a background. If set to false, no background layer wil be used for overlays. Defaults to Hydda Base

Extra methods

One extra method is added:

filter(string): if called with a non-empty string is passed, only layers with a name containing that substring are shown, while the others are set to display: none. The method will return a map with the layers currently visible.

Live example

http://jieter.github.io/Leaflet.layerscontrol-minimap/

Screenshot