Terrain, location, and geofence testing in one interactive map
I built this Geo Lab to connect map data, browser location, terrain elevation, and boundary logic. ArcGIS stays completely unloaded until the visitor activates the lab. The mapping SDK is fetched from the ArcGIS CDN at runtime instead of being bundled into the rest of my portfolio.
Location and privacy
Nothing location-related starts on page load
My application code does not request device location, download the ArcGIS runtime, or create the 3D scene until the visitor chooses to activate the lab. Device coordinates stay in temporary page state and are not sent to my own database.
After activation, ArcGIS receives the normal map, imagery, elevation, and address-search requests required to run the map.
ArcGIS Scene
The 3D map appears only after activation.
ArcGIS is currently unloaded
ArcGIS is fully paused. No map runtime, map CSS, scene, or map service is loaded until activation.
Map status
ArcGIS is fully paused. No map runtime, map CSS, scene, or map service is loaded until activation.
Selected location
Site snapshot
The selected point becomes the center for terrain reading and geofence analysis. Cyan marks the selected point. Green marks the device reading after permission.
Place
No point selected
Latitude
Not available
Longitude
Not available
Terrain Elevation
Not selected
Terrain reading
Choose a point before interpreting the terrain.
Geofence demo
Draw a boundary and compare the device with it
The selected map point is the center. The radius controls the boundary. GPS accuracy is considered before the page calls a result confidently inside or outside.
Boundary
1.0 mi
Device Distance
Not available
Boundary Status
No boundary
Result
No geofence exists yet because no center point has been selected.
Event log
Boundary status changes
The log adds the first live result, then another entry only when the status changes.
Live tracking
OffHow I built it
ArcGIS map, browser permissions, and spatial calculations
This page downloads the ArcGIS browser runtime only after activation, then uses React state to manage selected points, terrain readings, location permission, distance calculation, and event logging. ArcGIS is not bundled into the main Next.js build.
Runtime only loading
ArcGIS JavaScript and CSS come from the ArcGIS CDN only after activation. The main Next.js build no longer has to compile the entire mapping SDK.
3D terrain
SceneView uses satellite imagery with world elevation so the selected location can be inspected in context.
Location consent
One-time location and live tracking are separate actions, with tracking stopped when the page closes or resets.
Geofence logic
The page calculates distance with the Haversine formula and accounts for reported GPS accuracy near the boundary edge.
Snapshot export
The selected point, elevation, device reading, distance, accuracy, and boundary result can be exported as CSV.
Future layers
The next useful layers would be parcel boundaries, zoning, flood risk, fire hazard, roads, utilities, and slope.