I have been poking at the Milwaukee County Trasit System (MCTS) APIs over the past few weeks. A few years ago, I tried to write a bus app using Angular and it just didn’t work out well. I figured that I would try it again, using what I have learned since then. The first step was to build out a data infrastructure using Cloudflare Workers and Cloudflare KV. The end-result of that is what drives the MCTS mastodon bot. The workers JSON api returns every bus stop in the system, along with the route, direction, and location. The next step is to figure out where the user is and where they are going. That is the subject of today’s post.
We have covered binding and how to get a user’s street address based upon navigator.geolocation before but I don’t think that we have done this, yet. I want to start with an address prompt and end up with a latitude and longitude coordinate set. We came close when I covered how to convert cities / postal codes to latitude / longitude coordinates but in this version, you are going to able to enter a house number and street.
See the Pen
Address Picker – 1 by Joe Steinbring (@steinbring)
In the above example, we have an address prompt and the form fields are bound to variables in the app. The values assigned to those variables dictate the values of the form fields and vice versa.
At this point, we are going to default those address values to null and bring in the use of the Mapbox Address Autofill API.
See the Pen
Address Picker – 2 by Joe Steinbring (@steinbring)
If you open the network tab in Developer Tools, you can see the value for the latitude and longitude associated with the selected address but for the life of me, I can’t figure out how to get to those values. You also have the question of how to get the values in the case where the user didn’t accept the address suggestion. So, how do you handle getting the coordinates?
See the Pen
Address Picker – 3 by Joe Steinbring (@steinbring)
In the above example, I added a watcher that looks for changes to the postal code, makes sure that the address has values that aren’t null, and then triggers an alert if that’s the case.
In the next post, we will look at how to actually get the corresponding latitude / longitude coordinates.
[ Cover photo by Brian Patrick Tagalog on Unsplash ]