Web Mapping 101

The past decade has witnessed a proliferation of web mapping tools and platforms.  These tools have long allowed the simple display of and basic interactions with spatially referenced data, but until recently, if you wanted to do any sort of analysis you had to use a desktop GIS system.  That situation has begun to change, however, and there are now many solutions out there for mapping your own data alongside hosted layers from around the web.

There are a lot of open source GIS options out there (see this list for a complete rundown) and which one will be right for you depends on the needs of your project and your familiarity and comfort with coding.  Today we’re going to explore some of the most common web mapping platforms out there and see how you can start making fairly complex maps with relatively little startup cost.

Google Maps / API / Fusion Tables (RIP)

Google’s mapping products are the most well known to the general public, since Google Maps and Google Earth have been around a long time and are ubiquitous.  For an example of how to use the JavaScript API, you can check out the Google Maps API tutorial from the 2015 version of this course.

Google for years has offered the a very easy way to generate maps and charts from simple spreadsheets via Fusion Tables, but sadly they recently announced they are retiring the service. DH Twitter was NOT happy

Getting Data to Map

  1. For today’s exercises, we are going to use a dataset that is, at least thematically, relevant to our interest in the early history of Carleton.  Our dataset can be accessed in the shared folder at this link.  (The file, early-colleges.csv, is part of Lincoln Mullen’s historydata datasets on GitHub.)
  2. Download the CSV and open it in Excel or a text editor to see what you will be mapping. 
    • What information does this file hold?
    • Where is the spatial data? What kind of spatial data is there?
    • Where might it have come from?  How reliable do you think it is?

ArcGIS Online

ArcGIS is the industry leading GIS platform.  It is very powerful, very difficult to learn, and very expensive, since it is proprietary software created and owned by a company called ESRI.

ArcGIS Online is the company’s attempt to reach a more mass market audience.  It is a cloud-based GIS service that offers an easy way to add, store, and visualize spatial data, much like Fusion Tables did.  But ArcGIS Online also offers sophisticated ways to analyze data that until recently were only available in high-end desktop software, and — crucially for humanities projects — any map you create can be turned into a Story Map like the Battle of Gettysburg example we looked at last time that offers a great way to integrate your data visualization with your narrative argument.

As with the desktop version, ArcGIS is not free, however.  It does offer a public version, but it is very limited and offers no analysis capabilities.  “Subscription” accounts for organizations start at $2,500/year for 5 users — not exactly cheap.  We are going to use it in this class, because we are fortunate that Carleton has a subscription and excellent support in the person of our GIS specialist, Wei-Hsin Fu.  But I’ve also included information on open source alternatives at the bottom of this post.

Logging in to your College Account

  1. Our portal for ArcGIS online can be found at carleton.maps.arcgis.com.
  2. Click to sign in using your Carleton College Account and enter in your regular college login on the following page.

Creating a Map

  1. In ArcGIS Online, click on the Map tab at the top of the page to bring up the main map editor window
  2. Explore the main map interface.  A few things to notice
    1. There are three Guided Tours to get started (we’ll go over these in detail, but you have some built in help here)
    2. The main operations you can perform are listed across the top menu.  What can you do with a blank map?  What can’t you do yet?
    3. Note the relationship between the scale bar and the zoom control as you navigate around the map
    4. What data do they give you by default?
  3. Click the Basemap tab and explore the options.  Pick one that is fairly neutral as a background to our data.

Upload and Map our Data

Screen Shot 2015-10-08 at 11.29.35 AM

