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

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 ]

Leave a Reply

Your email address will not be published. Required fields are marked *