ThomasG77/.gitignore

## .gitignore
btv1b53095142n_f1.jpg
tiled/

## README.md

      
    Raw
  

              README.md
            
          
    Recipe for GDAL2Tiles

Prerequisites


Install GDAL and try to run gdal2tiles in a command line
Learn how to serve local files with "localhost" using one liners (see https://gist.github.com/willurd/5720255, most of the time, I use http-server in Node or Python but up to you)

Clone the repository

git clone https://gist.github.com/5ccb92134a2e2dbf78874cebd9ecff48.git leaflet-gdal2tiles
cd leaflet-gdal2tiles

Get the sample data

# If you have wget
wget -O btv1b53095142n_f1.jpg https://gallica.bnf.fr/iiif//ark:/12148/btv1b53095142n/f1/full/full/0/native.jpg
# Else if you have CURL
curl -o btv1b53095142n_f1.jpg https://gallica.bnf.fr/iiif//ark:/12148/btv1b53095142n/f1/full/full/0/native.jpg
# else if no wget, no CURL, open in a browser
# https://gallica.bnf.fr/iiif//ark:/12148/btv1b53095142n/f1/full/full/0/native.jpg and save file as btv1b53095142n_f1.jpg

Process the data

gdal2tiles.py -p raster btv1b53095142n_f1.jpg tiled/
# If version of GDAL >= 2.3.x, to run in parallel
gdal2tiles.py --processes=4 -p raster btv1b53095142n_f1.jpg tiled/

FIY, the center we use to set the center is by default [0, 0]. To determine, min and max zooms, see directory names in tiled folder.
They are number the min is 0 and the max is 6. These numbers are useful to change minZoom and maxZoom options in Leaflet sample code index.html when using this recipe for your own images.
Serve files using http-server (Node.js based)

See link about "Learn how to serve local files with "localhost" using one liners" in Prerequisites section and run the following :
http-server

Open your browser at http://localhost:8080 to see the following:

You can see also see the live demo

  
## gallica-nantes.jpg

      
    Raw
  

              gallica-nantes.jpg
            
          
## index.html
<!DOCTYPE html>

<html>
<head>
    <title>GDAL2Tiles - Images with Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
</head>
<body>
    <div id="mapid" style="width: 600px; height: 400px;"></div>
    <script>
    var mymap = L.map('mapid').setView([0, 0], 3);

      L.tileLayer('./tiled/{z}/{x}/{y}.png', {
        tms: true,
        minZoom: 0,
        maxZoom: 6,
        noWrap: true,
        attribution: 'Gallica &copy; <a href="https://gallica.bnf.fr/ark:/12148/btv1b53095142n/f1.item">Carte générale de la France. 131, [Nantes]</a>'
    }).addTo(mymap);

    </script>

</body>


</html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>GDAL2Tiles - Images with Leaflet</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
	</head>
	<body>
	<div id="mapid" style="width: 600px; height: 400px;"></div>
	<script>
	var mymap = L.map('mapid').setView([0, 0], 3);

	L.tileLayer('./tiled/{z}/{x}/{y}.png', {
	tms: true,
	minZoom: 0,
	maxZoom: 6,
	noWrap: true,
	attribution: 'Gallica © <a href="https://gallica.bnf.fr/ark:/12148/btv1b53095142n/f1.item">Carte générale de la France. 131, [Nantes]</a>'
	}).addTo(mymap);

	</script>

	</body>



	</html>