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.


Exercise (Digitizing from Raster)

Last time, you georeferenced an historic map from the David Rumsey collection. Now that you have coordinates for your image, you can bring it into a GIS program, align it with other spatially-aware data, and digitize the information by creating vector geometry from it.  

Rasters are great for imagery or elevation values, but for most purposes we need GIS data in a vector format. Digitizing historic map data is essentially tracing features once you have georectified your image in order to create vector geometry. There are many ways to do this; you could use Google Earth, for example, or the relatively recent GeoEditor tool by Klokan Technologies, the same people who make the Georeferencer tool you already used. But since we have a site subscription to ArcGIS online, we are going to focus on that tool to keep things simple.

Getting a Tile Layer

Modern slippy maps are composed of tiles, and the best way to add a webmap is via a tile layery, which the David Rumsey georeferencer allows.

  • Log into your Georeferencer account (or create a free one if you haven’t already), find the map you referenced (or any other map) and click GET LINKS on Use in GIS apps section of the This Map tab
Georeferencer output link formats
  • Copy the XYZ link URL to the clipboard
Get the XYZ tile link.

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 limited and offers no analysis capabilities.  “Subscription” accounts for organizations are not 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

The main map view of ArcGIS Online
  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 is some brief orientation information on the left to get started (we’ll go over this 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.

Adding Data

Screen Shot 2015-10-08 at 11.29.35 AM

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

  1. Click Add and explore the options
    • Search for Layers will by default explore your own content, but will also give you the options of exploring our organizations content and everything shared publicly by ArcGIS online users. This is amazing, but the wild west with no controls over the quality of the uploaded data. Buyer beware!
    • Browse Living Atlas Layers will give a vetted list of authoritative data for environmental, statistical and other layers from ESRI and trusted partners. Great stuff here.
    • The last three options allow you to add your own data
      • Add Layer from Web lets you link directly to geographic layers hosted publicly online by putting in the URL to the layer
      • Add Layer from File lets you upload your own geographic data which will be stored on the arcgis servers and count toward your personal data quota
      • Add Map Notes lets you create features that will be stored in this map only. Good for quick work but not for long term projects.
  2. Experiment by adding some of the data layers that are available

Adding Tile Layers to ArcGIS

Follow the instructions I wrote at the Digital Mapping for Humanists site to
Add Historic Maps to ArcGIS Online

“recipe” for adding tile layers to AGOL at Digital Mapping for Humanists

Get the layer loaded in, and use the three dots below the layer to adjust the transparency. The result should like like the following

Historic Map layer added to ArcGIS online

Digitizing Features

Overlays are great, but to really make use of the data, you need to digitize them and create new vector features. To do this, we’ll create a new layer to hold our features.

  • Save your map
  • Go to the Content area of the Menu
  • Click the New Item Button
    • Choose Feature Layer from the menu
    • Choose Create a Blank Layer
    • On the Specify Name and Type screen add 3 layers for Points, lines, and polygons
Add multiple geometries to a new blank layer
  • Give your new layer a Title, add Tags (at least one is required, so “hacking humanities” will do)
  • Optionally, you can set the Extent to be similar to your tile map so “zoom to layer” will work as expected
  • Once your layer is created, Click the blue Open in Map Viewer Classic tab to add your new layer to the existing map
Digitizing the rail line from Paris to le Havre
  • Now digitizing features is as simple as
    • Clicking Edit in the top menu
    • Picking the feature type you want to create from the point, line, or polygon icons at left
    • Drawing on the map by clicking with the mouse
  • Adding attributes and filling in their values to associate metadata
    • Go back to the Details Tab
    • Hover over the layer and click the table icon below to pull up the attribute data view
    • Click the hamburger menu and Add field.
    • Give it a name, display name and type, e.g. label, Label, String
    • Double click to edit and Fill in the value
The “hamburger menu” at the top right gives the option to filter and Add Fields

Great work! Add a few more features (you can now fill the created field values as you go), then Save your map so we can start a new one.

ASSIGNMENT: Squirrel!! Map viz example

A recent interactive data journalism story by the NY Times made the rounds of DH Twitter and offers a good example of the how the three pillars of DH projects (sources, processes, and presentation) apply to mapping data.

Watch through the interactive at the link in the tweet above or here on the NY Times Squirrel Interactive (the map is the payoff at the end).

  • What issues arise from this project with data collection?
  • How accurate is the resulting map, do you think?
  • How does the presentation affect your experience of the project?

The hand drawn style of this map is hard to achieve with web mapping tools, but we are going to use the squirrel data to explore the basics of the process.

Getting Data to Map

Before we can create a map we need data. Katherine Walden at Grinnell College has made the data for the squirrel census available on GitHub in her ArcGIS Online tutorial, and I’ve forked her project and added a few additional files for our purposes.

Squirrel ArcGIS Tutorial on GitHub

  • Download the CSV file either by clicking on the green download button to get the whole repository, OR going to the RAW link for the csv and Saving the page data to your computer
Download from GitHub using the green button to the right
  • Open the csv 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?
    • What other fields are there? How might we use them?

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
    • 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 “SquirrelData.csv” and upload it.  

NB: This data has lat/long coordinates, but if your data doesn’t you would be presented with the following import options

Screen Shot 2015-10-08 at 11.37.09 AM

ArcGIS Online will 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

Symbolization options in AGOL

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.

If you want to make your map look more like the NY Times one, you can upload custom images to use as Icons

Under Choose an Attribute to show If you set your property to primary_fur_color you can grab squirrel icons for cinnamon, grey and black from the github rep at the links below

Cinnamon Squirrel icon

https://raw.githubusercontent.com/apjmason/ArcGIS-Online-tutorial/DASIL-Workshop/Squirrel-Profile.png

Grey Squirrel icon

https://raw.githubusercontent.com/apjmason/ArcGIS-Online-tutorial/DASIL-Workshop/Squirrel-Profile-grey.png

Black Squirrel icon

https://raw.githubusercontent.com/apjmason/ArcGIS-Online-tutorial/DASIL-Workshop/Squirrel-Profile-Silhouette.png

NB: all icons in the public domain courtesy of Free SVG

  • 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.

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 squirrel data that might be meaningfully interpreted.

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

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.

You can also create a very elegant StoryMap through the new builder — I’ll show this briefly and we’ll discuss more next week.

  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 “SELECT” then “Preview”. Once you find a template you like, click on “SELECT” then “Create”.
  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

One of the best things about having your own website with full administrative control is being able to integrate interactive/multimedia content from anywhere through embedded players or iframes that load external HTML within your page. There are some security concerns with doing this too much, or embedding non-secure content (HTTP) in a secure site (HTTPS), but for DH projects, embedding interactives surrounded by well-designed content to provide context and analysis is a key skill.

  1. Create a new page ON YOUR OWN SITE and embed the new map
    1. To embed, you want to find the Share icon in the web map you chose, and get the “iFrame” or “embed” HTML code, which should look something like this:
    2. Then in WordPress, add an HTML block and paste the <iframe>…</iframe> code there.
  2. Write a brief description explaining what the map is.
  3. Finally write a new blog post on this site with a link to your embedded map page on your site and your thoughts on the process and potential of web mapping and the ArcGIS online platform in particular.

BONUS CSS CHALLENGE

Try to get the embedded map to take up the full responsive width of your page by

  • changing the iframe width to 100% (which will make it scale with its container)
Changing width to 100% (so it scales with size)

Adding a <div> element with class “full-width” and setting the below custom CSS on that element should make the embed’s edges scale right to the edges of the “vw” or Viewport Width. NB: This works best if you are using a single column theme with no sidebar, otherwise it might crowd over the sidebar content.

div.full-width {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

Alternatives for Web Mapping Tools

Carto

Carto 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.

One of the big benefits of Carto is their “torque map” feature, which allows you to animate your data with minimal effort.  In the map below, I’ve uploaded an early-colleges.csv dataset and animated it so that colleges pop up in the order of their founding. (The 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.)

We won’t go into detail on Carto 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.


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.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.