norkart / leaflet-minimap

A minimap control plugin for Leaflet

Leaflet.MiniMap

Leaflet.MiniMap is a simple minimap control that you can drop into your leaflet map, and it will create a small map in the corner which shows the same as the main map with a set zoom offset. (By default it is -5.)

Using the MiniMap control

The control can be inserted in two lines: First you have to construct a layer for it to use, and then you create and attach the minimap control. Don't reuse the layer you added to the main map, strange behaviour will ensue! Alternatively, you can pass in a LayerGroup with multiple layers (for example with overlays or suitably themed markers). Marker layers can't be reused either. (See issue #52 for a discussion of synchronising marker layers.)

From the example:

var osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib});
var miniMap = new L.Control.MiniMap(osm2).addTo(map);

As the minimap control inherits from leaflet's control, positioning is handled automatically by leaflet. However, you can still style the minimap and set its size by modifying the css file.

Note: Leaflet version 0.7.7 or higher is required, but the plugin has been tested and verified to work fine with Leaflet 1.0.0-beta2.

Example usage in CommonJS compatible environments (Node/Browserify)

var MiniMap = require('leaflet-minimap');
new MiniMap(layer, options).addTo(map);

If you prefer ES6 style (for example with babel):

import MiniMap from 'leaflet-minimap';
new MiniMap(layer, options).addTo(map);

Example usage in AMD compatible environments (RequireJS)

require(['leaflet-minimap'], function(MiniMap) {
  new Minimap(layer, options).addTo(map);
});

Available Methods

changeLayer: Swaps out the minimap layer for the one provided. See the layerchange example for hints on good uses.

Available Options

The mini map uses options which can be set in the same way as other leaflet options, and these are the available options:

position: The standard Leaflet.Control position parameter, used like all the other controls. Defaults to 'bottomright'.

width: The width of the minimap in pixels. Defaults to 150.

height: The height of the minimap in pixels. Defaults to 150.

collapsedWidth: The width of the toggle marker and the minimap when collapsed, in pixels. Defaults to 19.

collapsedHeight: The height of the toggle marker and the minimap when collapsed, in pixels. Defaults to 19.

zoomLevelOffset: The offset applied to the zoom in the minimap compared to the zoom of the main map. Can be positive or negative, defaults to -5.

zoomLevelFixed: Overrides the offset to apply a fixed zoom level to the minimap regardless of the main map zoom. Set it to any valid zoom level, if unset zoomLevelOffset is used instead.

centerFixed: Applies a fixed position to the minimap regardless of the main map's view / position. Prevents panning the minimap, but does allow zooming (both in the minimap and the main map). If the minimap is zoomed, it will always zoom around the centerFixed point. You can pass in a LatLng-equivalent object. Defaults to false.

zoomAnimation: Sets whether the minimap should have an animated zoom. (Will cause it to lag a bit after the movement of the main map.) Defaults to false.

toggleDisplay: Sets whether the minimap should have a button to minimise it. Defaults to false.

autoToggleDisplay: Sets whether the minimap should hide automatically if the parent map bounds does not fit within the minimap bounds. Especially useful when 'zoomLevelFixed' is set.

minimized: Sets whether the minimap should start in a minimized position.

aimingRectOptions: Sets the style of the aiming rectangle by passing in a Path.Options object. (Clickable will always be overridden and set to false.)

shadowRectOptions: Sets the style of the aiming shadow rectangle by passing in a Path.Options object. (Clickable will always be overridden and set to false.)

strings: Overrides the default strings allowing for translation. See below for available strings and example/example_i18n.html for an example.

mapOptions: Sets Leaflet options for the MiniMap map. It does not override the MiniMap default map options but extends them.

Available Strings

hideText: The text to be displayed as Tooltip when hovering over the toggle button on the MiniMap and it is visible. Defaults to 'Hide MiniMap'

showText: The text to be displayed as Tooltip when hovering over the toggle button on the MiniMap and it is hidden. Defaults to 'Show MiniMap'

Available Events

The MiniMap fires minimize, restore events and toggle for both.

Building minified versions

First, install node.js on your system. Then run npm install to get the dependencies, and npm build to build the minified js and css. Use npm test to lint the code so you can check that it follows our coding standard. (Any pull requests will be checked this way by the build server.)

