Mango Maps

Inspiration

This map project was inspired by those fun natural disaster simulator sites that lets you wreak havoc upon the earth. We wanted to have that silly aspect in the project, but also provide a more detailed POV for anyone who's interested in learning more about the city they live in.

What it does

This project can be summed up as an aggregate of various geographical data sources all in one place. Its purpose is to provide an architect, city planner, tourist, and etc with as much information about a place as possible. Our project currently displays information such as region air quality, individual building characteristics, areas susceptible to flooding, evacuation centers in case of disasters, and fun visualizations of theoretical disasters.

How we built it

Our web application is made with Next.js and is hosted by Vercel. We render our map tiles and layers using Mapbox GL. Our data is fetched from various sources ranging from Google Maps API to government data reports. CSS styling is done through Tailwind CSS.

Challenges we ran into

Working with map APIs for the first time as a team was challenging to start with, but we gradually got better. Getting the visualizations and layers to render nicely was also a challenge.

Accomplishments that we're proud of

As with every Hackathon, we're proud of the fact that we managed to dive deep into an unknown tech and produce something substantial from it. Most of us have never coded a website before, let alone work with web APIs. We're proud of our perseverance despite having the card stacked against us.

What we learned

We learned how to work with maps APIs and display them in a digestible manner. We also learned to split up our workloads evenly so that no one is idle during the Hackathon.

What's next for Mango Maps

More information, more data, and more analytics! We have plans to add building age, region weather forecast, pollen, street traffic, and etc. With all of this information, we also have plans to train an AI off all this data and have it provide summaries and suggestions for optimization where applies (road traffic, building integrity, etc.).

Built With

• google-maps
• google-places
• mapbox
• next.js
• tailwindcss
• vercel