ShadeShift — Walk the cooler way

Maps pick the fastest walk; ShadeShift picks the cooler one. It finds pedestrian routes near live weather and mapped greenery worldwide, then plans tree shade for the hottest streets.

Comment

Inspiration

Every navigation app answers the same question: what's the fastest way there? But during a heatwave, "fastest" often means walking down a treeless, sun-baked street when a slightly longer path through a park would be dramatically cooler. Extreme heat is now one of the deadliest climate risks, and it hits pedestrians hardest — students, outdoor workers, older adults, and anyone who can't just hop in an air-conditioned car.

For Earth Forward, we didn't want to build another dashboard that tells people about climate change. We wanted a tool that changes a decision people make every single day: which way to walk.

What it does

ShadeShift finds the cooler walk, not just the faster one — anywhere in the world.

  • Search any two places on Earth and get real pedestrian routes.
  • Compare a "Cooler walk" against the "Fastest walk", scored by how much of each path passes near mapped trees, parks, and greenery.
  • See it clearly — the chosen route is drawn as a bold blue dotted walking line, just like the maps people already know.
  • Adjust departure time and watch the heat-risk estimate change with the sun.
  • Turn-by-turn walking directions generated live from the routing engine.
  • "Cool this block" planner — for the exact route you chose, it optimizes where to plant trees using a weighted model, then projects cooling, new shade, people protected, and CO₂, and exports a shareable JSON scenario.
  • A transparency drawer that honestly separates live data from modeled proxies.

How we built it

ShadeShift is a React 19 + TypeScript + Vite single-page app rendered with MapLibre GL, and it runs entirely on free, keyless, open data:

  • Photon for worldwide place search (geocoding)
  • Valhalla for real pedestrian routing, alternatives, and turn-by-turn maneuvers
  • Overpass / OpenStreetMap for mapped trees, parks, gardens, and woodland
  • Open-Meteo for live local weather and apparent temperature
  • OpenStreetMap raster tiles for the basemap

The core logic lives in tested, pure functions: a polyline decoder for route geometry, a green-proximity analyzer that samples each route and checks distance to mapped greenery, and a multi-objective tree-placement optimizer. Each planting candidate is scored:

$$ S = 0.45H + 0.35P + 0.20C $$

where \(H\) is heat exposure, \(P\) is pedestrian demand, and \(C\) is canopy gap, then greedily selected with a minimum-spacing constraint.

Challenges we ran into

  • Ambiguous geocoding. Searching "Chikkaballapur" returned the administrative county centroid before the actual city, silently sending routes to the wrong place. We fixed it by ranking results by place type, biasing toward the other endpoint, and labeling each suggestion (CITY, COUNTY, …).
  • Making the route legible. Dashed lines aliased badly on projectors, so we layered dedicated blue route dots above the geometry so the walking path reads instantly at any scale.
  • Being honest about data. Real shade needs satellite thermal imagery we didn't have, so instead of faking it, we built an explainable greenery proxy and clearly labeled every layer as live or modeled.
  • Speed vs. accuracy. Overpass greenery queries are slow, so we render the live route immediately and progressively refine it as the green analysis returns.

Accomplishments that we're proud of

  • It genuinely works anywhere on Earth — we validated it live from Bengaluru to Berlin.
  • We took an honest stance on data integrity instead of overstating our science.
  • A clean, familiar, Google-Maps-style interface that's fully responsive on mobile.
  • 14 passing unit tests, zero lint warnings, and a green production build.
  • It solves one real, daily decision — not a vague awareness goal.

What we learned

  • Small data details (a county vs. a city centroid) can quietly break the entire experience.
  • "Explainable proxy, clearly labeled" beats "impressive number, secretly fabricated."
  • Open geospatial infrastructure (OSM, Valhalla, Overpass, Open-Meteo) is powerful enough to ship a real product with no API keys and no cost.
  • Rendering clarity is a feature: if judges can't read the route, the routing doesn't matter.

What's next for ShadeShift — Walk the cooler way

  • Real shade, not a proxy: integrate Landsat/Sentinel land-surface temperature and building-shadow modeling per route segment.
  • Physiological safety: upgrade the heat score to UTCI / Wet Bulb Globe Temperature.
  • Community planning: let cities import tree inventories, validate candidate sites against utilities and accessibility, and share plans.
  • Guidance: voice-guided heat-safe navigation and alerts during extreme-heat days.

Built With

Share this project:

Updates

Submission history