(Global high/low resolution FGB vector boundaries, global, single 10KM, 5KM, 1KM DEM and 1,340 10 meter DEM's that cover CONUS, depending on zoom level. Be patient when zoomed in on 10 meter CONUS DEM's, server load and your location are factors)

This is a Cloud Native approach to creating interactive maps without backend server processing or services. Requires data in cloud native formats hosted on cloud storage like AWS S3 or out of the box web server. This showcases the use of VRTMate, COGMate and FGBMate found in this notebook.

The entire JavaScript in the .html <script> tag. You can also view the layerConfig.js.

function layerById(id = "") { return layerCfg.findIndex(item => item.id === id); }

async function initMap() {
   var map = L.map('map', {
      center: { lat: 39, lng: -95 }
      ,maxBounds: [[-90, -180], [90, 180]]
      ,maxBoundsViscosity: 1.0
      ,zoom: 4
      ,minZoom: 1
      ,maxZoom: 18
      ,zoomControl: false
      ,doubleClickZoom: false
   });
   L.control.scale().addTo(map);
   L.control.zoom({position: 'topright'}).addTo(map);
  
   var landlow = new FGBMate(map, layerCfg[layerById('landlow')]);
   landlow.addLayer();
   
   var land = new FGBMate(map, layerCfg[layerById('land')]);
   land.addLayer();

   var dem1KM = new COGMate(map, layerCfg[layerById('dem1KM')]);
   dem1KM.addLayer();

   var dem5KM = new COGMate(map, layerCfg[layerById('dem5KM')]);
   dem5KM.addLayer();

   var dem10KM = new COGMate(map, layerCfg[layerById('dem10KM')]);
   dem10KM.addLayer();

   var cfg = layerCfg[layerById('dem10m')];
   var vrt = new VRTMate(cfg.vrt);
   let success = await vrt.readVRT();
   
   var dems = [];
   update = _.throttle(update, 500);
   map.on('moveend', (e) => { 
      update(map, vrt, dems, cfg)
   });
   update(map, vrt, dems, cfg);
}

function update(map, vrt = null, dems = [], cfg = null) {
   let zoom = map.getZoom();
   console.log('zoom: ', zoom);

   if(vrt === null || cfg === null) return;
   let mb = map.getBounds();
   let rasts = zoom > cfg.minZoom && zoom < cfg.maxZoom 
      ? vrt.rastersByBBox({ xmin: mb.getWest(), xmax: mb.getEast(), ymin: mb.getSouth(), ymax: mb.getNorth() }) 
      : [];
   
   // add rasters in viewport
   for(key in rasts) {
      if(key in dems) continue;
      dems[key] = Object.assign({}, rasts[key]);
      cfg.url = cfg.prefix + dems[key].raster.split('/').slice(cfg.basenameSlice).join('/');
      dems[key].layer = new COGMate(map, cfg);
      dems[key].layer.addLayer();
      console.log('add: ', key);
   }
   // remove rasters not in viewport
   for(key in dems) {
      if(key in rasts) continue;
      dems[key].layer.removeLayer();
      delete dems[key];
      console.log('rm: ', key);
   }
}

That's it!