Web Mapping Quick Start Session 2!
Last week I gave you some homework. Let's see some of those web maps.
Head to bit.ly/wmqs-map-samples and add your name and map to the list.
Which map did you add and why?
Let's get into groups of ~4. Pick one of the maps and talk about it together. What cartographic elements do you notice? What story does the map tell? What do you like or dislike about it?
Nice work!
The URL if you want to follow along is bit.ly/wmqs-f16-s2
Today we are going to talk about tools for web mapping.
Some of these we call platforms.
What is a web mapping platform?
Think of the tools people use to make quick and dirty web maps.
CARTO
Mapbox
ArcGIS Online
Common features of web mapping platforms:
Feature #1: They don't require any programming
So, no HTML, CSS, or JavaScript.
And you don't have to worry about cross-browser functionality.
Feature #2: They provide some options for cartographic styling.
So, you can customize the basemap, symbology, and info boxes.



Wall Street Journal + CartoDB
Feature #3: They typically provide some add-ins for functionality.
Such as: a time slider or custom scrolling through a sequence of features.
For example, NYC Henge shows the shadows cast across the NYC street grid during sunset each day of the year:
Feature #4: They typically include hosting, so you don't have to worry about setting up web servers, etc.
However, there are some drawbacks to mapping platforms:
Drawback #1: The maps can be tough to incorporate into existing websites, both thematically and technically.
Thematically, the styling options may not be sufficient to allow you to match the look and feel of a website.
Technically, you will either have to include your map on your website with an external link....
Click here to view a map of Ellis Act evictions in San Francisco!
... so visitors are navigating away from your other content to see your map.
Or you'll have to embed your map with an iframe, or a website within a website.
... which may (will probably) take extra time to load.
Otherwise, you'll have to use JavaScript.

