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. Continue reading How to use Mapbox to convert from coordinates to address and back again
Tag Archives: geolocation
How to autofill an address using mapbox
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. Continue reading How to autofill an address using mapbox
Where art thou: Converting addresses to latitude and longitude.
Previously, we have covered how to identify where the user is, based upon navigator.geolocation and based upon their IP address (there are definitely ways to make IP-based geolocation suck less). I figured that in today’s post, we would look at how to go from an arbitrary physical location (zip code or city name) to latitude and longitude coordinates. Continue reading Where art thou: Converting addresses to latitude and longitude.
State Parks App: Let’s add Bulma and Sorting
Last week, we finally got the park listing working and updated the instance at test.wisparks.jws.app. This week, I figured that we should add Bulma to the project and add sorting.
So, let’s start by adding Bulma and cleaning the code up a little.
See the Pen
Wisc Parks (Part 5): Cleaning up the listing and adding Bulma by Joe Steinbring (@steinbring)
on CodePen.
That improves things quite a bit. Next, let’s add font awesome, a sortBy variable, a sortOrder variable, and the ability to toggle sorting by clicking on a table heading.
See the Pen
Wisc Parks (Part 6): Adding font-awesome and sorting by Joe Steinbring (@steinbring)
on CodePen.
So, there are two issues now. It doesn’t make a lot of sense to sort by the street address and you can’t sort by the property type because it is actually three values (not just a singular string). So, let’s clean things up a bit.
See the Pen
Wisc Parks (Part 7): Cleaning things up a little by Joe Steinbring (@steinbring)
on CodePen.
That is probably enough for one week, so let’s update the test branch of the app on github. We have previously added Bulma / Beufy to Vue CLI app but haven’t added Font Awesome to one, yet. I might drill down on the topic in the future but until then, I would recommend the article “How to use Font Awesome 5 on VueJS Project” for further details. To see exactly what I did, you can check out the commits to the test branch but I ended up needing to tweak the template before Font Awesome was finally willing to behave.
Here is what the final result ended up looking like …
See the Pen
Wisc Parks (Part 8): Changing v-if to v-show and adding spans for FA by Joe Steinbring (@steinbring)
on CodePen.
So, the test instance of the app now looks like this …
I think that the next step is to surface more information through park profile pages (something that I know that I promised at the end of last week’s post).
Have any questions, comments, etc? Feel free to drop a comment, below.
State Parks App: Let’s try that again?
Last week, I got all the way to the end before the damn Google Sheets API stopped working on me. This week, I figured that we would create a JSON file out of the spreadsheet, host it somewhere, and then just use that. I started by creating a CSV file from the Google Sheets document, running it through a CSV to JSON converter, creating a new github repo for it, and then wiring it up for hosting via Render. That resulted in my new api.wisparks.jws.app “service”. Now that we have replaced Google Sheets, let’s try to get the app finally working. Continue reading State Parks App: Let’s try that again?
State Parks App: Let’s actually build something
Previously, we built an API for the State Parks App, using Google Sheets and we set up hosting for the thing. The next step is to actually write the first bit of the thing. When we created the API, we also wrote a little vue.js proof of concept that loops over the data and outputs it as an HTML table. If we combine that with the code that we wrote for “How to sort a list of locations by how close they are to you”, we get a table that lists every park in the system by how close they are to where you (the user) are at this moment.
See the Pen
Wisc Parks (Part 1): Listing state parks by distance from the user by Joe Steinbring (@steinbring)
on CodePen.
The above example loads like shit and is too much information for such a listing but it is a start.
For our next iteration, let’s remove every column except for “Name”, “Property Type”, “Physical Address”, “County”, and “Distance From You”. Since “Property Type” is three booleans (State Park, Recreation Area, and State Forest), we will also need to use v-if to get the job done.
See the Pen
Wisc Parks (Part 2): Listing state parks by distance from the user by Joe Steinbring (@steinbring)
on CodePen.
The above example is a definite improvement but we can do even better. Let’s drop the “Distance From You” column completely if we don’t have that data yet, only show two decimal places for that value, and add a basic loading screen.
See the Pen
Wisc Parks (Part 3): Listing state parks by distance from the user by Joe Steinbring (@steinbring)
on CodePen.
This third iteration is still very much a minimal viable product, but it is enough to justify a dev build. In “Playing with the Vue CLI and Webpack” we transformed one of these pens into a CLI app and in “State Parks App: Hosting and Code Management“, we set up hosting and a git repo for the app.
If you check out the test branch of the WIStateParks repository, you can see the end result of the transformation and you can test it at test.wisparks.jws.app but you will notice that it doesn’t actually work anymore. The night that I finished writing this code, the google sheets API stopped working for me and creating a new one using a duplicate google sheet didn’t help.
So, where do we go from here? I think that the next step might be to save the sheet as a JSON document and just use that instead of the google sheets hack. Have a question, comment, or suggestion? Feel free to drop a comment, below.
[ Cover photo by Mike Benna on Unsplash ]
Playing with the OpenWeather API: The basics
Ever since Apple bought and shut down Dark Sky, I have been struggling to figure out what to replace it with. I figured that this would be a good excuse to play with some weather APIs. I have done this once before but that was with Rivets and YQL (neither of which I can necessarily recommend anymore).
OpenWeather is “a team of IT experts and data scientists that has been practising deep weather data science since 2014”. Most importantly, they have free plans, so you can play with their data rather easily. Continue reading Playing with the OpenWeather API: The basics
How to get the user’s street address, using navigator.geolocation and MapQuest
Let’s say that you have a webform where you are collecting a user’s street address. You can save the user a few minutes by defaulting the value for them. In this example, we are using Vue.js, Axios, a MapQuest API, and navigator.geolocation to first get the latitude and longitude from the client and then send it off to MapQuest to get a physical address.
See the Pen
HTML5 Geolocation (how to get a street address) by Joe Steinbring (@steinbring)
on CodePen.
This example builds off of our earlier Axios / Vue.js 2 APIs 101 post. But you will notice that there is a methods property, now. The this.geolocation() function is then kicked off within mounted().
Have a question or comment? Drop it in the comments and I will try to help.