This is a quick example showing how to get Leaflet to handle image tile output generated by the Ruby DZT library, using Leaflet-Deepzoom as a bridge. For the time being only Leaflet 0.7.7 is supported, not the latest version.
Assuming you have a folder called images containing the image you want:
dzt slice images/image-file.jpg --output=tiles --format=jpg --tile-size=256 --overwrite=trueThis will create a a series of subfolders under tiles/ with different zoom levels.
| <html> | |
| <head> | |
| <title>Leaflet Test</title> | |
| <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/> | |
| <style> | |
| #mapid { height: 800px; } | |
| </style> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <script src="https://cdn.rawgit.com/alfarisi/leaflet-deepzoom/master/leaflet-deepzoom.js"></script> | |
| </head> | |
| <body> | |
| <h1>Leaflet Test</h1> | |
| <div id="mapid"> | |
| </div> | |
| <script> | |
| var mymap = L.map('mapid', { | |
| maxZoom: 13, | |
| minZoom: 9 | |
| }).setView([0, 0], 13); | |
| L.tileLayer.deepzoom('tiles/', { | |
| width: 5000, | |
| height: 3850, | |
| tolerance: 0.8 | |
| }).addTo(mymap); | |
| </script> | |
| </body> | |
| </html> |