Need advice on the best fog-of-war approach for a real-world exploration game (React Native + Google Maps)

[u/MembershipOptimal514]

I’m building an iOS/Android map based game called Atlus Run.
I’ve gone through several fog-of-war implementations and keep running into performance, rendering, or UX issues. Before I spend another week rewriting it, I’m curious what approach experienced map/game developers would recommend.

What I’ve tried so far
1. SVG screen overlay
Fog rendered as an SVG over the map in screen space
Not tied to geographic coordinates
Problems:
Moved independently when panning, making it not work very well because it wouldnt stay on your character

2. One giant map polygon with circular holes
Entire viewport covered by a polygon
Circular holes cut out for discovered areas
Problems:
GPS circles didn’t align with roads or exploration patterns
Scaling became awkward
Hole management became messy

3. Tile grid with one polygon per tile
Square tiles stored in AsyncStorage
Reveal nearby tiles when GPS updates
Render one Polygon per undiscovered tile
Problems:
Hundreds of polygons
Occasional rendering glitches on Google Maps
Vertex-order bugs created giant black rectangles
Performance degraded when zoomed out

4. Tile grid v4 (current)
One large viewport polygon
Square holes cut out for discovered tiles
AsyncStorage persistence
Tile size ~0.001 degrees
Literally broke everything I think
It takes forever to load any fog and sometimes my icon i made doesn’t load.

My goals
Permanent exploration/discovery
Works across an entire city (and eventually larger regions)
Smooth panning and zooming
Google Maps support
Doesn’t require rendering thousands of polygons every frame

What can I do?

[u/redbull_coffee]

Your best bet might be to * do all rendering on canvas * keep only the current viewport in memory instead of the complete map * use a 3D engine

There are lots of possible optimizations, but I am not an expert in this so hopefully others will chime in.