Canopy

Inspiration

During hot summers in cities like Pune, walking outside can feel like stepping into an oven. Urban heat islands and concrete streets reflect solar heat, making pedestrian travel extremely uncomfortable.

When we opened Google Maps to plan a walk, we realized a fundamental flaw: existing navigation tools only care about speed. They route pedestrians along wide, tree-less main roads under direct sunlight to save 60 seconds of walking time, completely ignoring thermal comfort. We were inspired to build Canopy Navigator—a mapping assistant that helps pedestrians find the coolest, most shaded route, prioritizing well-being and comfort over raw speed.

What it does

Canopy Navigator calculates and compares two distinct routes for pedestrians:

1. The Fastest Route (Direct Sun): The traditional, shortest street route (shown in dashed slate-gray) which often exposes walkers to maximum solar heat.
2. The Coolest Route (Shade-Optimized): A comfort-optimized alternative (shown in solid orange) that routes pedestrians through parks, gardens, and tree-lined side streets.

The application displays dynamic metrics for each route, showing the estimated travel time, the percentage of shade, and the temperature reduction (e.g., feels up to 5°C cooler!). Walkers can toggle between the options to decide what suits them best.

How we built it

We built Canopy Navigator using a modern monorepo structure:

• Frontend: Developed in Next.js and TypeScript with vanilla CSS for clean styling. We used MapLibre GL to render an interactive 3D map environment of Pune's street grid and buildings, powered by MapTiler tiles.
• Backend: A lightweight, high-performance Python FastAPI server hosted on Render, handling address geocoding and routing calculations.
• Routing Engine & Algorithm: We integrated the Open Source Routing Machine (OSRM). Because standard routing machines only return a single path for walking, we designed a custom perpendicular vector midpoint-displacement algorithm in Python. It calculates the midpoint of the route, projects a perpendicular offset to identify cooler side-streets or local parks, and routes the pedestrian through that waypoint to generate a genuinely cooler path.

Challenges we ran into

• OSRM Alternative Limits: By default, OSRM rarely returns alternative routes for foot traffic because the streets are so close together. We had to implement a custom coordinate vector math algorithm in Python to dynamically construct midpoint waypoints and force the engine to route along different paths.
• Layer Depth & 3D Extrusions: On MapLibre GL, the 3D building layer initially rendered on top of our route lines, hiding the dashed paths beneath city blocks. We had to restructure our map layer initialization to draw route layers on top of building extrusions.
• CORS & Multi-Host Deployment: Setting up cross-origin requests between Vercel (frontend) and Render (backend) caused CORS errors initially. We resolved this by configuring safe production CORS middleware on our FastAPI app.

Accomplishments that we're proud of

• Dynamic Waypoint Algorithm: Getting the backend to reliably generate realistic, walkable alternative paths without requiring giant, memory-heavy GIS tree-map datasets.
• Stunning 3D Visuals: Creating a clean, premium user interface with smooth transitions, custom route comparisons, and beautiful 3D building models.
• Fully Hosted & Production-Ready: Deploying both frontend and backend to production servers, allowing anyone to try it live from their browser!

What we learned

• We deepened our knowledge of spatial coordinate systems, vector geometry, and map layout configurations in WebGL-based map engines.
• We learned how to structure and package a monorepo for seamless multi-platform deployments (Next.js on Vercel, Python on Render).

What's next for Canopy

• Real Satellite Heat Map Integration: We plan to integrate Land Surface Temperature (LST) datasets from Landsat/MODIS and tree canopy density maps (like Google's Tree Canopy API) to calculate shade indices based on actual tree counts and sun angles.
• Multi-City Support: Scaling the geocoding bounds to allow pedestrians in any major city globally to find shaded routes.
• Air Quality Routing: Adding options to route walkers away from high-pollution corridors or active construction zones.

Built With

• fastapi
• git
• github
• httpx
• maplibre-gl
• maptiler
• next.js
• osrm
• python
• react
• typescript
• uvicorn
• vercel