Safety Heat Map

Inspiration

While walking and biking around campus seems relatively safe, I have always been scared to venture outside the comforts of campus. Stories from friends and safety alerts have made me more aware of potential risks in different areas. I wanted to create a tool that helps students and community members make informed decisions about their routes by visualizing safety concerns in real time, while also being able to contribute their experiences.

What it does

Safety Heat Map is an interactive mapping tool that allows users to report safety concerns, such as poorly lit areas, high-crime zones, or dangerous intersections. These reports are used to generate a heatmap, where different levels of severity are color-coded, giving users a quick visual representation of safer and more concerning areas.

How we built it

Frontend: Built using React with the Google Maps API for rendering the map and heatmap visualization. Backend: Firebase Firestore stores user reports, including location, severity level, and comments. Real-time Updates: Firestore’s real-time database updates ensure that new reports instantly appear on the heatmap without requiring a page refresh.

Challenges we ran into

There were unexpected difficulties ensuring the heatmap displayed the correct gradient based on severity levels. Fine-tuning the map interactions and marker placements required debugging and API documentation research.

Accomplishments that we're proud of

I'm proud of being able to successfully implement real-time data updates so users can instantly see new safety reports in such a short amount of time. This was my first time using React without following a tutorial, so I definitely learned a lot. I'm also proud of being able to help users make better navigation choices and being able to integrate Google Maps API with Firebase to deliver a seamless, interactive experience.

What we learned

I learned a lot more about passing props between parent and child. I gained a lot more experience using Google Maps API and learning all the different features it offers.

What's next for Safety Heat Map

In the future, I want to be able to implement a login system to track user reports and prevent spam. I also want to be able to allow users to filter reports based on categories like lighting issues, crime reports, or hazardous conditions. It would also be nice to expand the platform to a mobile app for easier reporting and navigation. Furthermore, I want to integrate Crimeometer's API to add crime reports to the heat map. That was my original idea, but unfortunately, there were no free APIs that I could use without having to be approved (and the approval would take more than a couple of hours).

Built With

• firestore
• google
• javascript
• react
• vite