-
-
Map that shows the route from UMBC to Walmart with the most shade.
Inspiration
Extreme heat can turn a short walk into a serious health risk. Most navigation tools optimize for time or distance, but the fastest route is not always the most comfortable or safest route on a hot day. I built HeatSafe to help people see those tradeoffs before stepping outside.
What it does
HeatSafe is a heat-aware walking route planner. Users can enter a starting point and destination or use their current location. The app presents three easy-to-compare options:
- Coolest route
- Balanced route
- Fastest route
Each option shows estimated walking time, distance, heat exposure, shade, and nearby water access. An interactive map displays the route geometry and a live heat overlay.
HeatSafe also provides the current feels-like temperature, humidity, wind speed, and air quality. A heat advisory summarizes the conditions, while the “How it works” and “Heat tips” pages explain the route signals and provide practical safety guidance.
How I built it
I built HeatSafe with Next.js, React, JavaScript, Leaflet, and React Leaflet. Next.js route handlers provide a server-side layer that communicates with several free, keyless services:
- OpenStreetMap supplies map tiles.
- Nominatim searches for addresses and landmarks.
- OSRM supplies real walking-route geometry, distance, and travel time.
- Open-Meteo supplies live weather, apparent temperature, humidity, wind, and US AQI data.
- The browser Geolocation API lets users begin a search from their current position.
I combined these services into a responsive route-planning interface. The app automatically refreshes conditions, provides address suggestions, lets users swap locations, and allows users to compare routes directly on the map.
I deployed the full-stack Next.js application to Cloudflare Workers using OpenNext for Cloudflare.
Challenges I ran into
One major challenge was combining several independent public services into one reliable experience. Their responses use different formats, so I created server-side functions that validate and normalize the data before sending it to the interface.
Generating useful alternative routes was another challenge. I request several walkable route variations and organize them into coolest, balanced, and fastest choices while keeping the results easy to understand.
Interactive maps depend on browser-only APIs, which can conflict with server rendering. I solved this by loading the Leaflet interface through a client-only boundary while keeping the rest of the project within the Next.js App Router.
Finally, accurate block-by-block shade and public-water data are difficult to obtain from free sources. For this prototype, I clearly present those values as estimates instead of verified measurements.
Accomplishments that I'm proud of
I am proud that HeatSafe is a working, deployed full-stack application rather than a static mockup. It searches real places, draws real walkable routes, loads current weather and air-quality conditions, and makes differences between route options easy to understand.
I also built the project entirely with free, keyless data services. It works on desktop and mobile and does not require users to create an account.
What I learned
I learned how to combine mapping, geocoding, routing, weather, and air-quality services in one application. I also gained experience with geospatial data, asynchronous API requests, interactive maps, responsive interface design, Next.js server routes, and Cloudflare deployment.
Most importantly, I learned that route planning should consider environmental conditions—not just distance and speed.
What's next for HeatSafe
My next step is to replace the prototype shade and water estimates with maintained tree-canopy, sidewalk-shade, public-water, and cooling-center datasets. I would also like to add:
- Forecast-based planning for later departure times
- Personalized heat-risk and accessibility preferences
- Cooling-center and indoor-rest-stop locations
- Route alerts when conditions change
- Broader coverage beyond Baltimore
- Offline and progressive-web-app support
My long-term goal is to make heat-aware navigation practical for pedestrians, outdoor workers, students, older adults, and anyone traveling during extreme heat.
Log in or sign up for Devpost to join the conversation.