Loading minified version through node modules

Node modules does not link css to minified version directly. Addrequire('../../node_modules/leaflet-minimap/dist/Control.MiniMap.min.css'); to the code.

leaflet-minimap's Issues

Add a rectangle that denotes visible area

(Similar to https://maps.google.com/ etc.)
Moving a "ghost" rectangle on drag is also nice for usability.

Using with other basemaps

I use StamenTileLayer and to use this I init:

baseLayer = new L.StamenTileLayer("toner", {
    ...
});

Which uses the Stamen js, I don't have a normal tile URL. Is it still possible to use the minimap with this type of tile layer?

toggleDisplay not working leaflet 0.6.4

The toggleDisplay option never gets set on the MiniMap control when using the latest version of leaflet 0.6.4.

This line:
L.control.minimap(overview, { toggleDisplay: true }).addTo(map);
does not set the option in the control. Even with Firebug running and tracing the variable it never get set to true, stays at false and then does not display the min/max button.

In fact with more testing it appears none of the options when passed as above do anything. Have tried width and height L.control.minimap(OverView, { height:250, true, width:250 }).addTo(map); and nothing changes on the map display - the control appears with default options. Suspect it is version of leaflet thing but I am new to leaflet still so do not understand the calling methods as yet.

** UPDATE **
A little more work has shown me that calling the code using addControl seems to work:
map.addControl(new L.Control.MiniMap(OverView, { toggleDisplay: true }));

However this seems different than the current .addTo functionality but it works.

The toggle icon does not show in the correct place

The toggle icon does not show in the correct place, or with the correct orientation for all but the lower left corner of the map. Example

Functional Tiles?

I am not quite sure what the issue is. I see the mini-map control in the lower right. I have the toggle working. But the MiniMap content is not showing (only the outline).

I suspect it has to do with the fact that my tiles are coming from an PouchDB IDB DB (Chrome 26) and not a url.

I have a list of base layers kept in MAP.baseLayers (they are tile layers):
I add the control as follows

var globe = MAP.baseLayers["BigBlueMarble"];

MAP.map.addControl(new L.Control.MiniMap(globe, { toggleDisplay: true }));

The Functional Tile Layer is a leaflet plugin

I am not seeing warnings about tiles not found (at least not at the zoom of the minimap).

Or, maybe the error is that I am also have a layer control where I can switch Map.baseLayers?

My variant adds this:

function makeLayer(Class, Type, settings) {
var label = {};
DB[Type] = Pouch(Type);
var layer = new L.TileLayer.Functional(function (view) {
var deferred = $.Deferred();
var id = view.zoom + "-" + view.tile.column + "-" + view.tile.row;
DB[Type].getAttachment(id + "/pic", function (err, response) {
if (err) {
console.warn("Could find blob id: ", Type + "." + id, " error: ", err.error, " reason: ", err.reason, " status: ", err.status);
} else {
var blob = response;
var imgURL = URL.createObjectURL(blob);
deferred.resolve(imgURL); // let leaflet know we're done, and give it the URL
URL.revokeObjectURL(imgURL); // not sure if we're revoking it too soon here
}
});
return deferred;
}, settings);
MAP.map.addLayer(layer);
label[Type] = layer;
if (Class == "BASE") {
$.extend(MAP.baseLayers, label);
} else {
$.extend(MAP.overlays, label);
}
}

Start versioning

Mapbox would love to host the plugin on its CDN (prominent plugins are already there), but for that Leaflet-MiniMap needs to be versioned. Ref mapbox/mapbox.js#687

• add a package.json file
• tag a release with git

Thanks :)

Add option to keep minimap at a fixed zoom level

Right now the minimap operates at a fixed offset from the main map. It should be possible to instead set it to always operate at a fixed zoom level if desireable.

styling issues with leaflet.js v0.7

I upgraded my pro dev version to leaflet v0.7 and found a small issue with the styling of the minimap toggle control:

I changed width+height in the following definition to 19px and it worked again:

.leaflet-control-minimap-toggle-display {
background-image: url("images/toggle.png");
border-radius: 2px 0px 2px 0px;
height: 19px;
width: 19px;
position: absolute;
bottom: 0;
right: 0;
}

