Back in January, I promised that a future post would cover how to go from a street address to latitude / longitude coordinates.  Previously, we have covered how to get the user’s street address, using navigator.geolocation and MapQuest and more recently, we covered converting addresses to latitude and longitude but that wasn’t an actual street address and we have never done this with Mapbox, before.

The Mapbox API is pretty easy, so making a conversion from a street address to latitude / longitude coordinates is just a fetch away.

Going from latitude / longitude to street address is the same case.

Those two pens alone wouldn’t warrant a blog post, so let’s see look at how we would go from a street address to coordinates using Vue.

In the above example, we still have getCoordinates() and we have getCoordinatesButton(). In the second pen below,  instead of using a button to trigger the code, we are using a watcher.

When you change either the latitude or longitude values, it triggers the getAddressFromLatLng() method.

So, where are we going from here?  Lately, I have been playing around with MCTS data and since I built an API back in December that gives you all of the bus stops in the system, I want to try my hand at navigating the user through the system.  At this point, we can identify where the users is and where they are going.  We should also be able to identify the closest bus stop to the starting location and the ending location.  The next blog post will likely cover finding what direction the user is pointing the device since we are going to need that in order to send then to the bus stop.

Have a question or comment about the above code?  Feel free to drop a comment, below.

 

[ Cover photo by Nick Fewings on Unsplash ]