Leaflet.Control.Minimap does not show toggle icon

Question

I am using the minimap control and everything works just fine, except that the toggle icon is not being displayed. Normally the toggle icon on the minimap should be similar to this example:

minimap

However in my case the toggle icon is not displayed.

Here is my code to display the minimap:

 baseLayer = L.tileLayer('tiles/custom/{z}/{x}/{y}.png').addTo(map);

 var minimapLayer = new L.TileLayer('tiles/custom/{z}/{x}/{y}.png');
 var miniMap = new L.Control.MiniMap(minimapLayer, { toggleDisplay: true }).addTo(map);

Note that I am using my own custom tiles but this should not be an issue...in the Google chrome developer tools view I can see that the icon is correctly returned to the browser, but it s just not displayed (also toggle.svg is requested instead of toggle.png. Don't know if that makes a difference).

Answer 1

According to https://github.com/Norkart/Leaflet-MiniMap and https://www.npmjs.com/package/leaflet-minimap

To use this plugin, you have to include in your index.html:

<script type="module" src="https://unpkg.com/[email protected]/dist/minimap.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/minimap.css">

And in your index.js:

var miniMap = new L.Control.MiniMap(L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'), {
    toggleDisplay: true
}).addTo(map);

You don't have to change the icon, the default images (.png and .svg) are in the same package, to be precise: https://unpkg.com/browse/[email protected]/dist/images/