This plugin for Leaflet allows you to add a small world-map-image, in which the actual view of the Leaflet-map is shown.

Support

This plugin was developed and tested with Leaflet 2.0.0-alpha.1, Windows 11 Home 24H2 and Microsoft Edge 140.0.3537.57.

Demo:

• OSM-map with standard-options
• TopPlusOpen-map with user-options
• TopPlusOpen-map including burger-menu for testing

This description ist for plugin-version 2 in leaflet-V2. See description at the end for using the functional widely identic plugin-version 1 in leaflet-V1.

Usage

Download

In the zip-archive are folders 'src' and 'dist'. Each folder contains a js-file - in the 'dist'-folder is the minified version of the js-file from the 'src'-folder.

The control needs the actual js-script 'WorldMiniMap.js' and a world-image (by default the 'WorldMap.svg' in the master-base-folder of this github-repository).

Using downloaded version

It's not recommended to use a downloaded version of the plugin. It's just reasonable for development in the plugin.

Using hosted version

The control is also available on free CDN jsDelivr. To create the minimap from hosted version include following lines in your js close to the includes of leaflet as in many tutorials:

...
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@2.0.0-alpha.1/dist/leaflet.css" crossorigin="" />
		<script type="importmap">{
			"imports": {
				  "leaflet": "https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.js"
				, "WorldMiniMap": "https://cdn.jsdelivr.net/gh/maneoverland/leaflet.WorldMiniMap@2.0.0/dist/WorldMiniMap.js"
			}
		}</script>
...
				import {Map, TileLayer} from 'leaflet';
				import {WorldMiniMap} from 'WorldMiniMap';
...

Example of using the included js-script

When the js-script is included, then the minimap-control can either be created via option in map-creation

var map = new Map('map', {worldMiniMapControl: true});

or alternatively with extra create-command including additional options

var wMM = new WorldMiniMap({position: 'topright', circleColor: 'red', containerStyle: {opacity: 0.9, borderRadius: '0px', backgroundColor: 'lightblue'}}).addTo(map);

Changing options on-the-fly

In class-method "setOptions" create-options for the WorldMiniMap-control can be changed on-the-fly. A simple example can be seen in test.html.

Available options (merged in one option-Object)

Building minified version

The minified version of js-script in 'dist'-folder is created from js-script in 'src'-folder by Toptal JavaScript-Minifier.

Using plugin-version 1 in leaflet-v1

The following text describes plugin-version 1.

Download source

You can download the archive for plugin-version 1.0.0 via the link at the beginnin of this description.

Using hosted version

The control v1.0.0 (which is to be used with leaflet-v1) is available on free CDN jsDelivr. To create the minimap from hosted version include following line in your js

<script src="https://cdn.jsdelivr.net/gh/maneoverland/leaflet.WorldMiniMap@1.0.0/dist/Control.WorldMiniMap.js" integrity="sha512-PFw8St3qenU1/dmwCfiYYN/bRcqY1p3+sBATR+rZ6622eyXOk/8izVtlmm/k8qW7KbRIJsku838WCV5LMs6FCg==" crossorigin=""></script>

Example of using the included js-script

When the js-script is included, then the minimap-control can either be created via option in map-creation

var map = new L.Map('map', {worldMiniMapControl: true});

or alternatively with extra create-command including additional options

var worldMiniMap = L.control.worldMiniMap({position: 'topright', style: {opacity: 0.9, borderRadius: '0px', backgroundColor: 'lightblue'}}).addTo(map);

A simple example can be seen in indexV1.html.

Changing options on-the-fly

Not supported in V1.0.0 of this plugin.

Available options (merged in one option-Object)