Combine tiled layers as one layer in Leaflet

Question

How do I add multiple layers to the leaflet map. I have added the overlay_tile to the tilelayer but nothing happens. tilelayer = L.tileLayer(url_tile,overlay_tile, {noWrap.... My example can only have one tile at a time. When I add multiple tiles to the tileLayer nothing happens.

What I have Leaflet Example What I am trying to achieve. NASA Example

code

 var url_tile='https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
 url_tile='//gibs-{s}.earthdata.nasa.gov/wmts/epsg4326/best/MODIS_Terra_CorrectedReflectance_TrueColor/default/2020-05-05/EPSG4326_250m/{z}/{y}/{x}.jpg'

 var overlay_tile='//gibs.earthdata.nasa.gov/wmts/epsg3857/best/MODIS_Terra_Aerosol/default/2021-06-05/GoogleMapsCompatible_Level6/{z}/{y}/{x}.png';
 var map = L.map('map', {editable: true}).setView(startPoint, 2),
 tilelayer = L.tileLayer(url_tile,
 { noWrap: true,
   maxZoom: 20, attribution: 'Data \u00a9 <a href="https://www.openstreetmap.org/copyright"> OpenStreetMap Contributors  </a> Tiles \u00a9 HOT'
 }).addTo(map);

Answer 1

There are few things you have to correct in your code to make it work as desired.

First there is definition of tile layer url url_tile. You first define it as OpenStreet tile layer source, and right after that assign to it some other layer source, which of course overrides the first one. Besides that that second source is based upon coordinate system EPSG:4326, which is different from your desired overlay source, which is based upon standard coordinate system EPSG:3857 used in web maps. In Leaflet you cannot mix layers with different coordinate systems, all layeers must use the same one (see map option crs in https://leafletjs.com/reference-1.7.1.html#map-factory). So second source wouldn't work correctly anyway.

Then, to put you overlay on the map, you just have to define layer for it the same way as the base layer. Since it is raster layer and it overlays the base map, it's usual practice to make it a bit transparent with the opacity option.

So your code could then look something like this:

var url_tile = 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
var overlay_tile = 'https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/MODIS_Terra_Aerosol/default/2021-06-05/GoogleMapsCompatible_Level6/{z}/{y}/{x}.png';

var map = L.map('map', {editable: true}).setView(startPoint, 2);

var tilelayer = L.tileLayer(url_tile, {
  noWrap: true,
  maxZoom: 20,
  attribution: 'Data \u00a9 <a href="https://www.openstreetmap.org/copyright"> OpenStreetMap Contributors </a> Tiles \u00a9 HOT'
}).addTo(map);

var overlaylayer = L.tileLayer(overlay_tile, {
  noWrap: true,
  opacity: 0.6
}).addTo(map);