We thought it'd be interesting to use open data to compare the quality of life in certain areas of Prague.

What it does

Based on the user's preferences (the user chooses what factors he cares about the most - so far we have how many parks there are in the vicinity, how close it is to the nearest subway station, playground, viewpoint or the city centre and how high the air pollution rate is in the area), our web app creates a quality of life heatmap over Prague. The user can also click anywhere on the map to see the exact QOL percentage of that spot and see how far the closest subway station, playground, viewpoint or a park is.

How we built it

We used the Google Maps API to render an interactive map. At first, we though we were going to use a built-in heatmap feature of the map that we were going to use, but we couldn't find any implementations that would fit our needs, so we decided to come up with our own solution - use various open data (mostly in the GeoJSON format) to generate an image representing our QOL heatmap that we thereafter rendered as an overlay over our map. And thanks to the Google Maps "Overlay" feature, it works really seamlessly even when the user pans or zooms the map and you couldn't tell it's just an image being rendered over a map. This approach also grants us amazing performance, as we generate the image on the server-side and then simply fetch it to the client-side. Additionally, we only have to do this once after we change our datasets.

Challenges we ran into

We spent a lot of time deciding which map we were going to use and then we actually spent the first 6 hours of the Hackathon attempting to use the Here and then the Google maps with React, which was a horrible idea. While React is great for many things (plus I love it!), it really isn't the way for projects like this one.

Accomplishments that we're proud of

We're really proud of the data visualization and the performance that we achieved in the end.

What we learned

We learned a lot about handling geo data and working with the Google Maps API. We also learned that React _ can't _ be used for everything :(

What's next for QOLmap

In the upcoming days, we would like to include many more datasets in our app, providing an even more accurate QOL estimate and also add some more features to our app, such as not only being able to see the heatmap, but also a normal map of Prague split into districts where you can easily see which district has the highest QOL in Prague.

Share this project: