CEM How to generate tiles for leaflet basemap

create new basemap for leaflet

goal: to create leaflet basemap overlay layer

georeference a png image file

 Install QGIS from qgis.org

 Run QGIS 

     Start a new project 
         first icon with a blank paper
         load a map
                Select XYZ Tiles and OpenStreetMap and zoom to region of interest 

     Load a png that needs to be geo-referenced  
         select Layer -> georeferencer
         select open-raster and load the png file

     Mark several map coordinates 
          select 'From Map Canvas' and mark the matching location at the background map(remember to click OK)
             There will be a matching marker on the background map and georeferencer map

     Georeference and Export a tif file
          select georeferencing and exit

gqis1

gqis2

gqis3

gqis4

gqis5

gqis6

gqis7

gqis8

gqis9

generate image tile set

Download gdal2tiles

 pip install gdal2tiles

   (also available from conda)

Depending on the resolution of the original png file and also the area that it covers, zoom level does not have to be higher than 10. (higher zoom equals to more required memory)

 gdal2tiles.py -e  --zoom=5-10  georeference_image.tif output_folder

add to leaflet's basemap collection

Move generated data tile folder to the explorer's web data location

and add the layer information to explorer's basemap declaration.

  

  var lyr = L.tileLayer('./data/cybershake22_12/{z}/{x}/{y}.png', {tms: 1, opacity: 1, attribution:scecAttribution, minZoom: 5, maxZoom: 13});
  var lyr2 = L.tileLayer('./data/vs30_2022_v2/{z}/{x}/{y}.png', {tms: 1, opacity: 1, attribution:scecAttribution, minZoom: 5, maxZoom: 10});

  baseLayers = {
    "esri topo" : esri_topographic,
    "esri imagery" : esri_imagery,
    "jawg light" : jawg_light,
    "jawg dark" : jawg_dark,
    "osm streets relief" : osm_streets_relief,
    "otm topo": otm_topographic,
    "osm street" : osm_street,
    "esri terrain": esri_terrain,
    "cybershake":lyr,
    "v3 etree":lyr2
  };