A creative way to spice up your travelling!
Draw an image and it will be replicated in a location of your choosing on the map. You can then download a file containing this route and use it in your own maps applications.
This web application was built with Next.js and FastAPI.
Millions of people go on walks or ride their bikes every day. But how do they decide where to go? Some may struggle with finding out how to make their walking routines exciting and need a flash of inspiration. With LAMaps, there's no need to struggle! With a few simple strokes, our application generates an exercise route that users can download and follow as part of their daily routine.
Users draw images on a canvas. After submitting the result, the map will display a superimposed route of real-world roads closely matching the submitted drawing. The user can follow this generated for their walking or biking session. The user can also download a file containing the route that can be imported into into compatible map applications to capture their progress outline. This application aims to gamify the exercise selection process, encouraging users to go outside and do some exercise!
We built the frontend with Next.js App Router. The map and drawing tool functionality are provided by React Leaflet and Excalidraw respectively. We used these tools because they were open source and provided extensive documentation on how to use their libraries.
We built the backend with FastAPI, a well-known Python framework for constructing website backends. We created routes that process the drawings provided by a user in Excalidraw and provides a list of coordinates in latitude and longitude through a complex algorithm that represent the drawing superimposed onto roads within a certain area of a map.
One of the most challenging parts of this project was developing the algorithm that generates the list of coordinates. In order to do this, we needed to have a strong understanding of image processing, using algorithms to find a path from the start to the end of the image, and geography to be able to translate the path to coordinates. We used OpenCV to process the image and several graph algorithm libraries that eventually helped us generate the coordinates.
The main challenge of the frontend was providing intuitive and interactive interfaces for the user to input their drawing, and convey that information to the backend along with sufficient context about the location's coordinates and bounding boxes. We had to ensure that calls to external APIs were limited, such as the fuzzy-search capability, to avoid overloading their resources.
We are proud of our sophisticated image processing. Processing user drawings required viewing the image as a graph. To accomplish this, we implemented image processing algorithms to get the representation. This allowed us to then use the Chinese postman algorithm to provide the user with a valid traversal of the graph Additionally, we are proud of our UI as it includes complicated components such as react-leaflet and Excalidraw.
We're also proud of the intuitive user interface that we built. It uses reputable open source libraries to display an interactive map for the user to view their location and biking route, a fully-featured whiteboard for the user to fully express their artistic vision, and a fuzzy location search for easily finding locations.
We learned a lot about the practical application of graph algorithms. When working on image processing for a user-specified drawing, we implemented a version of the Chinese postman problem so that the user could run the route without having to skip to different locations. Additionally, we learned a lot about how geographical data is stored and manipulated through tools such as networkx and geopandas.
We learned how to integrate UI libraries (DaisyUI, TailwindCSS) with unrelated application libraries (leaflet, Excalidraw) to built a responsive and cohesive interface for the user to interact with the backend capabilities.
- Allowing users to save their drawings.
- Integrating accounts with Maps applications (e.g. Google Maps, Apple Maps).
- Integrating the application into a mobile application or PWA to allow users to generate routes on the fly.
- Allowing users to import an image, and a route to be generated by the image without needing to draw.
