Web design: print to web
Presentation by Kenneth Field at International Cartographic Conference, Dresden 2013. Much has been made about web maps being a new map-making medium even to the extent that they’re often referred to as a whole new breed of maps (e.g. intelligent web maps) or that they define a new paradigm in cartography. The democratization of map-making has certainly been pivotal in developing new ways of publishing maps and by new map-makers but cartography has always been a milieu defined by the varying dimensions of science, art and technology. The last of these has always been hugely defining and has gone a long way to determining how a map appears. Trends in ornate lettering were largely brought about by the skill of the copperplate engraver. Full colour map production was underpinned by developments in printing and digital map production technologies. Now, barriers to online map production have diminished; data has never been more easily gathered using mobile devices or acquired through online sources so making a map has never been easier in terms of their construction. This is of huge consequence to the art of cartography. Technological development has been so rapid due to the perceived need to create a framework that allows anyone to make a map. What this has resulted in is more maps and, consequently, more bad maps. This paper does not seek to simply shine a light on the widespread abuse of maps brought about by recent change but, rather, to focus on an assessment of the way in which web mapping is both redefining and challenging cartography. I use a case study approach based on the parallel print and web production of a map designed to tell the story of deaths in Grand Canyon. The Death in Grand Canyon map is the first of its kind to depict over 700 known deaths in the Grand Canyon. The purpose of the map was to catalogue the deaths spatially; to give them a locational context and to display the thematic information of the nature of the events of each death ranging from falls and drownings to snake bites, suicides and murders. Each death has a very individual story but collectively, they tell a bigger story of the danger that such a magnificent but dangerous environment poses to humans. The map was used as a vehicle to explicitly explore the differences between print and web as a publication medium and how the medium affects the design process. The print map was designed as a large format poster; the web map as a multiscale information product for viewing on screen and mobile devices. Each was treated as a separate product and designed within the constraints and opportunities afforded by the two different production technologies. This paper explores how design principles and the use of different cartographic methods were largely driven by the different technologies of production and what they meant for how the story was to be communicated by each.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Mais de Kenneth Field
Último
Último (20)
Web design: print to web
- 1. International Cartographic Conference Dresden, Germany 2013 Map design: print to web Kenneth Field
- 10. The web map
- 15. 1:1,555,583 1:577,791 1:288,895 1:144,448 1:72,224 1:36,112 1:18,056 1:9,028 1:4,514 1:2,257 Mapservice Featureservice Basemap Imagery layer Chromadepth DEM Park boundary Major hydro features Hydro labels Major roads Summit points Summit labels Physical feature labels Deathly points Hex bins 1k Hex bins 2.5k Hex bins 5k
- 16. Cached map service Pansharpened DEM Feature service Hex bins Individual incident points Cached map service Background contextual
- 19. Search for Over the Edge in ArcGIS Online Print your own copy
- 20. International Cartographic Conference Dresden, Germany 2013 Thankyou @kennethfield cartonerd.com
Notas do Editor
- Much has been made about web maps being a new map-making medium even to the extent that they’re often referred to as a whole new breed of maps (e.g. intelligent web maps, story maps, information maps) or that they define a new paradigm in cartography. This paper focuses on an assessment not of the search for new terminology, but of the way in which web mapping is both redefining and challenging the practice of cartography.I use a case study approach based on the parallel print and web production of a map designed to tell the story of deaths in the Grand Canyon.The map was used as a vehicle to explicitly explore the differences between print and web as a publication medium and how the medium affects the design process.
- The print map was designed as a large format poster; the web map as a multiscale information product for viewing on screen and mobile devices.Each was treated as a separate product and designed within the constraints and opportunities afforded by the two different design and production technologies.It’s a large format print map, 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.
- I was inspired by the book Over the Edge: Death in Grand Canyon by Michael Ghiglieri and Thomas Myers which I first read in a tent while camping and hiking in Grand Canyon 10 or so years ago. Perhaps a little gory, 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.What I found lacking in the book was detail that satisfied my spatial mind. I wanted to know WHERE these incidents took place, were there any patterns to the incidents and if we could use this information positively, could we find areas of greater risk in order to mitigate at least the accidental deaths.The maps in the book didn’t really offer any detail on where deaths occurred yet the book contained detailed tabulated details compiled by the authors. There was a story to tell and information to reveal...through map form.
- I was also inspired by an old poster I had seen that USGS produced that used a chromastereoscopic technique to build 3D viewing capabilities into the map image....in a way that can be used both in print and online.Chromastereoscopy simply uses colour to encode depth in an image, creating a holographic view when viewed using chromadepth 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.Not only do the dramatic changes in elevation provide a beautiful backdrop but the red rocks create a visual cue that means we don’t find a map created predominantly in red a problem to interpret…so why is the map predominantly red?
- Pink Floyd album cover explains how chromadepth works.As white light hits a prism, the different components of the visible spectrum of light 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 violet.
- So the map essentially has two components...background contextual detailUse of a new method for panchromatic sharpening developed by RajinderNaji to combine thechromadepth DEM layer and hillshade.Essentially it takes two images and uses one to sharpen the other, emphasising detail while losing nothing of the original layer tint.Grand Canyon is a dramatic environment and requires a strrong, dramatic backdrop that reveals the structure and morphology.
- The second component is the foreground thematic detail of the deaths.Once processed, the data is simply a location and series of attributes…so ultimately we wanted a symbol to represent each death, categorised by types of death.Font based symbol comprising three components with the colour matching the elevation at which the incident occurred…to mimic a commonly used triangular ‘danger’ signDesign of fonts (using Font Forge) to create the unique symbols. Simple, eye-catching and informative.
- Let’s take a look at the final print map
- Final print mapMap layout includes the addition of graphics (PNG images) and the inclusion of text and contextual detail symbolised so that colour is used as a way of building visual hierarchy between symbols (e.g. Grand Canyon border).So what are the characteristics?Fixed scale as a function of the size of the finished product that determines the amount of thematic content on the mapNeed for an inset map (as a separate data frame) for the crowded symbols along the South Rim near the villageNeed to disperse the symbols...solution being to use a font based symbol, placement control and leader lines.Addition of graphics in the layout for the border and vignettesLose a lot of detail...only about 15 vignettes describing ‘interesting’ deaths...leaving some 600+ incidents undescribed
- Let’s turn our attention to the web version. Building a web map provided new opportunities but forced alternative design approachesKey differences:multiscale environment means you need to design a map stack of different scales ability to put large scale in the map stack meant we could use all our data (rich data invites enquiry) rather than lose most of it direct interaction supports active query and exploration through popups/hovers etc single interface means we could dispense with the inset map and the leader lines and use the actual locations
- So we’re no longer using a single scale and we have to think about how to represent the data at each scale.At smaller scales we need to avoid death by push-pin and use a technique to deal with smaller scales…
- We used hex binning technique to aggregate point based data into hexagon shaped polygonal features for smaller scales.So we’re going from polygons to points (aggregation)…we now need a consistent symbology treatment to ensure there is a flow between map scales as you zoom in and out.
- Since we’re using chromadepth as a backdrop, we’re not able to use the same (or different) colour ramps to indicate some quantitative difference in the total aggregated deaths for the polygonal symbols at smaller scales. Now we have consistent colours at individual symbols we used picture markers and created a marker style file rather than the more cumbersome font-based approach.We wanted to retain the visual hierarchy so decided to use pure red for the polygons and the point symbols as you go through the scales.We used annotation to place the number of deaths per polygon on the map for context
- Hexagonal point symbols redesigned for the individual incidents designed in sympathy with the hex binning to ensure a consistent aesthetic as you move through the scalesWe didn’t want to go from the hexagonal data bins to triangles at larger scales.
- So there’s now 10 scales at which this map will be viewed...meaning that each scale needs to be designed uniquely but such that they also blend together consistentlyCreating a table showing your layers and how you envisage publishing them is a good way to think through this process.Content would be served in different ways at different scales (show the scales)At large scales we move away from the chromastereoscopic background into imagery…using basemap service. At large scales the chromastereoscopic impact is minimal anyway and using imagery helps ground the location in reality to show the Popups now allow us to reveal far more detail through the map. Designed to feed from the attribute table we can create a custom popup that provides all the deathly details at an individual level and the aggregated details at smaller scales.
- Three MXDs to create three servicesChromadepth DEM to be cached as a map serviceBackground data and labels to be cached as a map serviceDeathly details (points and polygons) to be published as a feature service
- Visually engaging and detailed....combining an interesting background with eye-catching symbology that mirrored the death categories in the bookAllows for greater interactionDoesn’t have the immediate impact of the print versionAllows for wider circulationFaster to publish than print! Date field could allow an animated version to be built relatively easily.Easy to update (next death)
- Allowed us to explore the differences in design, authoring and publishing a traditional print map and a web map to tell the story of the book.Responsibility of map maker to design sympathetically – lack of blood and gore on web version seen by many.
- Print your own copy, go to the online version