Force Leaflet tile refresh when network connectivity restored

Question

We've got a React app using Leaflet maps and our users can sometimes be in areas that have spotty coverage and they can lose connection for a period of time. When this happens they can pan/zoom on the map and get blank tiles. I would like to make a call to retrieve those missing tiles when the connection is restored. So far I've tried invalidateSize, looping through each layer and calling redraw and even getting the center of the map and calling setView with a slightly different centerpoint and nothing is making the map update to retrieve the missing tiles. How do I do this?

Answer 1

There is no automatic way to hook into the fact that coverage was broken, and restored. However, you can set a function to run periodically (polling) to see if the connection exists. There's some methods on how to do that here: Detect if the internet connection if offline. Say in the base script, you set an interval going:

let onlineTracker = true;

setInterval(() => {
  if(navigator.onLine && !onlineTracker) {
    map.invalidateSize();
    onlineTracker = true
  } else {
    onlineTracker = false;
  }
}, 1000) // every 1 second

So what you're doing is maintaining the online status with onlineTracker. You periodically ask whether navigator.onLine. If its offline, set the onlineTracker to false. You keep polling. As soon as navigator.onLine returns true again, you map.invalidateSize, which will refetch the tiles, and set the onlineTracker back to false so that every following iteration of the interval hits the else block and does nothing.