Tag Archives: OpenStreetMap

Coding

State Parks App: Mapping the park locations

Leave a comment

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 ]

Coding

Showing countries on a map using Mapbox

Leave a comment

One of the things that I tried to add to my website, last summer was a map that showed what countries I had visited.  I was never able to come up with a solution that I really liked but this week’s little experiment might fit the need.  You might remember from our previous Mapbox post that we were able to mark the four square blocks that contain UWM’s campus.  If we can do a simple shape, why not a complex one?  Let’s start with the state of Wisconsin.

 

Where is Wisconsin on a map:

See the Pen
Playing with Mapbox – Where is Wisconsin on a map by Joe Steinbring (@steinbring)
on CodePen.

For the UWM example, I drew it myself but for things like states, there is plenty of example data out there.  You will notice that as the shapes get more complex, the size of the data increases.  Next, let’s look at an example of the entire United States.

 

Where is the United States on a map:

See the Pen
Playing with Mapbox – Where is the United States on a map by Joe Steinbring (@steinbring)
on CodePen.

This example is much more complex because of the size of the area and the complexity of the borders.  Like our state example, there is plenty of example data out there, though.

From here, it is a reasonably simple task to mark multiple countries on the map.  Let’s take a look at what countries I have visited so far.

 

Map of countries Joe has visited:

See the Pen
Playing with Mapbox – Countries Joe has been to by Joe Steinbring (@steinbring)
on CodePen.

So, where can we go from here?  I think that the next logical step is to use different colored shading and maybe some sort of legend.  That is going to need to wait for a future post, though.

Have a question, comment, etc?  Feel free to drop a comment, below.

 

[ Cover photo by Thomas Kinto on Unsplash ]

Coding

Showing a location on a map using Mapbox

Leave a comment

Two weeks ago, we looked at how to embed a Mapbox map on a website.  I figured that this time, we would look at how to mark a location on a map.  We are going to look at two methods: dropping a pin on a map to show a location and drawing a shape to show an area on a map.

 

Dropping a pin on a map:

See the Pen
Playing with Mapbox – Drop a pin to show a location by Joe Steinbring (@steinbring)
on CodePen.

 

Drawing a shape to show an area on a map:

See the Pen
Playing with Mapbox – Marking an area on a map by Joe Steinbring (@steinbring)
on CodePen.

 

As you can see above, both methods look very similar two the examples from two weeks ago.  The biggest challenge is to define the GeoJSON values correctly.  Luckily, there are utilities out there to help with the task.

Have a question, comment, etc?  Feel free to drop a comment, below.

 

[ Cover photo by Thomas Kinto on Unsplash ]

Coding

You can add a map to your website without using google maps!

Leave a comment

So, you want to add a map to your website but you don’t want to (or can’t) use Google Maps?  Luckily, you have a few options.  The one that we are looking at today is Mapbox (which uses OpenStreetMap data).  Mapbox has the benefit of a generous free tier (unlike Google Maps), and it’s pretty easy to use.

Let’s take a look at a few examples!

 

Map of Wisconsin:

See the Pen
Playing with Mapbox – Map of Wisconsin by Joe Steinbring (@steinbring)
on CodePen.

 

Satellite view with map for Milwaukee:

See the Pen
Playing with Mapbox – Satellite view with map for Milwaukee by Joe Steinbring (@steinbring)
on CodePen.

 

Outdoors map of UW-Milwaukee Campus:

See the Pen
Playing with Mapbox – Map of UWM by Joe Steinbring (@steinbring)
on CodePen.

 

Satellite view of UW-Milwaukee Campus:

See the Pen
Playing with Mapbox – Satellite View of UWM by Joe Steinbring (@steinbring)
on CodePen.

 

In order to implement the above examples, you just need a Mapbox access token and maybe their API docs.  Easy peasy. 🙂

 

[ Cover photo by Thomas Kinto on Unsplash ]