CEM How to generate tiles for leaflet basemap

From SCECpedia
Jump to navigationJump to search

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
  };