I have a Leaflet map with two sets of my own tiles (this is for a campground map). The tiles are limited to the boundaries of the camp, so I don't have a lot of them. I've built a progressive web app (using Workbox for caching) and got to thinking about the following situation:
There are a significant number of requests for non-existent tiles, where the TileLayer knows to serve a default tile via errorTileUrl, which means quite a few 404 requests even when offline (since the tiles won't be in the cache). However, this seems a bit silly to me because I know which tiles should be present ahead of time, so I should be able to prevent the off-map 404s (looking at about 20 failed requests at start up).
I do need to be able to show (blank) off-map tiles because I can't guarantee orientation/geometry of the full-screen map on the device.
My primary question is: is it worth worrying about this? The app works as is now; just trying to make it a bit more network-efficient.
If so, one option I had considered is creating a new workbox.router route to handle calls to retrieve tiles and just quickly return a 404 if it's not in the list, otherwise go to cache/network. Or is there something I'm missing in Leaflet (or a plug in) that already handles this?
Thanks for thoughts and ideas.
You should be able to specify available tiles of your Leaflet Tile Layer on a rectangular area and a zoom range, using options:
bounds: If set, tiles will only be loaded inside the set LatLngBounds.minNativeZoom: Minimum zoom number the tile source has available. If it is specified, the tiles on all zoom levels lower than minNativeZoom will be loaded from minNativeZoom level and auto-scaled.maxNativeZoom: Maximum zoom number the tile source has available. If it is specified, the tiles on all zoom levels higher than maxNativeZoom will be loaded from maxNativeZoom level and auto-scaled.If your available tiles do not fill a rectangular area, you can provide dummy tiles to fill the uncovered area. Using a service worker router can help in redirecting to a common dummy tile in cache indeed.
For the outside area, you could just use the container background. Or if you really want a similar effect as a Tile Layer, use dummy ones that point to a common dummy / "no tile available" constant url template.