By Kenneth Field, senior research cartographer
Those who attended the 2012 Esri International User Conference in San Diego may recall a giant red map displayed in the showcase that sprang to life when viewed through a pair of special glasses (Figure 1). This blog entry explores a little of the design, authoring and publishing approaches we took when creating this map of all known deaths in Grand Canyon. Actually it’s two maps…a print map (displayed in the showcase) and a web map and we’ll think about the different design and technical constraints we dealt with and opportunities we were able to leverage with the different mediums to make each version work effectively as an information product. We also share the style files and other components so you can try out some of the cartographic effects yourself.
Figure 1: Over the Edge 3D as a giant wall map
The print version
The print version was originally 74” by 42” illustrating the location of all know deaths in Grand Canyon – over 770 of them since the first expedition by John Wesley Powell in 1869 to tourists falling or jumping off the rim today. The map gave us a vehicle for developing some interesting cartographic effects that we want to share (or reinforce) including chromastereoscopy, pansharpening of layer tints and hillshades, use of customized font symbols for point symbolisation, and the use of png graphics. The main focus here, though, will be to explore the differences between how we designed the print vs the web map version of the map and the best practices we discovered.
The project was inspired by the book Over the Edge: Death in Grand Canyon by Michael Ghiglieri and Thomas Myers which chronicles the complete and comprehensive history of Canyon misadventures. Perhaps a little macabre, but a great story and a very human story as it’s intriguing to discover that there are probably no two deaths that are the same throughout history. While the book is fascinating in itself, there was no complete map or even spatial dataset of the location of each deathly incident. Working with the book’s authors, we built the dataset and began designing the map.
We wanted the map to be visually striking, attention-grabbing and engaging so we decided to experiment with chromastereoscopy to create an innovative backdrop for the thematic detail. Chromastereoscopy simply uses colour to encode depth in an image, creating a holographic view when viewed using special glasses. Unlike other 3D visualisation approaches it doesn’t use offset images (like anaglyphs) and it doesn’t require stereo pairs of images (viewed using polarized glasses) so it can be viewed in ‘normal’ 2D as well without any image distortion. Grand Canyon seemed a perfect landscape to take advantage of chromastereoscopic rendering. Not only do the dramatic changes in elevation provide a beautiful backdrop but the reddish hues in Grand Canyon create a perceptual cue that means we don’t find a map created predominantly in red a problem to interpret…so why is the map predominantly red?
As white light hits a prism, the different components of the visible spectrum are refracted through the prism at different angles. This occurs because light changes speed as it hits different materials. Red wavelengths are refracted less than blue wavelengths. Wearing special glasses that contain micro-prisms (supplied by American Paper Optics Inc), visible light is refracted so that we see and interpret colour at different distances away from our eyes (Figure 2). If you want to think about how this works in a different way…think Pink Floyd’s Dark Side of the Moon album cover!
Figure 2. Encoding depth in an image using chromastereoscopy
Taking advantage of the properties of refracted light means we can use colour as part of our design strategy to organize map components. For components we wish viewers to see more closely (or more prominently) we use reds, for those that we want to recede, we use blues. We can encode elevation, define clear figure/ground relationships and build in visual contrast between the various symbols and textual components. It’s an innovative way to use colour as part of the cartographic design process so that it literally adds depth to the map.
A chromastereoscopic color ramp was designed using the Style Manager in ArcGIS. It comprises a series of algorithmic color ramps that use approximately 80% of the colour range between red and blue, tailored so that the mid-point hues depict reddish-browns and greens rather than pure hues to create a more aesthetically pleasing layer tint when stretched across the 30m DEM of Grand Canyon (Figures 3 and 4).
Figure 3. Chromastereoscopic color ramp creation using Style Manager in ArcGIS
Figure 4. Extract of Grand Canyon 30m DEM with chromastereoscopic layer tints
Pure reds and blues were reserved at either end of the spectrum so that we could use them for our thematic detail and vector linework at a later stage. The chromastereoscopic style file we created can be downloaded so you can use it to create your own chromasteroscopic maps.
The DEM was used to create a hillshade and we implemented a new pansharpening technique to combine the chromastereoscopic layer tints with the hillshade to create a vivid topographic backdrop that combined the richness of the layer tints with the tonal variation in the hillshade (Figure 5). The pansharpening technique is detailed in a separate blog entry.
Figure 5. Pansharpened Grand Canyon backdrop combining chromastereoscopic layer tints with a hillshade
Now we have a visually stunning 3D backdrop we concentrated on the thematic symbols for each of our georeferenced deathly incidents. For the print map, we were constrained to the dimensions of the map at a scale of 1:150,000. Because of the extent of clustering of points it became clear we needed two strategies to deal with their placement. Firstly, for the area around the South Rim near Grand Canyon village (the main tourist hub) would require a large-scale inset map. Secondly, because of the close proximity of the points across the map in general, we would need to offset them. A font-based solution allowed us to create multi-layered symbols comprising an outer triangle (to mimic a ‘warning’ sign), an inner graphic (pictorially showing the type of death e.g. accident, suicide, murder) and a triangular shape background. Because we were using a font-based symbol we could use Maplex placement rules to disperse the symbols, avoid overlaps and generate a leader line. Additionally, we were able to symbolize the background triangular component of the symbol with the same chromastereoscopic color ramp to show the elevation at which death occurred (Figure 6).
Figure 6. The use of font-based multivariate marker symbols to locate deaths
Our symbols now illustrated the location of deaths, dispersed across the map by type and elevation. We added contextual detail such as the Colorado river and extended hydrological network as well as the main roads, spot heights, national Park boundary and labels for physical features. Figure 7 illustrates the final map showing the use of the reserved colours from our chromastereoscopic palette (more saturated reds and blues) for thematic detail we wished to appear closer to the eye or, in the case of the rivers, further away.
Figure 7. Over the Edge 3D: Death in Grand Canyon
Because the map was telling the story of the deaths in Grand Canyon we wanted to add contextual detail so in the layout, we added graphical components (as .png graphics which are supported at v10.1 and which preserve transparency) that contained small extracts from the description of the person’s demise. We included 14 of these vignettes that added interest and invited the reader to look more closely at some of the detail. We also added a legend, explanatory text panel and map borders using the same technique. The map was designed to be visually striking and we opted for a comic-book appearance to give the map a dramatic look and feel which married pure red in the highest visual plane and a comic style font for the main title panel.
So the print version was complete. It won a Highly Commended small-scale thematic mapping award at the 2012 British Cartographic Society annual symposium and you can download your own copy from ArcGIS Online. However, we’d made several compromises because of the constraints of the print format such as having to use font-based symbols, dispersing points from their actual locations, cluttering the map with leader lines, having to employ an inset for the overcrowded South Rim and not being able to add more detail than the 14 vignettes chosen. The web map version allowed us to overcome these limitations…
The web map version
Let’s turn our attention to the web version. Building a web map provided new opportunities but forced alternative design approaches. While the chromastereoscopic effect works just as well on screen as in print, the key difference is that the online environment removed the constraint of working at a single scale and having to accommodate crowded areas using inset maps. The multiscale character of a web map meant we could also jettison the need to disperse our symbols, removing the need for leader lines in the process. Each location of a deathly incident could be retained in its true position, though at smaller scales a different approach would be necessary to retain clarity.
Now we are working in a multiscale environment, however, we were no longer designing for a single scale. The map would be capable of being viewed across 10 zoom levels from1:1,155,583 to 1:2,257. Each scale would require a unique consideration of what detail to include and how they were to be best represented. Additionally, each zoom level needed to work sympathetically with the scales either side so as a user zooms in and out of the map the viewing experience is smooth and large changes in depiction don’t cause sudden visual jolts.
At smaller scales, symbol agglomeration would cause a problem…so we needed a technique to avoid the death by push-pin seen on so many web maps that display point based data. We used a hex binning technique to aggregate point based data into hexagon shaped polygonal features for smaller scales (Figure 8).
Figure 8. Using hex-binning to aggregate point based data at smaller scales
In order to accommodate the different scales as we move through the zoom levels, we created three versions of the hex-bins with diameters of 5km (smallest scale), 2.5km and 1km. These would be used at scales where individual point agglomeration is too problematic to view individual symbols. The attribute data itself was aggregated so rather than being able to query individual points at this scale, the user can gain information on the proportion of type of deaths in a given area.
At 1:9,028 individual symbols become possible but we made a decision here to reject our original triangular symbols in favour of hexagonal versions. This was in order to maintain a consistency in symbology across the scales rather than go from hexagonal polygons to triangular point markers. The symbols were redesigned as PNG files rather than as a font-based solution which provide an improvement in performance online. In so doing, we also decided not to symbolize elevation as part of the symbol. Because each symbol was now to be positioned at the exact point on the map at which death occurred, elevation is encoded in the background. Symbols were therefore created in pure red (land-based) or blue (water-based) to allow them to sit at the same visual level when viewed chromastereoscopically (Figure 9). The deathly point symbols themselves can also be downloaded as a style file.
Figure 9. Re-designed point symbols for the deathly incidents
The web map provided a perfect interface to invite inquiry since we could now use popups to display detail for every death rather than be restricted to only those that the map space allowed. The advantage here is that the map truly becomes a rich information product containing the complete description of the data rather than selected highlights. Creating interactive symbols also invites active query that encourages users to explore, pan around and actually ‘read’ the map rather than simply looking at it.
Each zoom level effectively required us to create a ‘map stack’ of relevant layers. In order to think more clearly about designing in a multiscale environment we found it useful to create a matrix of our data layers against the scales and type of service required (Figure 10).
Figure 10. Matrix of map layers against scales
This approach greatly assisted the design of our individual scales, showing what we needed to publish as part of our map stack at each scale and how each dataset would persist across which scales. The complete map across scales could be visualized in this way and this helped organized the planning of our Map Documents to streamline the publishing of map services and the decision of what needed to be cached and what needed to be a feature service (to support popups). For instance, the chromastereoscopic DEM would be used throughout until the very largest map scales where we would remove it in favour of the high-resolution imagery basemap layer in ArcGIS Online, providing an increased sense of the harsh environment at which the death occurred. The matrix allowed us to clearly see at which scales the hex-bins would give way to each other and to the point symbols. It also allowed us to see how labeling would be progressively handled with increasing detail being included at larger scales.
The finished web map of Deaths in Grand Canyon is the first complete map of all known incidents. It combines the innovative chromastereoscopic approach with the opportunities provided by the web mapping approach to create a rich, detailed map. Figure 11 illustrates a screen shot of the map at a small scale showing the hex-bins feature service layer, chromastereoscopic map service and the popup of aggregated detail. Figure 12 illustrates the map at large scale with individual point symbols over the imagery basemap layer and a popup describing the circumstances of an individual event.
Figure 11. Over the Edge 3D at small scale
Figure 12. Over the Edge 3D at large scale
In this blog entry we’ve described a single map but, actually, explored how the same mapped information can be presented in both print and web form. Each has constraints but the web map format clearly allows us to present a much richer information product and present our complete dataset. The web map version certainly allows for greater interaction and user engagement but doesn’t have the immediate visual impact of the print version since the screen display can never give the same visual impact as a large scale wall map. The web version also allows for wider circulation and in considering the nature of the subject matter we made a conscious decision to present the data in a more conservative fashion. We hope you enjoy exploring the two maps and experimenting with the style files and chromastereoscopy.
Thanks to Damien Demaj, Cartographer, who designed the marker symbols for the maps