If the small preview image below shows the real map but the big box on the page is still black, that proves it's specifically a canvas paint bug, not a data bug -- this preview uses a totally different rendering path (a plain <img>, not canvas) as a control test.
Copy/screenshot this and send it back -- it tells us exactly what broke.
Terrain Relief Scanner
Turn a paper map or screenshot into a 3D terrain model. Photo in → correct perspective → sync grid coordinates → explore in 3D.
Loading vision engine...
This loads OpenCV.js the first time. May take 10-20 seconds on first load.
1
Photo
2
Corners
3
Sync
4
Relief
1. Get a photo of the map
Snap a live photo of your map grid section, or import a saved screenshot from your gallery. Try to get the whole grid square in frame.
Or skip straight to 3D
No photo, no corner-tapping, no grid sync -- just a coordinate and a bounding size. Uses a default shaded-relief skin since there's no map sheet to stretch over the mesh.
2. Tap the 4 corners of the grid
Tap the 4 corners of the grid in any order — the app sorts them out automatically. Pinch or scroll to zoom, drag to pan. Press and hold near a corner to fine-tune with the magnifier. Double-tap a placed corner to remove just that one.
3. Tap two cross-grid intersections on your map image to sync coordinates
Use Move Map to pinch/scroll-zoom and drag into position, then switch to Place Anchors and tap the grid intersection nearest the top-left, then the one nearest the bottom-right. A coordinate entry prompt opens automatically after the second tap.
4. Generate 3D Terrain Relief View
Builds a smooth 3D terrain mesh keyed to your synced grid coordinates, skins it with your map photo, and automatically traces ridges, draws, peaks, and saddles straight from the raw elevation math -- no manual line tracing. Uses real elevation: offline SRTM tiles if loaded below, otherwise a live lookup (needs a signal).
Optional -- for no-signal / offline use: load standard SRTM .hgt tiles covering the area you're mapping. Download these once, anywhere with a connection (e.g. USGS EarthExplorer, NASA Earthdata, or opentopography.org -- all free), and carry the files onto the device. Once loaded, the terrain model needs no network at all, and tiles stay saved on this device for next time.
Sync Grid Coordinates
Enter the real-world coordinates for the two intersections you just tapped (Point 1 = top-left tap, Point 2 = bottom-right tap).
Point 1 grid coordinates
Point 2 grid coordinates
3D Terrain Relief View (WebGL)
Ridge
Draw / Valley
Peak
Saddle
Before You Shoot
🚫⚡
Disable Flash. Avoid direct overhead sun.
🕶️
Block Glare. Use your body to shade the map if needed.
🔍
Back Up & Zoom. Hold phone 2 feet away and use 2x/3x zoom to keep your shadow out of the shot.
Quick 3D Render
Skip the photo and calibration steps -- render a 3D terrain box directly from a center coordinate and a bounding size. A default shaded-relief skin is used since there's no map photo to stretch over the mesh.
Center Coordinate
Width
Height
Field Sketch Canvas & Perspective Profile
Tools & Symbols:
Plot a Route
Enter one grid reference per line, in the order you'll walk them. They'll be connected into a route line with numbered waypoints and leg distances -- on both the 2D sketch and the 3D relief.
Configure Matrix Parameters
Set properties for the analytical Cone of Sight framework projection downrange.