Category Archives: Coding

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

I didn’t successfully finish Hacktoberfest 2021 and I’m ok with that

Last month, I said that I was going to give Hacktoberfest a try this year.  Now that the month is over, I can say that I didn’t successfully make four contributions.  As it turns out, it was a little more intimidating of a task than I thought it would be and working on things like this blog and the state parks app was a little more interesting.  I might try again next year but in the meantime, I have other stuff going on (including a Drake-themed post that should be dropping on Thursday).

Have any questions, comments, etc?  Feel free to leave them below.

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

Adding dark mode to your web app

Almost two years ago, I looked at how to use prefers-color-scheme to add “dark mode” to a website.  It isn’t exactly a difficult change to make, so I figured that we could take this week to add it to the State Parks App.  The last time we looked at this, it was supported by everything except IE and Edge.  Now, it is supported by Edge as well.  Like I mentioned last week, Internet Explorer is being EOLed on June 15, 2022, so it might not matter anymore that this doesn’t work with IE. Continue reading Adding dark mode to your web app

I decided to give Hacktoberfest 2021 a try

I try to push myself outside of my comfort zone from time to time.  That is part of reason why I tried giving a conference talk a few years ago (I did three in the end) and why I started using this blog more often.  One thing that I have felt I have felt very self-conscious about is OSS contribution.  You can probably count the number of pull requests that I have made on two fingers? Continue reading I decided to give Hacktoberfest 2021 a try

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 ]