4. Using leaflet to display images with pan and zoom

Leaflet can be used to display images with the ability to pan and zoom the image to see any detail in the image.

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

The HTML code

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="leaflet.css" />
    <title>Display images using leaflet</title>
    <script type='text/javascript' src='leaflet.js'></script>
</head>
 
<body>
    <h1>Display images using leaflet</h1>
    <div id="image-map" style="width: 1152px; height: 864px; border: 1px solid #AAA;"></div>
            <script>
    // Using leaflet.js to pan and zoom a big image.
    var map L.map('image-map', {
      minZoom1,
      maxZoom4,
      center: [00],
      zoom1,
      maxBoundsViscosity1,
      crsL.CRS.Simple
      
    });
    //zoom 4 full size image is 4608px * 3456 px
    //zoom 3 2304 * 1728
    //zoom 2 1152 * 864
    //zoom 1 576 * 432
 
    var imageL.imageOverlay("P1100059.JPG", [[0,0],[432,576]]); //initial size at zoom 1 )
    image.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.
    //Note the viscosity setting keeps the image from being dragged outside this 
    </script>
</body>
</html>

For images we use a different coordinate system to normal maps. We use crsL.CRS.Simple and we use the pixel sizes of our image as our coordinates. For the best resolution in the display, match the image pixel sizes to the zoom level. Start with the full size image and divide its width and height by 2 each time. Use the values for zoom 1 height, width as the initial values for the image.

Set the width and height of the map div to be in the same proportions as the image, and again for the best image resolution, select a pixel size the matches one of the zoom sizes of the image.