Generate tiles for a specified region of an image

[giswqs]

It seems the TiTiler Crop / Part only returns a static image. Is it possible to return the dynamic tiles for a specified region of an image? Imagine that a COG covers a large region, but the user is only interested in a small region of interest. It would be great if the tile shown on an interactive map can be limited to a specified ROI.

import leafmap
m = leafmap.Map()
url = 'https://opendata.digitalglobe.com/events/mauritius-oil-spill/post-event/2020-08-12/105001001F1B5B00/105001001F1B5B00.tif'
m.add_cog_layer(url)
m

This URL generates a static image of the ROI, but I want the cropped image/tile to show on an interactive map.
https://titiler.xyz/cog/crop/57.707,-20.4351,57.7269,-20.4203.png?url=https://opendata.digitalglobe.com/events/mauritius-oil-spill/post-event/2020-08-12/105001001F1B5B00/105001001F1B5B00.tif

[giswqs]

Found a relevant discussion: #376. My user case is a bit simpler than using a GeoJSON as an ROI. I just want to tiles to be cropped to a bounding box [minx, miny, maxx, maxy]

[geospatial-jeff]

I think you'd typically want the client to limit the tile requests sent to the server within the desired bounds instead of the server. I'm not sure if this is supported by folium / ipyleaflet, but it is by leaflet (https://leafletjs.com/reference.html#gridlayer-bounds). Titiler does support TileJSON which is another client-side approach to restricting tile requests to bounds but I'm not sure if that is supported by folium / ipyleaflet either.

[giswqs]

Thanks for the hints. It seems ipyleaflet TileLayer has the bounds parameter. Let me try it out.
https://ipyleaflet.readthedocs.io/en/latest/layers/tile_layer.html#ipyleaflet.leaflet.TileLayer

[giswqs]

The ipyleaflet TileLayer bounds parameter works partially. It is not clipped perfectly to the bounding box, and the image region changes with the zoom level. I guess it only limit the tiles intersecting the bounding box, not really clipping.

[geospatial-jeff]

That makes sense. Maybe this is a case where server-side implementation is better, as the server could mask pixels outside of the bounds. As mentioned in #376 I'm not sure if this should be supported directly in titiler @vincentsarago

[giswqs]

It would be great if titiler can support this. I don't need the complicated geojson support. Supporting a simple bounding box (SW, NE) would be awesome!

[vincentsarago]

👋 @giswqs as mentioned by @geospatial-jeff we already discussed this in #376. I don't think we want to add this behaviour by default in titiler (we have already too many parameters). if you follow #376 you'll be able to easily create your own tiler with a bbox parameter to create a cutline.

This could also be achieved in the application directly using something like https://github.com/ptma/Leaflet.Mask or https://github.com/frogcat/leaflet-tilelayer-clip

[neelduttahere]

I solved this by using DeckGL with reactjs, to clip the TileLayer on the canvas using the geojson bounds. This maintained the clipping with geojson, even when changing the zoom level. But the only downside right now is that the client machine still calls all the tiles of the entire raster, though DeckGL gives the option to restrict API calls outside bounds as well (needs more work on the later part)