Now lets add our data to the map.  There are two ways to do this

  1. Click Add and choose to Add Layer from File then navigate through your computer to find the file you want.  Note the types of files they allow you to upload
    • You can import a zipped shape file (ZIP: the default ESRI format for desktop GIS that is widely recognized by other GIS and web mapping platforms)
    • a comma, semi-colon, or tab delimited text file (CSV or TXT: this kind of tabular data is the most common way to collect your own information and will be portable just about anywhere, not to mention about as future proof as you can get
    • a GPS Exchange Format (GPX: this is data upload from a GPS tracker, say following a route you ran or biked that was logged by your phone or another GPS enabled device)
  2. Drag and drop a file onto the map window

The second option is much easier and quicker, but either way, find “early-colleges.csv” and upload it.  You should be presented with the following import options

Screen Shot 2015-10-08 at 11.37.09 AM

Like Google’s Fusion Tables, ArcGIS Online is going to try to geocode your data and provide latitude and longitude coordinates for any place references in your data set by comparing them to a gazetteer (a place-based dictionary) somewhere.  It should have correctly recognized the city and state columns as Location Fields

  1. Click Add Layer and see how it did.
    1. Click on a couple of the points on your new map at random to verify if they look correct.  The geocoder is pretty good, but ArcGIS does not provide much in the way of error checking and you can’t easily tell what it got wrong just by looking.  Buyer beware!

Symbolize and Visualize the Data

Screen Shot 2015-10-08 at 11.49.06 AM

By default, the application will try to figure out some pattern in your data and will suggest an attribute to symbolize by.

  1. Explore the style options down the left hand column.
    • How do the data look if you choose a different attribute to show?
    • How do the single symbol, heat map, and types options differ?  Which is most appropriate for these data?
    • Explore the various symbolization options under the Types (Unique symbols) drawing style.
      • Figure out a map display that you are comfortable with and press DONE when you are finished.
Screen Shot 2015-10-08 at 11.53.59 AM

Now that you have mapped some data, what else can do with it?

  • Check out the options below the layer and see if you can do the following
    1. Show the table of the data.  How is it different than or similar to the original CSV?
    2. Create labels for the points that use an appropriate value from the data table, and change the style to your liking
    3. Configure the Pop-Up to show a Custom Attribute Display and combine the data from several fields into a sentence.
    4. Enable Editing 
      1. Change the value of a point already in your dataset
      2. Add Carleton College to the data set

So what?  Asking and Answering Questions

We’ve got a map, but what does it tell us?  What can we learn from it that we couldn’t learn from reading the data in a table?

Screen Shot 2015-10-08 at 12.21.38 PM

One of the greatest benefits of a GIS system is that we can compare different types of data based on their geographic proximity and spatial relationships.  ArcGIS online allows access to a multitude of other datasets hosted on its own servers and around the internet.  Let’s see how our data look compared to other information.  Can we make it tell other stories of interest?

  1. Click Add again, but this time choose Search for Layers
    • See if you can find some boundary layers, population data, religious content, or land cover information that seems to have a relationship with the colleges that might be meaningfully interpreted.

You might also search the internet for other GIS datasets that might be fruitfully compared.

  1. For instance, the Railroads and the Making of Modern America project has several data sets available for the growth of railroads
    1. Go to their data download page and get the shapefiles for the railroad system
      1. You’ll need to Zip (compress) the individual year folders in order to upload them, but once you do see if there is any correlation between the growth of railroads between 1840, 1845 and 1850 and the spread of the colleges.

Save and Share your map

Click Save on the toolbar to title your map and save it to your account. You will need to enter in a title and tags. The map description is optional. Click Save Map when you are satisfied with your descriptions.

Screen Shot 2015-10-08 at 12.37.52 PM

You can share a link directly to this map view, but you can also publish a nicer looking layout to share publicly.

  1. Click SHARE on the top toolbar. A new window will pop up. Choose to share this with “Everyone” and then click on Create a Web App.
  2. In the next window, chose the format of the web application. There are many options and you can preview them by clicking on “Create” then “Preview”. Once you find a template you like, click on “Create” then “Create” again.
  3. On the next screen, enter a title and summary for your application (it can be the same as your map title and description). Click SAVE AND PUBLISH.

Congratulations! You’ve made a live interactive web map!

Assignment

  1. Create a new blog post on your personal WordPress site and embed the new map.
    1. Write a few sentences explaining what it is and how you made it.
  2. Leave a comment on this page with a link to your new post

Open Source Alternatives

CartoDB

CartoDB is a “freemium” service, that offers an entirely cloud-based all-in-one mapping service.  You can upload your data, perform analyses, and publish from their servers to the web through a very simple and clean user interface. They also offer one of the best styling interfaces around with many nice looking templates and the ability to tweak them or roll your own using the equivalent of CSS for web mapping that is called, appropriately enough, CartoCSS.And it’s all open source!

One of the big benefits of CartoDB is their “torque map” feature, which allows you to animate your data with minimal effort.  In the map below, I’ve uploaded the same early-colleges.csv dataset and animated it so that colleges pop up in the order of their founding.

We won’t go into detail on CartoDB here, but I encourage you to explore on your own with the same data or a different dataset to see how this tool compares with ArcGIS Online.

Lincoln Mullen has put up a great getting started with CartoDB tutorial that you can use to create an account and follow along, and CartoDB has an extensive series of tutorials to explore its features in more depth.

WorldMap

WorldMap is an open source project developed by the Center for Geographic Analysis (CGA) at Harvard with the aim of filling the gap between powerful but hard to learn desktop GIS applications and lightweight online map viewers.  You can easily create your own map layers in standard, exportable formats, and you can also view the many maps created by others, including Africa Map, the project that launched the program, and a Tweet Map, a great example of a “big data” geographic data mashup.

Screen Shot 2015-10-08 at 5.12.21 AM

WorldMap also hosts its own instance of MapWarper, which will let you georeference an image for free.

Resources

  1. Web Mapping Services tutorial
    • a very detailed rundown of Web Mapping Services, including what they are, how they work and a comparison of what services and JavaScript APIs are out there from the good folks at the Geographic Information Student Collective.
  2. The University of Minnesota’s USpatial group regularly puts on workshops up in the Twin Cities
    • Their Training Page offers the full downloadable materials for all of their workshops, which you can use to follow along and learn at your own pace.