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 ]