The coolest route is the shadiest one — sun-smart streets for smarter walkers.

UmbraCity is a real-time, 3D pedestrian navigation system that routes you through the shadiest streets in the city. It uses actual building heights, tree canopy data, and live sun geometry to calculate where shadows fall right now — and colors every road by how comfortable (or dangerous) it is to walk on.

Built for FutureHacks 2026 — Build the city of tomorrow, today.

🔗 GitHub: github.com/PoseidonProMax/UmbraCity-Paris

• Node.js (v18 or higher) — nodejs.org

That's it. No Python, no database, no cloud setup required to run the app.

1. Go to github.com/PoseidonProMax/UmbraCity-Paris
2. Click Code → Download ZIP
3. Extract the ZIP to a folder of your choice
4. Open a terminal in that folder and run:

npm install
npm run dev

5. Open your browser and go to http://localhost:5173

✅ The preprocessed map data is already included in public/data/ — no extra steps needed.

git clone https://github.com/PoseidonProMax/UmbraCity-Paris.git
cd UmbraCity-Paris
npm install
npm run dev

Then open http://localhost:5173.

UmbraCity-Paris/
├── src/
│   ├── main.js            # App entry point & orchestration
│   ├── shadow-engine.js   # Sun position, shadow projection & comfort scoring
│   ├── router.js          # Dijkstra's pathfinding (fastest & coolest routes)
│   ├── planner.js         # Shade placement tool & AI smart suggestions
│   ├── three-layer.js     # Three.js 3D buildings, trees, water & lighting
│   ├── ui.js              # All UI panels, modals & interactions
│   └── audio-engine.js    # Procedural ambient audio synthesizer
├── scripts/
│   └── preprocess.py      # (Optional) OSM GeoJSON → optimized JSON pipeline
├── data/
│   └── osm/paris/         # Raw OpenStreetMap source exports
├── public/
│   └── data/              # ✅ Pre-built data — ready to use, no setup needed
│       ├── buildings.json
│       ├── trees.json
│       ├── roads.json
│       ├── parks.json
│       └── water.json
├── index.html
├── style.css
├── package.json
└── vite.config.js

For any given time of day, UmbraCity computes sun position using the SunCalc library and projects shadows from every building and tree:

$$\text{shadowLength} = \frac{\text{height}}{\tan(\text{sunAltitude})}$$

All shadows are indexed in a 15×15 spatial grid for fast O(1) lookup, making real-time road analysis possible at 60fps.

Dijkstra's algorithm with a custom edge weight:

$$w = \text{length} \times \begin{cases} 1.0 & \text{if shaded} \ 7.0 & \text{if exposed} \end{cases}$$

The 7× penalty on exposed segments steers routes through shade — even if the path is slightly longer.

The public/data/ files are already included so you don't need to do this. But if you want to update the OSM data:

1. Make sure you have Python 3 installed
2. Create a virtual environment and install nothing (only built-in libraries used):

python scripts/preprocess.py

Or use the npm shortcut (requires .venv to be set up):

npm run preprocess

1. Export OSM layers for your city from overpass-turbo.eu
2. Place the .geojson files in data/osm/<your-city>/
3. Update the BBOX in scripts/preprocess.py to your city's bounding box
4. Run python scripts/preprocess.py
5. Update PARIS_CENTER in src/main.js with your city's coordinates
6. Add your city to the cities lookup in getCityFromCoordinates()

MIT © 2026 UmbraCity

• OpenStreetMap contributors for open geodata
• SunCalc by Vladimir Agafonkin
• MapLibre GL JS — open-source map renderer
• Turf.js — geospatial analysis
• Three.js — WebGL 3D rendering
• Open-Meteo — free weather API

Heat doesn't discriminate, but survival does. The least we can do is make the street a little cooler.

Follow the shadows, not the sun. 🌿