(We'll talk about that later and next time when we talk about web-mapping from scratch.)
Drawback #2: You are stuck in the basemap versus content paradigm (e.g. mashups) with data layered on top of reference layers and labels.
Next time we will talk about key concepts in cartography, such as visual hierarchy and creating visual arguments, but quickly:
Visual hierarchy is the idea that what you're trying to emphasize on the map should be the first thing your eye is drawn to.
Displaying your mastery of these concepts can be tough if you can't integrate your data with your basemap layers.
We see a lot of tricks with transparency in the face of cartographic dilemmas like this.
There are ways around this.
For example, the Google Maps API allows for selective styling of basemap layers that you can intersperse with your data...
...but most people don't bother to do that.
GL maps will help with this, too...
... but that technology is not widely available yet.
Drawback #3: Almost every map pans, zooms, and has info boxes
This cookie-cutter approach has the advantage of giving people what they expect...
... but sometimes it can be overkill:
And it limits the diversity of cartographic techniques you can use.
Drawback #4: Mapping platforms typically cost hella $$$
Pricing structures vary, but may include monthly fees for hosting, fees based on usage, and licensing fees.
That said, sometimes a web mapping platform is the expedient way to get things done.
And the base-level free accounts are great for learning and playing around.
Today we will play with some web mapping platforms:
Google Maps
Mapbox
CARTO
You might be asking, "What about Leaflet? What about JavaScript?"
Today we are going to focus on building maps without doing any programming.
You can definitely do more with code, but it's important to see what you can do without it.
We will also do three exercises.
In Exercise 1 we will play with static maps from the Google Maps API in the browser.
In Exercise 2 we will compare the Mapbox static API.
In Exercise 3 we will get fancy with CARTO.
If we we have time and the lab computers are willing, we'll also take a look at some GL functionality and styling examples with Mapbox Studio
Before we start our first exercise, let's recap.
Web mapping platforms take away some ability to customize, but they are great for making quick and dirty web maps.
Other benefits include: your browser is your principal tool.
Brian Timoney wrote a post last year on his blog MapBrief titled "In Praise of the Static Map". He writes:
"You need to make a map. And you want to use the web. If you’re a geospatial professional it’s likely you misapprehend the task in 3 crucial ways: If time is money, then my money-making advice to you is…embrace the Static Map."
He is not saying that all interactive maps are overkill or difficult to make.
It turns out that it is just quite easy to make custom static maps in the browser!
Quickly, let's talk about sending information around online.
Ever notice how URLs get really long after you submit a form on a website?
That's your browser sending the information you entered to the server where the website lives.
This information gives the server extra instructions on how to do whatever it's doing.
In searching for "maps" on Twitter, the URL that got sent was: https://twitter.com/search?q=maps&src=typd.
This URL includes two pieces of information: q=maps and src=typd.
q=maps is the search query. src=typd tells Twitter that I typed in the search request rather than clicking on a link.
Those pieces of information helped Twitter give me the information I wanted.
A cool thing: this can apply to maps too!
We can send information to a server in our URL that will make a map for us.
Let's try it out with the Google Maps Static API.
Take a look at this map:




All of the customization in this map was made in the URL, which is the magic of the Google Maps Static API.
The URL for this map is:
https://maps.googleapis.com/maps/api/staticmap? center=Brooklyn+Bridge,New+York,NY &zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794 &markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Clabel:C%7C40.718217,-73.998284
Gah, so big! Each piece of the URL corresponds with a piece of customization on the map. Let's break it down.
Go to bit.ly/gstatic to open this link in your browser.
https://maps.googleapis.com/maps/api/staticmap?
center=Brooklyn+Bridge,New+York,NY
&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue
%7Clabel:S
%7C40.702147,-74.015794
&markers=color:green
%7Clabel:G
%7C40.711614,-74.012318
&markers=color:red
%7Clabel:C
%7C40.718217,-73.998284
The base URL is https://maps.googleapis.com/ maps/api/staticmap?. Everything after that is something we can customize. These settings are divided by &'s.
The first thing we can customize is where the map is centered.
https://maps.googleapis.com/maps/api/staticmap?
center=Brooklyn+Bridge,New+York,NY
&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue
%7Clabel:S
%7C40.702147,-74.015794
&markers=color:green
%7Clabel:G
%7C40.711614,-74.012318
&markers=color:red
%7Clabel:C
%7C40.718217,-73.998284
In the URL bar in your browser, change center=Brooklyn+Bridge,New+York,NY to center=San+Francisco,CA. Refresh the page.
Our new URL should look like this:
https://maps.googleapis.com/maps/api/staticmap?
center=San+Francisco,CA
&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue
%7Clabel:S
%7C40.702147,-74.015794
&markers=color:green
%7Clabel:G
%7C40.711614,-74.012318
&markers=color:red
%7Clabel:C
%7C40.718217,-73.998284
And our new map should look like this:




Cool, right? What else can we customize?
zoom=13 is the zoom level of the map. We will talk more about zooms next week, but for now enter a number between 0 and 20.
size=600x300 is the size of the map in pixels.
maptype=roadmap is the basemap style. Try terrain instead.
Then we have the markers= properties, which are a little more complicated.
The map markers themselves have a series of customizable elements separated by %7C, which is the ASCII-encoded version of | (pipe).
markers=color:blue
%7Clabel:S
%7c40.702147,-74.015794
color:blue defines the color of the marker.
label:S defines the label of the marker.
40.702147,-74.015794 defines the location of the marker.
Now that we know more about markers, how would you change the URL for our SF map?
Try adding your own marker somewhere in San Francisco.
You can read more about the Google Maps Static API here.
After we take a break, let's compare this with the Mapbox Static API.
Before the break: create or sign in to your first free account for today.
Head to Mapbox.com.
In the top right corner, sign in or sign up.
BREAK
So you're all signed in to your Mapbox account, yes?
Awesome! Let's take a look at Mapbox's Web Services (which includes the static API).
Head to mapbox.com/api-documentation/.
Note: access tokens.
Some APIs require identification when you make a request. This is for analytics or to make sure you aren't doing anything icky.
(Like violating the terms of service, for example).
Click where it says "Maps" in the left column.
Why are we talking about these things?
Let's click on Static (Classic) in the left column and see!
"The classic Mapbox Static API lets you request static maps from tilesets, with the option to add vector data as overlays. Static maps are standalone images that can be displayed on web and mobile devices without the aid of a mapping library or API. They look like an embedded map without any interactivity or controls."
This is just like we saw with the Google Maps Static API! But there are a couple differences. Let's look at the first example URL.
http://api.mapbox.com/v4 /{mapid}/{lon},{lat},{z} /{width}x{height}.{format}? access_token=<your access token>
What makes this different than the Google Maps Static API?
Instead of using a descriptive location we are using latitude and longitude.
z instead of zoom
mapid instead of maptype
width and height instead of size
"You can use more than one {mapid} to combine layers into one by comma separating the list of map id strings {mapid,mapid}."
(This is helpful if you make custom styles.)
"The optional {overlay} parameter can include one or more features (points/lines/polygons) to draw in a comma-separated list."
You can also play with the {format} if you need to get all fancy.
Play around with some of the examples. Change them around and see what you can make!
Remember access tokens? You can add your token to the docs' sample URLs right in the docs!
In this example and the previous one we are putting data on a map.
Let's take a deeper look at basemaps.
What is a basemap?
Basemap. What is the implication?
When you have a base, you can build things on top of it. Right?
This basemap is made up of tiles from Mapbox.
Wait, tiles?
Real quick diversion! I'm going to borrow from a great Maptime presentation, then we'll come back here
LINK
RECAP:
One more thing:
Nowadays we also have vector tiles
More on that later, but vector tiles are made of vector data! They enable all kinds of dynamic visualizations that aren't possible with raster (image) tiles
Where were we? Besemaps!
What data do we see on this basemap?
All of the data that makes up this basemap is from OpenStreetMap!
Now check out this basemap.
This map is also made of OSM data!
Cartographic decisions have been made about what data to render (show) how on these basemaps.
"The term basemap is seen often in GIS and refers to a collection of GIS data and/or orthorectified imagery that form the background setting for a map. The function of the basemap is to provide background detail necessary to orient the location of the map." - Caitlin Dempsey Morais on GIS Lounge
In truth, basemaps have come a long way.
What map elements do we expect in a basemap?
"Typical GIS data and imagery that make up the layers for a basemap: streets, parcels, boundaries (country, county, city boundaries), shaded relief of a digital elevation model, waterways, and aerial or satellite imagery. Depending on the type of map, any combination of those layers can be used." - Caitlin Dempsey Morais on GIS Lounge
Let's define some more terms before we get to our third exercise:
Zip file
Shapefile
Let's take a minute and dive deep into shapefiles.
(This info comes from the Introduction to Geodata presentation from MaptimeOAK.)
Shapefile is actually a misnomer: the data format requires three different files to store its core data (plus some optional files).
When you first encounter a shapefile, it's usually in a folder.
A typical shapefile has four files in that folder: a dbf, a prj, a shp, and a shx.
The three mandatory files are the dbf, the shp, and the shx.
The dbf contains the attribute information for the dataset with different values for each feature.
The prj contains the projection information for the dataset.
Don't worry, we won't talk about projections today. :-P
The shx file is an index file that is necessary for shapefiles to work.
The shp file contains the dataset's geometry information. (Points, lines, polygons, etc).
Shapefiles can be used with most desktop GIS and spatial analysis tools.
Shapefiles are not used in web maps.
However, as we'll see in the exercise, there are many web-mapping tools that can convert shapefiles to web-friendly formats.
What if you just have a list of addresses?
Geocoding
The last exercise in this session used to include a geocoding step. It doesn't anymore, but I still want to leave you with some tools you can use on your own.
"Geocoding is the process of enriching a description of a location, most typically a postal address or place name, with geographic coordinates from spatial reference data such as building polygons, land parcels, street addresses, ZIP codes (postal codes) and so on." - Wikipedia
Geocoding is HARD.
Why? Because addresses are weird.
Existing geocoders are either expensive, slow, inefficient, or inaccurate.
If you're trying to geocode addresses one at a time, or you have a small amount of addresses to geocode, you should be fine with existing tools.
TANGENT TIME
Because geocoding is hard and doesn't work all the time, sometimes data ends up in the middle of nowhere.
Well, not the middle of nowhere, exactly...
It ends up on Null Island.
What is Null Island? Null Island is where bad data goes to die.
It is a fictional island that exists at zero latitude and zero longitude.
Null Island is a common joking subject among cartographers.
The Null Island Archipelago
According to Wikipedia, "Although intended humorously, the fiction has a serious purpose and is used by mapping systems to trap errors."
Check out the fake island at 0,0 in Natural Earth Data.

(If you haven't heard of Natural Earth, check out this amazing free dataset too!)
So while a funny joke to think and talk about, Null Island defintiely has its place (is a place?) in digital and web cartography.
Let's take one minute to talk about geocoding tools
Because geocoding is so hard, there are very few (read: none) good, easy to use, and free options for geocoding, especially if you need to geocode a lot of addresses.
Many web mapping companies emphasize geocoding as a search tool, which is not always useful for analysis, but can be great for an interactive web map.
Here are some options for bulk geocoding. There are others out there, but these are, in my opinion, the easiest to use.
If your employer has an ArcGIS license, you probably have access to Esri's geocoding service. Be sure to read up on your organization's plan, as geocoding can be complex.
Geocoding used to come with an ArcMap license.
But I digress
If you're a QGIS user, I recommend checking out the MMQGIS plugin.
With MMQGIS, you can do bulk geocoding with Google or OpenStreetMap/Nominatim (remember that from last time?)
As always, be sure to read up on these services' terms of service before publishing your web map.
BatchGeo is an interface to Google's geocoding API.
With BatchGeo, you can geocode up to 250 points with the free account, after which you'll need to sign up for pro.
If you need to geocode a lot of addresses, BatchGeo works in a pinch, but the output format is clunky.
Okay. We're ready for our third exercise!
This exercise will be about making thematic maps.
"Thematic maps are data maps of a specific subject or for a specific purpose. Statistical thematic maps include a variety of different map types such as choropleth or shaded maps, dot maps, proportional symbol maps, and isarithmic maps." - U.S. Census Bureau
So now let's create a free CARTO account at https://carto.com/signup.
Side note: CARTO used to be called CartoDB.
And check out the gallery of other stuff people have done with CARTO
Exercise 3: Make a web map of recent earthquakes using CARTO.
Open a new tab and head to this link to download a zipped shapefile of earthquake locations.
CARTO can import shapefiles, but we'll want our data to be in GeoJSON format for later, so le'ts convert it!
There are lots of tools for converting shapefiles. We're going to use one called mapshaper.
In a new tab, head to mapshaper.org.
Drag and drop the zip file we downloaded earlier, or click the select button.
Next, click the import button.
If you see a bunch of little dots on a white background, your import was successful!
Next, click the export buttong in the upper right and choose the GeoJSON option
BOOM GEOJSON
Back on CARTO, click MAPS in the top right, then click the blue button that says NEW MAP.
On the new map page, go to the Connect dataset tab, then click the browse button and navigate to the GeoJSON file we downloaded from mapshaper earlier.
Click CONNECT DATASET.
BOOM!
Let's change the basemap to one from Mapbox. Click the Change basemap button at bottom left, click the + button, then go to the Mapbox tab.



Remember Map IDs from the Mapbox exercise? Let's go with mapbox.outdoors. Also add your access token.
Ack! I tricked you into making a hideous mashup! Ha ha!
(That is what happens when you take a reference map and slap some data on it ;) )
With your new basemap you may need to change the styling of the earthquakes. In the right column, click wizards.
Customize away! And don't forget to SAVE!
Want to keep going? Check out the tutorials.
When you're done, save your map.
One more activity!
Step 1:
Take 5 minutes to write out a description for a map you'd like to make.
Got your description down?
Let's get into groups of ~4 and share our ideas
Here's your homework for next week
On paper, sketch out what your map will look like. Be sure to include things like interactive controls, the surrounding context on the page, and any map design choices you would like to explore.
That's it for this week!
Thanks!
To log your attendance, please fill out today's exit survey