vendor prefix for border-radius

Hi @Norkart not really an issue but i think we can delete vendor prefix for border-raduis in plugin's css since http://caniuse.com/#search=border-radius :

https://github.com/Norkart/Leaflet-MiniMap/blob/master/src/Control.MiniMap.css#L5

++

Customizable aimingrect, minimum dimensions.

It would be nice to be able to have more control over the aiming rectangle in the minimap (such as color).

Also, at low minimap zoom levels, the aiming rectangle can become almost invisible. It might be nice to be able to specify a minimum diagonal pixel size (even if it did not strictly match the parent map boundaries)

Improve "build" & release pipeline

Right now nothing is actually built, so there's not much to improve there, but since we've started tagging releases like real professionals there is kind of a pipeline:

• Change version number in package.json.
• Tag the release in git.

As we all know, having more than one manual step in a releasing process is utter evil and must be destroyed, so we should look at ways of automating it. We could possibly set up an actual build system while we're at it, to manage complexity and create minified versions.

IE8 fallback PNG support

Hi Robert,

first thanks a lot for the new release - will update my plugin with the next release. As backward compatibility for IE8 is an issue for me, I have searched and found a workaround, so that when the minimap is viewed with IE8, at least the PNG icon and not an empty control is displayed.

old
´´´.leaflet-control-minimap-toggle-display{
background-image: url("images/toggle.svg");
background-size: cover;
position: absolute;
border-radius: 3px 0px 0px 0px;
}´´´

new
´´´.leaflet-control-minimap-toggle-display{
background-image: url("images/toggle.svg");
background-image:url(images/toggle.png)\0; /workaround for IE8/
background-size: cover;
position: absolute;
border-radius: 3px 0px 0px 0px;
}´´´

background infos:
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
https://stackoverflow.com/questions/5852681/target-ie9-or-ie8-but-not-both-using-css
https://stackoverflow.com/questions/660652/ie8-css-selector

let me know if that would work for you too!
best,

Robert

L_PREFER_CANVAS = true breaks the map

Rob,

Thank you for being patient. I have continued to work on my CodePen demo to get the the heart of the problem. Why? Certainly not to bother you, since I think you have done a great service creating this plug-in.

But something did not ring true, when about the suggesting that issue #33 was due to delayed tile response (jquery promise) from the IndexedDB. Why? well Leaflet is designed for all tiles to be returned async from web services. So the mere fact that tiles are coming back async should not effect things such as bounding boxes, zoom, etc. (this is just about splatting bits on the screen, a purely visual effect).

So I created a more minimal demo, CRS3857, with TileLayers from CloudMade, and I am seeing the same errors:

http://codepen.io/DrYSG/pen/ICzro

I am really shooting in the dark now as to what the problem is:

1. something in leaflet 0.7?
2. something else?

