Pod #9 - Jackson Tran, Yan Sun

What it does

Coordinect is a map visualizer that allows users to visualize the shortest distance between the user's selected start and destination location on Open Street Map.

How we built it

The application uses two outside APIs: Geoapify and Leaflet.js. We use Geoapify to fetch the geolocation information of the address, and we use Leaflet.js to plot the location of the address using latitude/longitude. The UI was designed through Figma and programmed using React, HTML, and CSS.

Challenges we ran into

Rerender leaflet map upon passing useState props is a bit tricky. We searched our solutions in the StackOverflow community to seek similar issues.

Accomplishments that we're proud of

We were able to plot the coordination of the location to the map and visualize the distance between the two coordinates.

What we learned

We were able to polish up our front-end skills and learn about geocoding, geocoding APIs, and OSM maps.

What's next for Coordinect

A cool future addition would be to visualize routes between two selected Locations. We were also thinking of supporting more than 2 selections of locations.

Built With

Share this project: