5. Leaflet map tutorial - how to change the image displayed on zoom

We can extend this simple image display to change the image as we zoom in or out. In this next example we have two images, one showing flowers in close focus and one with the mountains behind in distant focus. As we zoom the image we can switch the focus from one image to the other.

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

The HTML code

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="leaflet.css" />
    <title>Swapping between images on zoom with leaflet</title>
    <script type='text/javascript' src='leaflet.js'></script>
    <h1>Swapping between images on zoom with leaflet</h1>
    <div id="image-map" style="width: 1152px; height: 864px; border: 1px solid #AAA;"></div>
    var map L.map('image-map', {
      center: [00],
    //zoom 4 full size image is 4608px * 3456 px
    //zoom 3 2304 * 1728
    //zoom 2 1152 * 864
    //zoom 1 576 * 432
    var diagramLayerGroup new L.LayerGroup();
    var midimageL.imageOverlay("P1100060.JPG", [[0,0],[432,576]]);
    var nearimageL.imageOverlay("P1100059.JPG", [[0,0],[432,576]]);
    var imgset 'near';
     var markerGroup diagramLayerGroup.addTo(map);
    // tell leaflet that the map is exactly as big as the image
    map.setMaxBounds(new L.LatLngBounds([0,0], [432,576]));  // prevent panning outside the image area  
    var map.getZoom();
    console.log('zoom = ' imgset);
    if (&& imgset == 'near')  {
        var markerGroup diagramLayerGroup.addTo(map);
        console.log('set middle = ' imgset);
    if (<&& imgset == 'middle')  {
        var markerGroup diagramLayerGroup.addTo(map);
        console.log('set near = ' z);

This time we have added the images inside a LayerGroup so that we can manipulate them. We are using the same coordinates as in our previous simple image example.

The switching is done when the user changes the zoom, using the zoomend function