There are no other controls, that I can see (other than the zoom), so what do you think is causing this. Given that the symptom is the same as with Functional and IDB, I am thinking there is something more basic at fault (and I don't rule out how I am setting up the MiniMap).

Minimap skips first zooming on first main map zoom if no map movement has been done

If the first thing you do in the main map is zoom in or out without doing any panning first, the minimap will update the bounding box of the main map, but not zoom in/out. On the next movement or zoom in the main map it will correct the zoom and thereafter work as intended, so this is a pretty minor inconvenience.

Set different zoom levels for mini map

Is it possible to tell the mini map to use a different set of resolutions to that of the main map? I’d like to be able to get the mini map to zoom out further than the main map even when you’re zoomed out at the minimum level. That way I could still show a rectangle on the mini map.

Can that be done already, or is it something that isn’t really possible?

Add missing bower.json.

Hey, maintainer(s) of Norkart/Leaflet-MiniMap!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library Norkart/Leaflet-MiniMap is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "Norkart/Leaflet-MiniMap",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Incompatibility with bing maps plugin ?

I started playing around integrating your plugin. Have you tested if your plugin is compatible with bing basemaps (when using https://github.com/shramov/leaflet-plugins plugin).
Bing maps normally display well in my plugin, although if I add a bing minimap, the map doesnt show up and instead I get the error "Got metadataAccess was denied. You may have entered your credentials incorrectly, or you might not have access to the requested resource or operation."

Do you have any ideas why this is happening?

minimap not updated on mainmap zoom out below main map zoom

maybe the zoomlevel of minimap should change, too, on mainmap change...

does not work with different projections

at least not with:
crs: L.CRS.Simple

or how do I set that?

Fix inconsistent whitespace (mixed tabs and spaces) in the source

Feature suggestion: add markers as dots to minimaps

A user of my plugin suggested that it would be great if on the minimap small dots instead of the markers on the main map could be displayed. Adding them might be easy, keeping them in synch when zooming might be a challenge.

Add a shadow rectangle to the minimap centre when panning it

It would be nice if there appeared a shadow rectangle over the centre of the minimap when you pan it, showing the area that will become visible on the main map once you finish panning the minimap.

Event listener added twice

The same event listener is added twice:
https://github.com/Norkart/Leaflet-MiniMap/blob/master/src/Control.MiniMap.js#L61

Nice plugin!

Bjørn

Layer cloning does not work well with layerprovider plugin

See the comment on issue #7 (comment) . Probably need to work initialisation in there somewhere.

Safari issue clipping tile pane

I'm having issues in Safari (OK in other browsers..see below) clipping the tile-pane div via css border-radius:50% in parent div. The effect being a circular minimap. Any suggestions? I'm assuming it's a webkit issue...

Retina icon

Is there an SVG source from which the toggle icon can be re-rendered at @2x for retina displays?

feature suggestion: change minimap on basemap change

It would be great if minimap would also change if the basemap in a controlbox is changed.
I thought about defining additional basemaps with postfix _minimap
(osm_mapnik -> osm_mapnik_minimap) so the switch could be done just on this postfix...

Minimap causing main map zoom change on move with low zoom

Reproduction:

Mainmap zoom = X_0
Minimap zoom = Y_0

Mainmap minimum zoom = X_0
Minimap minimum zoom = Y_0
Zoom offset from mini to main = K

If the map is set up with X_0 < K + Y_0, and X_0 <= X <= K + Y_0, then moving the reticule in the minimap to move the map centre will cause the main map zoom to be reset to K + Y_0.

(Substitute the numbers in the original bug comment for a real-world example.)

Original comment

I believe I'm seeing a similar problem.

My theory on what's going on...

Initially you set the zoom to 2. MiniMap attempts to offset by -5, which is -3. As 0 is the minimum it uses that instead.

Now when you call addTo that calls setView on the _miniMap. This will fire a moveend event, which calls _onMiniMapMoved. In there is this line:

this._mainMap.setView(this._miniMap.getCenter(), this._decideZoom(false));

In _decideZoom things go horribly wrong because it uses the current _miniMap zoom of 0 to calculate the new zoom of the _mainMap, offset by +5. Hence it jumps to 5.

The problem isn't limited to initialization. In general I find moving around the MiniMap quite treacherous for zoom levels less than 5. The official example dodges this problem by having a minimum of 5.

Needs logic to deal with max and min zoom levels more properly

Right now if you scroll the main map as far out as you can get, the minimap will behave in a funny way if the layer inside it has the same min zoom level as the one in the main map. The reverse happens if you use the minimap to zoom as far in as possible.

MiniMap changes main map zoom level on init.

I was trying to fire my own funtion after the map get initialized with a spacific zoom level (2) but after adding the MiniMap it goes down to zoom 5.

My code was:

var mapOptions = {
    center: [ 0.0, 0.0],
    zoom: 2,
    layers: [mainLayer],
    zoomControl: false,
    zoomsliderControl: true,
    panControl: true
};

MapUtils._map = L.map('map', mapOptions);
miniMapLayer.addTo(MapUtils._map);

MapUtils._map.whenReady(function() {
    MapUtils._options.onLoad();
});

My MapUtils._options.onLoad() onload funtion was getting the main map zoom and bounds values to request some data to the server but the map had the wrong zoom level so the sata shown was not valid.

After moving the event listeners inside the timeout on the MiniMap.onAdd() function everyting went ok:

    /*Curious workaround: For some reason (possibly the DOM not being completely set up so that the map window
    * is not actually drawn yet?) if you set the view here the minimap window will not manage
    * to calculate tile positions properly and you get a corrupted map. Defer this one millisecond so that this
    * method finishes and the DOM catches up, and it works fine. */
    setTimeout(L.Util.bind(function () 
        {
            this._miniMap.setView(this._mainMap.getCenter(), this._decideZoom(true));
            this._aimingRect = L.rectangle(this._mainMap.getBounds(), {color: "#ff7800", weight: 1, clickable: false}).addTo(this._miniMap);
            if (this.options.toggleDisplay) {
                this._addToggleButton();
            }

            //These bools are used to prevent infinite loops of the two maps notifying each other that they've moved.
            this._mainMapMoving = false;
            this._miniMapMoving = false;

            this._mainMap.on('moveend', this._onMainMapMoved, this);
            this._mainMap.on('move', this._onMainMapMoving, this);
            this._miniMap.on('moveend', this._onMiniMapMoved, this);

        }, this), 1);
    return this._container;

feature suggestion: different hover texts for toggle button

currently only "hide" is displayed as hover text for the toogle button regardless of its state. It would be great if "hide minimap" and "show minimap" could be used instead.

package.json: Unexpected token  while parsing json file

I am getting an error while using Leaflet-MiniMap component with browserify and browserify-shim build-tools:

Error: SyntaxError: Unexpected token  while parsing json file app/bower_components/leaflet-minimap/package.json

it seems that something is wrong whith package.json. It helps to re-save this file with utf-8 encoding.

MiniMap in EPSG4326 at zoom level #1

If you look at this CodePen I created: http://codepen.io/DrYSG/pen/ICzro , you will notice that the base map (at zoom level 5) and the miniMap (zoom level 0) work fine.

But it if you zoom in a level, so that the mini-map goes to zoom level 1, then the mini-map gets confused. Zooming in further will make it get back to the correct location.

The big map does not lose its place.

This is only with LL84 (EPSG4326) mapping, which I know is a bit of a confusion in Leaflet, but they do claim support for that CRS: http://leafletjs.com/reference.html#icrs

@DrYSG

Fixed zoom level not working as expected

Perhaps I'm miss understanding the README, but I thought setting zoomLevelFixed would prevent the mini map from zooming with the main map, and just pan with it, at the fixed zoom level.

The plugin seems to ignore the value, I have created an example here. Look for the value being set at the bottom of the JS. I had to paste the source of the plugin as jsfiddle doesn't like camelCase filenames in the external resources section.

NPM registry

How about adding this package to the NPM registry? You already have a package.json, so it should be simple.

probably just "npm publish"

here is all the steps from scratch:

http://decodize.com/javascript/build-nodejs-npm-installation-package-scratch/

Revamp the minimising icon

We want to solve issues #56 and #73, and we'll do it like this:

• Create a new SVG icon
• Let the build system generate CSS/PNGs for the icon
• Make the size of the icon scalable in code so that you can set the collapsed size properly.

A rendering problem in minimap: solved

Hi all,
I have had in minimap control the same problem I have had in my regualr map: Leaflet/Leaflet#2157

I have applied the same kind of CSS modification you read here Leaflet/Leaflet#2078 and I have added this code to Control.MiniMap.css:
.leaflet-control-minimap img {
-webkit-backface-visibility: hidden;
}

Best regards,

Andrea

Change of minimap layer

as new feature, I added a changeLayer method to manage the change of the minimap layer when the main map layer change:

changeLayer: function (layer) {
    this._miniMap.removeLayer(this._layer);
    this._layer = layer;
    this._miniMap.addLayer(this._layer);
},

miniMap.removeFrom(map) && miniMap.addTo(map)

Hi there!
Is there a way to re-initialize minimap after first time loading?
I have a simple toggle, that shows and hide miniMap. I tried to do so by adding and removing miniMap to and from the main map. It seems it's not working however after the first hide/show cycle!
I may be missing something, could you help me out?

Thanks for the great work!
Andrea

Change baselayers on Leaflet MiniMap

I'm using this plugin on a map that also uses a layers control to switch between basemaps. Is there a way to change the basemap on the miniMap when the main map basemap changes? The two maps communicate just fine, I just want them to look the same. All of the examples I have seen so far do not have this feature, but is it possible? Has anyone else tried?

Toggle icon not completely centered

From Robert Harm:

I just updated my minimap implementation for the next pro release and found a small issue: the new icon is not really centered within the toggle box.
I removed the following code from your .css-file / .leaflet-control-minimap a { and everything was fine again:
background-position: 1px 2px;

background shining through in firefox

I just installed leaflet.js 0.7.1 and on firefox, the background is shining through:

with chrome in contrast, minimap control is fine.

live demo at http://pro.mapsmarker.com/?p=40

onMainMapMoved not fired with fixed map height

It appears that the onMainMapMoved is not fired when a a map has a fixed height (all of the examples use the fullscreen.css 100% height value). This prevents the miniMapMoving boolean from getting reset to false. The next subsequent call to map.setView will then miss miniMap.setView in the if block. You can view the normal example.html with 100% height working normally here. An example of the issue when the map has a fixed height can be seen here. I'll try to submit a pull request changing the initial value of mainMapMoving to true which should alleviate the problem. I tested this with examples and saw no regression but someone with a better handle on the code might have a better fix for this.

Enhancement: Option to disable zoom/pan

Hi there,
it would be nice to have the option to disable zoomon the minimap. Everytime I scroll over the map with my mouse (i.e I scroll down the page and my pointer happens to come over the minimap), the minimap changes zoom and the big map obviously too.

I also would like to be able to disable "dragging" the map.

Thanks,
Sascha

Collapsed minimap by default?

Hi,

thanks for your great plugin - I plan to add this to one of the next releases of my plugin mapsmarker.com (plus an integrated settings panel to set the available options).
Just one question which I couldnt figure out quickly: is it possible to launch the minimap minimized? (as google does it?)

I tried changing the following function to true, but with no success:
_addToggleButton: function () {
this._toggleDisplayButton = this.options.toggleDisplay ? this._createButton(
'', 'Hide', 'leaflet-control-minimap-toggle-display', this._container, this._toggleDisplay, this) : undefined;
this._minimized = true;
},

can you please help here?
Thx,

Robert

noWrap

We have noWrap set to true for our map, so I had to do the same for the minimap. The minimap box will still let me scroll past the end of the map though. Needs something that stops that from happening.

Allow showing the entire map/image without centering

A use case we have not considered before is when someone uses Leaflet to display large high-resolution images, they might like to use the minimap for a navigational window. Then the current behaviour of having a fixed size map window and centering the map is less ideal. Rather, we should do this:

• Scale the minimap window to show the entire image at once
• Allow the reticule to move about in the window rather than recentering the image.

There may of course also be use cases with geographical information where someone might like this behaviour. There will probably be some challenges in adapting the current architecture in order to allow these two rather different modes of operation.

how to call invalidateSize() on minimap?

A user of my plugin www.mapsmarker.com uses leaflet maps in woocommerce tabs, which forced me to add a workaround to invalidateSize() of the map on tab change and initial load.

See http://www.nebbiolowijn.nl/winkel/product/salice-salentino-albarossa/ for an example: the map shows correclty, but the minimap would also
neet to get to be reloaded by invalidateSize().

Unfortunately I didnt find out how to do so with the minimap plugin - I tried adding the following private method, but that didnt work:

_invalidateSizeMinimap: function (map) {
this._miniMap.invalidateSize();
return this;
},

Can anyone please help here and tell me how this can be achieved?

Into another div

First of all congratulations,
Would it be posible to put into another div the minimap?
I say: one div for the main map and into another div the minimap
Thank you

Ability to specify map options for the minimap

An internal instance of L.Map is used for the minimap, which is fine if you're going with default options.

However, it does mean that the minimap does not play well with some plugins, nor if you're using nonstandard map options for the main map (e.g., using a custom CRS).

My suggestion would be to add a mapOptions option to the minimap option list, like so:

 new L.Control.MiniMap(minimap, {
    toggleDisplay: true,
    width: 210,
    height: 210,
    mapOptions: {
        panControl: false,
        zoomsliderControl: false,
        crs: L.CRS.Simple,
    }
}).addTo(map);

Anyways, keep up the good work on this lovely Leaflet plugin :-)