Last year, I posted a lot about how I was building a state parks app to help with my goal of eventually visiting every park in the Wisconsin State Parks system. The most recent post was around November, though. Well, I am working on the app again and I am hoping to have it finished this month (by Memorial Day, ideally).
I haven’t talked about regular expressions much on this blog and that is mainly because I don’t feel like I understand the topic enough. We are going to work on that, today. Regular expressions (or regex) are patterns used to match character combinations in strings. There are regex strings to test for valid phone numbers, email addresses, IP Addresses, credit card numbers, and much more. In today’s post I figured that we would look at three examples of how you can use them in vue. Continue reading How to use regex and vue to validate form input→
I found myself trying to figure out how to do an interface consisting of a series of cards that slide off to the side as you finish them. Let’s start by looking at the sample app before the addition of the sliding magic. Continue reading Sliding transitions, using Vue and Bulma→
Just about every vue demo that I have done on this blog has involved Axios. I am not sure that it is necessarily needed all the time, though. I wanted to take this blog post as an opportunity to see if it can be replaced with fetch. Continue reading Do you really need Axios in your Vue app?→
Earlier this year, we looked at Mapbox and how to use it to show a location on a map. I figured that now that we have a listing of park locations, it is time to look at mapping them. This might be a fairly brief post since everything that we are doing here has been done before in earlier posts.
So, unlike the earlier examples, this one uses vue. As you can see, it gets the park data from the API, and then the map is instantiated within the watcher. The markers are then created within a for loop. The problem that you might notice is that the parks, recreation areas, and forests all look the same, so you need to click on the pin in order to see what the property is. Next, let’s try color coding the pins based upon the property type.
The above example is very similar to the first except for the fact that the markers are now added like new mapboxgl.Marker({ color: "#0000ff" }) instead of new mapboxgl.Marker(). A condition like if(this.parks[i].statePark == 'TRUE'){} makes the decision about which color the marker should be. State parks are blue, forests are black, and recreation areas are red.
Using the vue router example from last week, we should be ready to integrate this map into test.wisparks.jws.app but there are one or two more things that I want to explore before we do that. Next up is park profile pages (maybe). 🙂
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.
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.
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 …
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.
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?→
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.
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.
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.