Maps are built on data – cartographic data and cartography is one of the most fundamental skills for data visualization. Today, we’re going to learn one of the most basic ways to present a map in a web page – namely, via embedding from a widely used map server. There are just a few examples below.
Of course, if you want to embed a map somewhere, then you’ve got to have somewhere to embed it! The specific place where we’ll do are embedding today is our Discourse forum, which we’ll be using a lot as the semester progresses.
Slippy maps
A slippy map is an interactive web map that let’s you pan and zoom to get a highly detailed view of a region. They are typically generated by seamlessly stitching together a bunch of tiles obtained from some powerful web server to form a larger region. The technique was first popularized by Google Maps, though that was certainly inspired (and even built upon) other technologies. They are often used for navigation but also make sense in any situation where detailed accuracy of a region is necessary.
A custom map
I built the map below using a Javascript library called Mapbox. You can use the menu in the upper left to check out some of my favorite bike rides in the Asheville area.
Of particular interest for us is the fact that this map was embedded into this WordPress site from my custom built webpage.
Google maps
I’m sure you all know about Google Maps. What you might know is how easy it is to embed a Google map into a website. Here’s a Google Map centered at UNCA’s flagpole.
And here’s another map that illustrates driving directions from UNCA to OSU.
Open Street Map
If you’re interested in open source software and mapping you should definitely check out OpenStreetMap! Here’s an OpenStreetMap of UNCA:
View Larger Map
Let’s Embed
OK, it’s time to move this show over to our Discourse forum, where we can create some stuff of our own!