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
Tag Archives: Vue.js
How to calculate the sunset and sunrise times in JavaScript
Over the holidays, I created Good Morning, Milwaukee! (a Mastodon bot that posts a “Good Morning” toot every morning). The problem is that it hasn’t been behaving correctly since shortly after I finished it. I want to simplify it a bit, so I can make it a little less fragile. The first component of the message that I decided to focus on is the bit that gets today’s sunrise and sunset. Continue reading How to calculate the sunset and sunrise times in JavaScript
Are you still working on the State Parks app?
Yup, I am.
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).
If you want to check it out before then, the testing environment is at https://test.wisparks.jws.app and you can follow the progress at https://github.com/steinbring/WIStateParks/.
Beyond that, if you have any questions, comments, etc, feel free to drop a comment below.
How to use regex and vue to validate form input
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
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.
Sliding transitions, using Vue and Bulma
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
Do you really need Axios in your Vue app?
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?
State Parks App: Mapping the park locations
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.
See the Pen
Wisc Parks (Part 9): Mapping the locations of parks by Joe Steinbring (@steinbring)
on CodePen.
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.
See the Pen
Wisc Parks (Part 10): Setting map markers by property type by Joe Steinbring (@steinbring)
on CodePen.
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). 🙂
[ Cover photo by Thomas Kinto on Unsplash ]
Playing with Vue Router
Back in July, we looked at how Vue CLI and webpack work and I figured that it was time to look at Vue Router, as a follow-up. Vue Router is going to be pretty necessary for the state parks app, moving forward.
Like I did last time, I used VueCLI and Bulma. I also put the code on Github and used Render to host the end-result at vue-router-demo.jws.app. If you look at the repo, you will find three .vue files in the src/components folder: About.vue, Pizza.vue, and PizzaListing.vue. If you look at src/main.js, you can see that the routes are set up like …
import About from './components/About.vue';
import Pizza from './components/Pizza.vue';
import PizzaListing from './components/PizzaListing.vue';
const routes = [
{ path: '/', component: About },
{ path: '/pizza/:id', component: Pizza },
{ path: '/pizzalisting', component: PizzaListing }
]
This makes the About file the file that loads when you go to the root of the site, the Pizza file what loads when you go to /pizza/[something], and PizzaListing loads when you go /pizzalisting.
If you have any questions, comments, etc, feel free to drop a comment below.
[ Cover photo by Peter Herrmann on Unsplash ]
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.