upgrade to titiler>=0.21,<0.22 and use default map.html template

[hrodmn]

Slesa reported an error in the /map viewer for a netcdf dataset: s3://sid-test-public/CH4_emissions_2010.nc

https://n032aaar2i.execute-api.us-west-2.amazonaws.com/WebMercatorQuad/map?url=s3%3A%2F%2Fsid-test-public%2FCH4_emissions_2010.nc&variable=ANTH_CH4&rescale=0%2C5&colormap_name=viridis

Error: Invalid LatLng object: (NaN, 177.50000000000003)
    at new v (LatLng.js:32:9)
    at e.unproject (proj4leaflet.js:46:11)
    at e.pointToLatLng (CRS.js:41:26)
    at e.unproject (Map.js:989:27)
    at e._getBoundsCenterZoom (Map.js:275:21)
    at e.fitBounds (Map.js:294:21)
    at map?url=s3%3A%2F%2Fsid-test-public%2FCH4_emissions_2010.nc&variable=ANTH_CH4&rescale=0%2C5&colormap_name=viridis:148:25

The problem was that the bounds in the tilejson for this dataset extend beyond the limits of latitude and longitude which was breaking some of the leaflet javascript code

{
  "tilejson": "2.2.0",
  "version": "1.0.0",
  "scheme": "xyz",
  "tiles": [
    "http://localhost:8000/tiles/WebMercatorQuad/{z}/{x}/{y}@1x?url=s3%3A%2F%2Fsid-test-public%2FCH4_emissions_2010.nc&variable=ANTH_CH4&rescale=0%2C5&colormap_name=viridis&reproject=nearest"
  ],
  "minzoom": 0,
  "maxzoom": 0,
  "bounds": [-182.5, -90.9777777777778, 177.5, 90.9777777777778],
  "center": [-2.5, 0, 0]
}

My first solution was to clamp any bounding box coordinates that exceed the logical limits to the limit value (-180, -90, 180, 90) before asking leaflet to zoom to the bounding box. This worked but then I decided to try upgrading titiler.core to the latest version so we could use get some recent improvements to the map.html template. The map.html template in titiler.core did not need any modifications to work for these datasets.

[vincentsarago]

FYI bounds come from https://github.com/cogeotiff/rio-tiler/blob/main/rio_tiler/io/xarray.py#L84

If I remember correctly from corteva/rioxarray#645 (comment), it's usually the file that is wrong 😓