We were inspired by the wealth of open data provided by OpenStreetMap, and decided we wanted to create a web application that utilized this tool.

What it does

The web app displays the shortest path between a series of pub and bars within a given area. This may be the currently viewed area or a polygon drawn out by the user.

How we built it

  • Frontend built using React, Mapbox-GL and Bootstrap, hosted on Netlify, behind a domain name
  • Overpass for querying OSM
  • Self-hosted Valhalla instance for efficient OSM-based routing
  • Django API for handling the complexities of parsing Valhalla query results

Challenges we ran into

  • Team members had minimal previous use of React, so had to learn during the hackathon
  • Overpass has a very *interesting* query language that took some time to adopt and understand

Accomplishments that we're proud of

  • We were able to create a intuitive UI using React
  • That we able to utilize a wide variety of tools & technologies to create a functioning application

What we learned

  • Learnt how to create a component-based UI using React
  • How to make use of Reacts Context API to manage global state
Share this project: