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: JavaScript
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
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.
Three ways to create a modal dialog
Today, we are going to look at three ways to add a modal dialog to your app. The first option just uses CSS and JavaScript (no special libraries). The second option uses Bootstrap (a topic that I haven’t touched in a few years). The third and final option uses Bulma. I looked back at my previous posts and don’t think that I have covered this, yet. I am purposely trying to keep the three examples as similar to each other as possible. There is a button that opens the modal and you can close it by either clicking on the space outside of the modal or on the X in the corner of it.
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.
How to know your user
There are times when it is very important to know as much as you can about the user of your application. A good example is how I need to know where the user physically is in order to calculate the distance between them and the park in the state parks app. Another example is if the user is on a mobile device vs a desktop or if they are online or not, so that you know what to show them and how to do it. Let’s take a look at a few ways you can gather information about the user. Continue reading How to know your user
State Parks App: I made some new APIs for the app
Last week, I wrote about creating a cloudflare worker. When I created that worker, I knew that I wanted to leverage that for the state parks app. This week, I created three new workers: one to get the user’s location, one to get the list of parks, and one to get an individual park. Let’s take a look. Continue reading State Parks App: I made some new APIs for the app
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 ]
New things in ECMAScript 2021: String.prototype.replaceAll()
This is going to be a pretty quick post (mainly because I am on vacation, next week). I was skimming through what is new in ECMAScript 2021 and spotted replaceAll(). It is already supported in everything except for Internet Explorer. Let’s take a look at a quick example.
See the Pen
String.prototype.replaceAll() Example by Joe Steinbring (@steinbring)
on CodePen.
The reference is within computed properties but this definitely does not require vue. As you can see, it works the same as replace() but it just doesn’t stop at the first instance.
Have any questions, comments, etc? Feel free to drop a comment, below.
[ Cover photo by Jamie Street on Unsplash ]