6. leaflet map tutorial - how to display large and complex diagrams with pan and zoom

This frame shows a live view of the diagram we are creating:

Now that I know I can display a large diagram with multiple layers like this I need to go back and redesign the larger diagram to take advantage of these features!

The HTML code

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="leaflet.css" />
    <title>Display different versions of a diagram on zoom with Leaflet</title>
    <script type='text/javascript' src='leaflet.js'></script>
    <h1>Display different versions of a diagram on zoom with Leaflet</h1>
    <div id="image-map" style="width: 731px; height: 596px; border: 1px solid #AAA;"></div>
    var map L.map('image-map', {
      center: [00],
      attribution'&copy; <a href="https://peter-thomson.com">Peter Thomson</a>',
    // dimensions of the image
    // the larger image is 1463 * 1193 max zoom would be 3
    // zoom 2 = 731 * 596
    // zoom 1 = 360 * 298 
    var diagramLayerGroup new L.LayerGroup();
    var myimageL.imageOverlay("diagram.png", [[0,0],[298,360]]);
    var myoverviewL.imageOverlay("what is a mobile device-overview.png", [[0,0],[298,360]]);
    //var diagram = L.layerGroup([myimage]);
    var markerGroup diagramLayerGroup.addTo(map);
    // tell leaflet that the map is exactly as big as the image
      map.setMaxBounds(new L.LatLngBounds([0,0], [298,360]));  // prevent panning outside the image area  
L.tileLayer('', {
    attribution'&copy; <a href="https://peter-thomson.com">Peter Thomson 2018</a>',
    var map.getZoom();
    console.log('zoom = ' z);
    if (2) {
        var markerGroup diagramLayerGroup.addTo(map);
    var markerGroup diagramLayerGroup.addTo(map);

This is very similar to the previous example, except that we have had to recalculate the size for each zoom, starting with the width and height of the largest image, and dividing by 2 each time.

The overview is only displayed at zoom 1.

The same method would be easily adapted to display three different layers as the user zooms in, adding more detail each time.