ECE Discovery Project

11/18/2022

Node JS Vue Leaflet Tailwind

My ECE Discovery Project at Georgia Tech was called Buzz Nav. It was a project focused on making campus navigation much easier. It was heavily inspired by larger mapping services like Google Maps.

Buzz Nav Logo

How it was Made

Buzz Nav was created using various tools and frameworks. The backend was created using Node JS, Fastify, and SQLite 3. The frontend was created using Vue, Tailwind CSS, Leaflet, and Axios.

There are two main portions. The editing server/client, and the navigation server/client. The editing and navigation portions are separated for ease of use and security reasons.

Map Editing

The map editor was built using Leaflet and Tailwind CSS. It was built to be as simple as possible, while also providing powerful tools to create the best maps possible. The editor allows for the creation, deletion, and editing, of nodes, paths, and layers.

Nodes are layers on the map. The include information such as position (lat and lng), name, and description. Paths are lines that connect nodes. They include information such as the nodes they connect, and the distance that they span. Layers are groups of nodes and paths. They help differentiate between different buildings, floors, and other areas that are separated from the “raw earth”.

By connecting nodes through paths, you are slowly able to build up detailed maps that can be easily navigated by students using the navigation client.

Buzz Nav map editor

Map Navigation

Using the map navigator, users are able to navigate the maps that had been created through the editor. The navigator was also built using Vue and Tailwind CSS. Navigation is done by the server using the database of nodes and paths by calculating the best route using the A* path-finding algorithm. The client then uses the data to display the map and the route found by the server.

Challenges

There were several challenges that were faced when creating this project.

First, was how to calculate the distance between two points on the earth. This may seem trivial, but it is actually quite difficult. However, the math behind it is quite simple and is only basic trigonometry. The formula that I ended up using was called the Haversine Formula. In theory, it is not perfectly accurate, given that the earth is not a perfect sphere, but it is close enough for simple navigation.

The second challenge was speed. The A* algorithm is not the fastest algorithm in the world. Moreover, as the map dataset grows, the algorithm will become slower and slower. To combat this, I created the base for an SVG map design system. This means that where traditional mapping services would use more nodes to add detail to the map, Buzz Nav can add detail by simply creating an SVG line between two nodes. This will reduce the amount of node required, thus increasing speed, without having to compromise map detail. This is also where the option to manually provide a path’s length comes into play. Since the path is only stored as a straight line, manually providing the path length can make up for an missed length from removing the “detail nodes” from the database.

Result

In the end, Buzz Nav was a successful discovery project. It was effective in providing navigation services, and will one day be a great service for students. Overcoming the challenges it posed and discovering new topics that I wasn’t even aware existed was a lot of fun. It is still very much a work in progress, but it is still an amazing start for a project that I am very proud of.