All pages on this website are written by myself, (C) Peter Thomson. I am a real person, not AI.

Using leaflet to display images with pan and zoom

pageid = 5337 parentid = 7710

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>

<head>

<title>Display images using leaflet</title>

</head>

<body>

<h1>Display images using leaflet</h1>

// Using leaflet.js to pan and zoom a big image.

var map = L.map('image-map', {

minZoom: 1,

maxZoom: 4,

center: [0, 0],

zoom: 1,

maxBoundsViscosity: 1,

crs: L.CRS.Simple

});

//zoom 4 full size image is 4608px * 3456 px

//zoom 3 2304 * 1728

//zoom 2 1152 * 864

//zoom 1 576 * 432

var image= L.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 crs: L.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.