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.  I’ll highlight just two here that have been used in humanities projects which you may want to check out.

1. 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.
   • WorldMap also hosts an instance of MapWarper that lets you georeference an image like we did on the David Rumsey site.  The key difference, however, is that they let you upload your own scanned maps, and then host the rectified results for you, so you can call them from any web map.  For free!
2. 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.

---

Exercises

But let’s look more extensively at two of the most common web mapping solutions on the market today: the Google Maps API and ArcGIS Online.  Neither of these are open source, but they are both industry leaders and many of the projects you encounter will implement one or the other.

The first exercise will look at a coding example using the Google Maps API to show you the basics of how this type of mapping solution works.  You could substitute any of a number of open source JavaScript libraries to achieve similar results.

• Go to Google Maps and find Carleton College.
  • Poke around, turn things on and off, pan and zoom, click on features.

We take it for granted, because we use it all the time now, but think about how complex your interactions with this map are. A vast amount of information is loaded in real time as you interact with the map by clicking, dragging, etc. But where does this data come from? The inner workings are complex and somewhat secret behind private code.  But the maps themselves are built from a hodgepodge of different sources from all over; some from Google’s servers, but a lot from elsewhere on the web. You can see photos from Google’s street view cars, but also ones from Panoramio users, quick facts brought in from Wikipedia, link’s out to Carleton’s website, etc.

This is a key aspect of the modern web and many DH projects: mashup. You can make something new by hacking together what’s online already. Since so much information is out there, you don’t really have to invest in your own server infrastructure or figure out how to set up and maintain a database in order to make something original.  For big permanent projects, that is obviously still the best way to go, but for quick exploratory work, you can do most of it online with a few lines of code that leverage an API or application programming interface.  These are simplified programming interfaces that allow people like us to leverage smart people like the Google developers’ good work. They tell us how to tap into their code and create our own applications from it.

The Google Maps API is widely used and will let us make a quick, customized webmap using entirely the client-side code we’ve learned already: HTML, CSS, and JavaScript.

---

 

Exercise (Google Maps API)*

• Click the image at right to go to the example of a simple historic web map of Carleton College I’ve set up on jsBin.
  • Explore the example, noting the following:
    • The map should be centered on Northfield near campus
    • There are a few key buildings in its early history marked on the map.
    • Clicking on the markers should pop up an infowindow with historical information and an image

The result is a very rudimentary historical GIS, that is not telling you about the modern world like the live Google Maps display, but rather our own curated content, displayed however we want it. So how did we make this? Let’s explore a bit using our browser’s DevTools

• Click on a marker to launch the pop-up, then right-click on the image, and choose Inspect Element
  • In the inspector at the bottom, find the img tag and note its source (‘src’)
    • this image actually sits on Carleton’s server, I didn’t copy the image, just linking to it.
  • Now look in the CSS pane and find the div.marker rules.  What do they do?  Uncheck them and see what happens.
    • This sort of mashup does not alter the original data at all, but with HTML and CSS we can control how it is displayed and integrated locally in our project.
  • What about the JS?
    • Click on the Network tab in the Inspector, and then reload the page.
      • This shows you where all the different elements were loaded from and the time it took to compile the page.
      • Most of the list consists of the map tile information (anything from the googleapis domain) but at the top you should see tabletop.js and Google APIs JS scripts. Those I added on purpose to handle the dynamic content.
      • Let’s have a look at the code that renders this result and try to figure out how it works.
• Hover over the page and click “Edit in JS Bin” at the top right to see the source code
  • I’ve commented the HTML and JS pretty heavily, so read through the comments and try to figure out how it fits together
  • Change some of the map options or other parameters to see what effect it has on the output.

Note that the place mark content itself is not in this code.  It is being pulled in from a Google Spreadsheet using the Tabletop.js library.  Tabletop is a handy library that lets us turn a simple Google sheet into a poor man’s CMS and use it as our dynamic database backend.

• Click the Google Spreadsheet link at the bottom of the Output pane to see the data
  • This sheet is where the info in our pop ups is coming from.
    • Each row in the sheet gets turned into one marker, so the sheet needs to hold all the pieces of information
      • (Name, Year, Image, Description)
      • And also the geographic coordinates so that we can place each on our map (Lat/Long)
  • There are a couple of ways to get coordinate data from a location, a process known as Geocoding.
    • Here, we are using the following little JavaScript function to turn an address into lat/long right in the Google sheet

      • function geoCode(addr){
          var gc = Maps.newGeocoder();
          var geoJSON = gc.geocode(addr);
          var lat = geoJSON.results[0].geometry.location.lat;
          var lng = geoJSON.results[0].geometry.location.lng;
          return lat + ", " + lng;
        }

      • If you are working with modern data and have an address that’s accurate, this is great.  Geocoders are often used for modern street addresses, but they are not totally precise and hard for historic data.
    • Another option is Harvard’s Geographic Position Finder
      • This handy tool let’s you search for any location, place a marker and then copy the Lat/Long values from a textbook
    • There are other ways too, but the basic idea is if you have lat/long in a spreadsheet, most GIS applications can put them on a map
• Try adding another row to the table and then refreshing the jsBin example to see if it shows up

 

* This exercise is modeled after one developed by Matt Price at the University of Toronto.

 

---

 

Resources

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