Google Maps & GIS
This week we’re learning about visualizations, including graphs & maps. It seemed fitting to try out a simple exercise with one very complex geographical information system: Google Maps.
We’re all familiar with Google Maps, but how much do you know about how they work? Consider how complex your interactions with the map are:
- Google has data for the whole world, but when the map is presented to you, it displays only a small fraction of that information
- you can drag & zoom the map at will with the mouse – note how different this is from the normal interaction with HTML.
- by clicking on a button you can display road or satellite data, and google can compile directions for you
- common landmarks are displayed, and in some cases there is further information attached to those landmarks
Google Maps, then, is a Geographical Information System: a complexly-layered dataset presented to the user in a visual form. There are many ways to understand GIS – as database, as map, as mathematical object – but one key aspect is layering. In a GIS, different types of geographical features are stored in "layers" which can be drawn on or removed from the screen independently of each other. The Google "hybrid" view perhaps makes this most clear: street map data and satellite data are layered on top of each other, making a rich but sometimes confusing display. Switch to satellite or road map view and one of those layer will be removed from view, making a cleaner (but less informative) map. Map markers and other elements – such as the complex polygons ('overlays') you may sometimes seen drawn on top of regions, or the provincial and national borders that decorate the globe when seen at a distant zoom level – exist in their own layers. When you access a Google map, these features are turned on or off according to your preferences and/or the nature of your query to the mapping software. And there are layers you never see – such as the lowest level grid that all the other data are painted on top of.
The internal workings of this system are complex and to some degree secret. The maps themselves are built from a hodgepodge of different sources – public domain government maps in the US, various proprietary map datasets in other parts of the world, and Google's own, self- and user-generated datasets. Complex smoothing algorithms generate the shapes and colours we see in any individual map.
But, amazingly, we can use this srvice – and even build our own maps – without knowing anything about the underlying software. In fact, though we won't be doing this ourselves, it is possible to write a single piece of code that can draw maps using Google's service, the Yahoo mapping service, or a variety of other lesser-known services. This is because all of these services provide "Application Programming Interfaces" (API's): simplified programming interfaces that allow external programs to access the sophisticated machinery behind the scenes.
The historical GIS systems described in Placing History offer more sophisticated and complex possibilities, but none are as easily accessible to the novice as Google Maps. In this exercise you will build a simple Google Map from a template already provided for you. The object here is not to create a really sophisticated historial GIS project, but to understand how Google assembles a particular map from diverse datasets. You'll do this by first inspecting the template I've created, and then modifying it to your own purposes.
Notes on Process
This excercise is pretty different from the last three STA's, which have (a) kept to WordPress as much as possible, and (b) been fairly self-contained. Here you will be writing directly in HTML, so on the one hand, it's pretty primitive. On the other hand, looking directly at the code for the project will hopefully help you to understand that real-life web pages are embedded in very complex systems. The object here is to see how small changes to that system produce new and impressive "content" for the page.
HTML + CSS + JS = the modern web
- HTML + CSS. All the dynamic content is missing, but at least some formatting has begun to be apparent. Hide all the code panes to be sure you understand what the page really looks like; then look carefully at the CSS to see how it's done. Fool around with it a little bit to get familiar with this part.
Our script relies on two external libraries:
- the "tabletop.js" library, which allows our script to use data stored in a Google spreadsheet. Tabletop is a kind of shortcut, which lets us avoid the tedious practice of hand-coding all of our marker data; it also lets us imitate the way data travels on the real web: freely from computer to computer. So we're combining data from Google Maps with programs on Google servers, all rendered on JSBin's servers.
The short script you see in the JS pane has to do the following:
- define the map object and its components
- read all the spreadsheet data
- turn each row of the spreadsheet into a marker
- create a "listener" for each marker, which will pop up an "info window" when you click on the marker.
To get started, be sure you are logged in to JSBin. Then clone the template (File –> Clone in the JSBin menus). This will help you keep track of your work. Go ahead and "save snapshot" (Ctrl-S); by doing so you can be sure that you're always able to go back to a pristine state.
- in function "initialize", find the mapTypeId. Change this to "SATELLITE". Note the effect.
- change the value of "my_center". What happens?
- change the value of "window_content" in the definition of this_marker. What is the effect?
- if you know how to access the browser console (Ctrl-Shift-K in Firefox, Ctrl-shift-J in chrome), activate it and navigate to the "live preview" by clicking on the arrow in the top right corner of the Output pane. Then, in the console, type "my_markers" and hit enter. You should see something like this:
Notice the display in the bottom right corner of the image – try clicking on one of the words in the main console panel (like "Array"), and then investigating the object in the right-hand sidebar. You'll see these simple objects, the markers, are actually really complicated!
OK, now try typing this:
my_markers.marker.setTitle("Here's a new title");
- hit the up arrow twice to repeat your first command. Notice the difference? Try mousing over the markers till you find the one whose title you just changed.
- If you got through all of this, try one last thing.
The first command shows you the internal structure of the "listener" associated with the first marker. It's complicated! The second command runs a function that is part of the listener object – and this function removes the listener! If you try clicking on the marker, you'll see that the window doesn't appear anymore. All of this shows how you can manipulate the marker objects from outside the map – and this is in fact also what the buttons near the top of the page do.
Assignment: Build your own Map
Finally we get to the real assignment! You're going to write a very short history of one of the following local history topics:
- Classical Music in Toronto
- Gay Toronto in the 1970's
- Toronto in the Great Depression
- Toronto's first Chinatown
- The Labour Movement in Toronto
- really anything else you want, as we'll discuss in class
add your short essay to the HTML pane
Don't bother with footnotes or other apparatus. This is just to make you do a little handcoding of HTML and remind you what it looks like.
Create our own Google spreadsheet
- navigate to the spreadsheet template.
- under the File menu, choose "make a copy"
- under the File menu, choose "Publish to the Web" and then "Start Publishing".
- in the top right corner, under 'Share', add "anyone with a link".
- make a note of the 'key' – the part of the URL that comes between "key=" and "#gid=0"
- the new URL's look different, so the URL may look more like this:
https://docs.google.com/spreadsheets/d/1wqNCq-CKET8UefFD-0l9QX5weoOAXE58AFx1eo8mG24/edit#gid=0. The key is the part that comes after
/d/– in this case,
- the new URL's look different, so the URL may look more like this:
- return to your JSBin project, and replace the existing my_spreadsheet_key with the new value
Here are a couple of things to think about:
- you may want to put some pretty long text in "description", and even some links or images. You can include any HTML code you want, except for <script> tags.
- You may notice that the last three columns (lat/lon, latitude, and longitude), are automagically generated from the address field. Cool, right? I did that. If you add more events than are already there (not necessary), you will probably want to copy the formulas for those columns into your new cells. If you don't know how to do that already… you should learn! If you don't have an address for the location, you can find the latitude and longitude online and enter them manually. But that's a lot more work…
Try to add 8 or 10 markers to your project. Then you'll have a real map of the topic! When you're done, be sure to share the URL for your project on the class blog, so everyone can see your work.
Sound fun? We'll talk more about it in class.