This is supporting code for the Mapbox tutorial Use Mapbox GL JS in an React app.
This tutorial walks through how to setup Mapbox GL JS in an React project.
You'll learn how to:
- Setup a Vite JS app to use React
- How to install Mapbox GL JS and its dependencies.
- Use Mapbox GL JS to render a full screen map.
- How to add a toolbar which displays map state like
longitude,latitude, andzoomlevel and is updated as the map is interacted with (showing the map to app data flow). - How to create a UI button to reset the map to its original view (showing the app to map data flow).
- Node v18.20 or higher
- npm
- Clone this repository and navigate to this directory
- Install dependencies with
npm install - Add your Mapbox access token to a
.envfile at the project root:VITE_MAPBOX_ACCESS_TOKEN=pk.your_token_here(get a token from your Mapbox account). - Run the development server with
npm run devand open the app in your browser at http://localhost:5173.
This project includes a dedicated 3D area page that fits a 100m x 100m square around a coordinate.
- URL format:
http://localhost:5173/area-3d.html?lat=43.074&lon=-89.384 - Query parameter validation:
latrange:[-85.051129, 85.051129]lonrange:[-180, 180]- Invalid values fall back to defaults:
lat=43.074,lon=-89.384
CLI helper command:
npm run area3d -- --lat 43.074 --lon -89.384
npm run area3d -- --lat 43.074 --lon -89.384 --open
npm run area3d -- --base-url http://localhost:5173The command prints the final area-3d.html URL and optionally opens it in your browser when --open is provided.
The Area 3D page now includes a real-time foot traffic simulation powered by OpenStreetMap POI data and Gaussian mixture models.
- On load, the page fetches nearby POIs from
/api/pois/nearby(up to 150 points, 800 m radius by default) and the Census tract boundary from/api/census/tract-geo. - The simulation engine (
src/lib/simulation/engine.js) computes a 0–1 weight for each POI at every time step using Gaussian mixture profiles calibrated to POI category (food, retail, nightlife, services, leisure, office) and day type (weekday/weekend). - deck.gl layers (Heatmap, Hexagon, Scatter, Tract Boundary) are rendered as a
MapboxOverlayon top of the existing Mapbox 3D scene and updated in real time as the controls change.
| Control | What it does |
|---|---|
| Time slider | Scrub through 0–24 h in 15-minute increments; auto-play advances at 2 s/hour |
| Day type | Switch between weekday and weekend Gaussian profiles |
| Focus | Tenant mode penalises nightlife, boosts leisure; Business mode amplifies foot traffic peaks |
| Layer visibility | Toggle Heatmap / 3D Hexagons / POI Dots / Tract Boundary independently |
| Camera presets | Snap to 2D (top-down), 3D Tilt (pitch 45°), or Bird's Eye (pitch 60°) |
| Endpoint | Description |
|---|---|
GET /api/pois/nearby?lat=&lon=&radius_m=800 |
OSM POIs via Overpass (categorised, downsampled to 150) |
GET /api/census/tract-geo?lat=&lon= |
Census tract boundary as GeoJSON Feature |
See src/lib/simulation/README.md for a full description of the Gaussian model, category mapping, and how to extend profiles.
This repository also includes a Python script for pulling Census Reporter data from coordinates and for address-to-coordinate conversion workflows.
- Script:
scripts/census_reporter_lookup.py - Full usage guide:
scripts/README-census-reporter-lookup.md