[FEATURE] Implement Leaflet.js Offline Map Tile Caching

[knoxiboy]

Problem Statement

Riders collecting bio-waste often navigate through rural areas or city dead-zones with weak internet connectivity. When the internet connection drops, Leaflet.js maps fail to load tiles, leaving the rider unable to navigate to their next pickup or drop-off plant.

Proposed Solution

Implement offline map caching for Leaflet.js:

1. Update service-worker.js to intercept Leaflet tile requests (e.g., requests to tile.openstreetmap.org).
2. Cache the fetched tiles in CacheStorage or IndexedDB up to a maximum storage budget (e.g., 50MB) with an LRU eviction policy.
3. In src/route-optimizer.js / Leaflet map loaders, configure the map tiles layer to gracefully serve stale/cached tiles when offline.

Alternatives Considered

Storing static map images, but this loses zooming and panning capabilities, which are essential for active navigation.

Additional Context

Level: Advanced
Affected Files: service-worker.js, src/route-optimizer.js

Can you please assign this issue to me? I would like to work on this.

[knoxiboy]

/assign gssoc
@Shruti070107 please assign this issue to me.....

[aaniya22]

pls assign this to me under gssoc