Display DeepZoom (DZI) image tiles with Leaflet.
Originally based on Leaflet.Zoomify.
- Simple integration of DeepZoom (DZI) image tiles into Leaflet maps.
- Works with any DeepZoom-compatible tile source.
- Supports panning, zooming, and full Leaflet controls.
- Zero dependencies beyond Leaflet itself.
Using npm:
npm install leaflet-deepzoomUsing CDN (for quick demo or CodePen):
<script src="https://unpkg.com/leaflet-deepzoom@latest/leaflet-deepzoom.js"></script>Live demo: 👉 https://alfarisi.github.io/leaflet-deepzoom/example/
Basic example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet DeepZoom Example</title>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
/>
<style>
#map { height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-deepzoom@latest/leaflet-deepzoom.js"></script>
<script>
const map = L.map('map').setView([0, 0], 0);
var dzLayer = L.tileLayer.deepzoom('DeepZoomImage/hubble_files/', {
width: 2400,
height: 3000,
overlap: 1
}).addTo(map);
map.fitBounds(dzLayer.options.bounds);
</script>
</body>
</html>| Leaflet Version | Plugin Version |
|---|---|
| 1.2.0 and later | 2.x |
| 0.7.x | 1.x (legacy) |
Released under the MIT License.