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 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 available 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 of Northfield. 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 MapTiler Editor tool by Klokan Technologies, the same people who make the Georeferencer tool used at David Rumsey we discussed last time. But since we have a site subscription to ArcGIS online, we are going to focus on that tool to keep things simple.

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.  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, which offer a great way to integrate your data visualization with your narrative argument, and even add 3D content.

Scroll through this Mapping Congregants of Color at Old South Church example created by Carleton Students to see how StoryMaps lets you combine narrative with multiple types of images, maps and 3D content.

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.

Joining the Class Group

Groups are ArcGIS Online’s way of managing shared access to content. We’ll share everything with the class group for ease of access and use.

• Click the Groups tab at the tab of the page and select the “My Organizations Groups” tab
• Find or search for “Hacking the Humanities Fall 2025” and join the group in the upper right corner of the screen

Creating a Map

1. In ArcGIS Online, click on the Map tab at the top of the page to bring up the main map viewer window.
   • This is the primary creation area where you will build a map by adding layers, adjusting their display, and running any analysis you desire.
     
2. Explore the main map interface.  A few things to notice:
   1. There is an Information button at bottom left that has links to tutorials and resources to learn more, e.g. this getting started ArcGIS Online Mapping Basics video tutorial
   2. The main operations you can perform are listed down the left hand main menu.  
   3. There is a contextual menu on the right hand side that will give more options based on the layer or feature you have selected as you build your map.
   4. Both menus can be Collapsed or Expanded with the two pointy bracket arrow buttons at the bottom
3. Click the Basemap button and choose a style.  Pick one that is fairly neutral as a background to our data.

Adding Data

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

1. Go to the Layers menu and click Add to explore the options
   • The menu at the top will by default to My Content, but will also give you the options of exploring our group and organization’s content.
     • Switch to My Organization and try testing a few layers to see what is available
   • Living Atlas will give a vetted list of authoritative data for environmental, statistical and other layers from ESRI and trusted partners.
     • Explore the great stuff here that you can use freely in your own mapping projects.
   • ArcGIS Online has everything shared publicly by all ArcGIS online users. This is a huge amount of data, but the wild west with no controls over the quality of the uploaded data. Buyer beware!
     • Experiment by adding some of the data layers that are available
2. We can also add our own data via the Add button at the top of the left menu
   • Add Layer from URL 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
   • Create Sketch Layer lets you create new features but sketches will be stored in this map only. Good for quick work and annotating a single map, but not for long term projects or building complex datasets.
   • You can also Create Route Layers for direction finding applications and Add Media Layers for imagery

We are going to start by adding a layer from URL to bring in the historic map you georeferenced last time.

Getting a Tile Layer

Modern slippy maps are composed of tiles, and the best way to add raster imagery to a webmap is via a tile layer, which the AllMaps georeferencer allows.

• Find the link for your georeferenced map you saved from last class (or repeat the steps from the Georeferencing Excercise to load one of the maps into AllMaps, which should pull up the annotation).
• In the AllMaps Editor, click the “Export Options” button at lower right and find the XYZ map tiles URL making sure the following options are set
  • 2x resolution (Map tiles are not as good at deep zoom as IIIF, so this ensures clarity at larger scales)
  • Current Image (which will give you just the masked and georeferenced image file)

• Copy the XYZ map tiles link URL to the clipboard

Adding Tile Layers to ArcGIS

• Choose Add Layer from URL in the Add menu
• Paste the XYZ tiles URL into the field and scroll all the way down to Tile Layer from the options below
• The “Title” you type in will be the name of the tile layer in ArcGIS.
• The “Attribution” you type in can help you keep track who created which tile layers and their metadata
  • Fill these out by referencing the Metadata in AllMaps. E.g. for the map above use the “Label” field for Title and the Reposistory and URL fields for Attribution

• Click Add Layer and see your map overlaid.
  • You may need to zoom into its location to find it
  • Zoom all the way down and notice that it takes a while to clarify — map tiles are slower than IIIF

Adjusting settings

• Click on the layer and you should open a contextual menu with several options to the right
• Adjust the Transparency so that you can see through your historic layer to the basemap
• Play with the Visible Range to control at what zoom levels it will display

Digitizing Features from Scratch

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.

Creating a feature layer

• First, Save your map in the left hand menu, and give it a Title and Tags
• Then, go to the Content area of the Home Menu, by opening the Hamburger menu and choosing Content (see image)
• Click the New Item Button at Top Left
  • Choose Feature Layer from the menu
  • Choose Define Your Own Layer
  • On the Specify Name and Type screen add 3 layers for Points, lines, and polygons and rename them (as in the image below)
  • Click Next

• Give your new layer a Title that makes sense based on the use case and add Tags (at least one is required, so “hacking humanities” will do)

• Once your layer is created,
  • Go back to the map view and Open the map you saved above
  • Add a layer from My content and load your new layer to the existing map

Creating Features on an Editable Layer

• Now digitizing features is as simple as
  • Clicking Edit in the right hand 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, for example tracing the outline of the demolished girls dormitory Gridley Hall

If you turn off Edit mode and click on the feature you just created, you’ll notice that it doesn’t contain any attributes, just information about the geometry of the shape. To make this meaningful, we need to add fields.

Adding Fields

• Adding attributes and filling in their values to associate metadata can be done a few ways. One is to:
  • Make sure the Layer is selected in the Layers List click on Fields in the right-hand menu (see above)
  • Click the Add field button
  • Choose the Data Type appropriate to the information collected, e.g. Text String for a label
  • Give the field a Name (for internal DB use), Display Name (for public use) and optional description and type (see below)
  • Add New Field

Now you can click on the Feature, click Edit and then enter the value written next to the feature on the raster map as an attribute of its vector representation. Congratulations on digitzing your first feature! Try a few more.

Styling your map

Change the Symbology to edit the appearance of all features in a layer

• Go to the Properties tab, hover over the layer, and click the Style icon to pull upon the symbology menu
• Select “options,” then “symbol,” and edit the desired color, size, and style of feature
• Adjust the transparency as desired
• Select OK and DONE

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. Make sure to Share it with the Hacking the Humanities group.

Exercise: CSV upload and explanatory options

One of the most common ways to start a new webmap is to upload data from a CSV file.

Getting Data to Map

For today’s exercises, we are going to use a dataset that is, geographically and temporally, relevant to our interest in the recent history of Carleton.  Our dataset can be accessed in the shared folder at this link.  (The file, NFDP_Subset.csv, is part of a digital collection of photos documenting the 2010 flood of Northfield and surrounding areas.

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?

Upload and Map our Data

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
3. You don’t need to create a feature layer, so just click on “Add to map”

The second option is much easier and quicker, but either way, find “NFDP_Subset.csv” and upload it.  

Symbolize and Visualize the Data

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

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

• Figure out a map display that you are comfortable with and press DONE when you are finished.

---

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 Add a Text Field and user the {} field placeholders to write dynamic text and combine the data from several fields into a sentence.

This picture of {Name} was taken by {Creator} on {Day}, {Year} 

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, but very helpful for keeping track of your own maps and allowing others to understand what you’ve done if you make them public.

Click Save Map when you are satisfied with your descriptions.

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.

Create a Web App for Viewing

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!

Embedding in a web page

---

---

Resources

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