Adding GDal2Tiles layer to Leaflet map

This is a step by step tutorial about using GDAL2Tiles to transform a georeferenced map into a TMS-map which can be added as a layer to a leaflet map.


Installation:

Download the OSGeo4W installer to install all GDAL-packages and the Python-package. After downloading the installer, run the .exe and follow the instructions of the setup wizard to install the necessary packages. The installation may be take some time to complete.

Environment Setup: 

After installation, run the “OSGeo4W Shell” using the desktop icon or, equivalently, run C:OSGeo4Wbino4w_env.bat, in order to setup the necessary environment variables.

Once all the necessary environment variables are set up, navigate to the folder containing the geo-referenced map. Run the following command to generate a Tile Map Service-compatible directory structure of map tiles from zoomlevel 1 to 8 in outputfolder:

gdal2tiles --profile=mercator -z 1-8 map_name.tif outputfolder_name

“map_name” is the name of the geo-referenced .tif map and “outputfolder_name” is the name of the folder where you want your tiles downloaded.pyscript_gdal

My “World1.tif” map is in the path >Desktop > RMarkdown tutorial > referenced world map.

After all the tiles are loaded into your output folder specified, you can directly add the map layer to any leaflet map from your local folder using the following url:

file://folder_path/{z}/{x}/{y}.png

An example of adding the map tiles present in the folder path to an existing basemap:


var map = L.map('map').setView([45, -93], 3);

/* setting some basemap options */
var tile_options = {
	subdomains: '1234'	
};

/* the base map tile layer */

var basemap = L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png',tile_options);
basemap.addTo(map);

/* the georeferenced map tile layer */

L.tileLayer('file://folder_path/{z}/{x}/{y}.png',
{
attribution: 'Map data', 
tms:true
}).addTo(map);

Leave a Reply

Your email address will not be published. Required fields are marked *