1

I am trying to add a mini map to my Leaflet map that uses Esri basemaps. However, the mini map is not displaying correctly. I have included the necessary libraries and followed the setup instructions, but I can't seem to get it to work. Below are the details of my implementation.

My HTML

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/esri-leaflet/dist/esri-leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-minimap/dist/Control.MiniMap.min.css" />
    <style>
        #map {
            height: 600px;
        }
    </style>
</head>
<body>
    <h1>Interactive Leaflet Map</h1>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-minimap/dist/Control.MiniMap.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

function initDemoMap() {
    // Base tile layers using Esri basemaps
    var Esri_DarkGreyCanvas = L.esri.basemapLayer('Gray');
    var Esri_WorldImagery = L.esri.basemapLayer('Imagery');

    // Group base layers
    var baseLayers = {
        "Grey Canvas": Esri_DarkGreyCanvas,
        "Satellite": Esri_WorldImagery
    };

    // Define bounds
    var corner1 = L.latLng(-30, 110),
        corner2 = L.latLng(-35, 120),
        bounds = L.latLngBounds(corner1, corner2);

    // Initialize the map
    var map = L.map('map', {
        layers: [Esri_DarkGreyCanvas], // Set the default layer
        center: bounds.getCenter(), // Center the map on the defined bounds
        zoom: 9, // Initial zoom level
        minZoom: 3, // Minimum zoom level
        maxZoom: 15, // Maximum zoom level
        maxBounds: bounds, // Restrict the view to the defined bounds
        maxBoundsViscosity: 1 // Prevents panning outside the max bounds
    });

    // Add layer control
    var layerControl = L.control.layers(baseLayers, null, { collapsed: false });
    layerControl.addTo(map);

    // Add mini map
    var miniMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });
    var miniMap = new L.Control.MiniMap(miniMapLayer, {
        toggleDisplay: true,
        minimized: false
    }).addTo(map);

    return {
        map: map,
        layerControl: layerControl
    };
}

// Initialize the map and get references to the map and layer control
var mapStuff = initDemoMap();
var map = mapStuff.map;
var layerControl = mapStuff.layerControl;

Problem:

Despite following the setup instructions, the mini map does not display on my main map. The main map and Esri basemaps load correctly, but the mini map is either missing or not functioning as expected.

What might be causing the mini map to not display or function correctly? Are there any additional steps or configurations required to use the mini map with Esri basemaps?

2
  • 1
    For me it works without problems, see JSFiddle: jsfiddle.net/TomazicM/nc95skzy. I just left out <link rel="stylesheet" href="https://unpkg.com/esri-leaflet/dist/esri-leaflet.css" /> because it does not exist, bit it works even when this link is left in the code.
    – TomazicM
    Commented Jun 21 at 17:45
  • Thanks a lot, it works fine. Commented Jun 22 at 8:43

0

Browse other questions tagged or ask your own question.