Changing landscapes: Designing the next generation of online Topographic Maps

By Damien Demaj

Last week we launched a refresh of the World Topographic Map and in this blog entry we explore the design process, the design objectives and outline five key changes to look out for.

The World Topographic Map. Redesigned to meet a changing a landscape.

Background

The original design of the World Topographic Map drew inspiration from the USGS topographic map 1:24k quad series (see figure 1 below). As the popularity of the map expanded internationally during late 2009, the map quickly outgrew its original USGS skin. In early 2010 we released an International design to accommodate the cultural differences between map users around the world.

Figure 1: Previous designs – USGS design (left) and the International design (right)

By late 2011, the rapid growth of the community maps program and the explosion of web based mapping forced us to re-evaluate the World Topographic brand, its design and the experience it was delivering to our users.

Research and Conceptualization

In order to start re-thinking the design to meet these new demands we set out to better understand and explore our user’s requirements and their relationship with the map.

We examined hundreds of web maps on ArcGIS.com and also studied examples of maps that had been published in ArcNews and ArcUser magazine. By doing this we were able to summarize ways in which our users were using the map. From this research we found:

1. Our users mostly used a selection of hues from the primary and secondary color palettes to symbolize their data with. Red was the most used color (see figure 2).

Figure 2: ArcMap’s color selection window.  Most users selected colors for their data from within the black rectangle. The most commonly used colors are shown in order below the color window, where 1 indicates the most commonly used color.

2. Users typically use very simple point and line symbology when overlaying their data on the map.
3. Many maps on ArcGIS.com and in print contained no overlay data at all. This showed us that the map was still very much being used as a reference map.
4. The majority of users were mapping natural phenomena.
5. The maps main users were from industry groups like; Forestry, Geologic, Water  Resources, Leisure, Parks and Recreation.
6. Most maps could be categorized as being either beginner to intermediate level maps. Very few were considered advanced maps.

Once we had an understanding of our user’s goals, their symbology and color use we set out to identify whether the map’s current symbology supported those patterns. To do this we embarked on a thorough review of the existing map design.  The popularity of red meant that the current road symbology was causing conflict with our user’s data (see figure 3).

Figure 3: The red roads from the old USGS design made it very difficult for our users to use red as an operational overlay color. The International design used a variety of hues to classify road classes and these colors were also providing an unnecessary distraction for the user. 

The placement and size of the old italicized road labels was  also causing some readability issues through some scales (see figure 4).

Figure 4: The downtown image on the left (1:4k) displays UC italicized road labels from the old design. The size, weight and form of the labels make them difficult to read against the background detail. The image on the right highlights one of the problems of labeling roads above their centerline  At this particular scale (1:36k) it is difficult to associate which label belongs to which road centerline.

We also wanted to discover whether there was a global topographic style that we could adopt in order to satisfy a global audience. We conducted a study of over 150 traditional paper topographic maps and other online terrain maps for patterns of symbol design. From this study we found that there were some common styles across these maps for certain features like contours, hydrography and vegetation. However there appeared no clear common style for road symbolization, urban areas and typeface (see figure 5).

Figure 5: A selection of paper topographic maps showing the diversity of urban area symbology from deep browns through to rich magenta’s and near fluorescent reds.

The Vision: 10 Design Objectives

In order to structure the design process and develop guidelines to focus our work, we formalized 10 design objectives for the re-design:

5 Key Design Changes

Let me now walk you through five key elements of the new design. Of course there are many more, and I encourage you to explore the map and experience them for yourself. These are my top 5.

1. No more red roads

The first change we made to the existing map symbology was to remove the red from the road symbols (see figure 6). But how were we going to represent the four classes of roads that we display on the map? There are various options, like varying the hue through each class, or we could use the same color but vary the line width or line type, or we could use line casing to enhance particular classes over another (just to name a few). The process of design we employed was really one of elimination. Let’s start with the local streets. There are literally millions of local streets at all of the large scales. They are often very irregular in shape (particularly in Europe) so we needed a color that would neutralize them throughout the map. What better ‘color’ to use than white, it is the least obtrusive color of them all. It allows us to display thousands of local streets in one map view without overwhelming the user. To ensure the white local streets weren’t lost against the light map background we added a light grey casing to each road (see figure 6).

Figure 6: Central Paris exhibits a typical European city street network. The irregular street pattern and small blocks are very different to most US cities where the street layout is largely built around a grid and the city blocks are often further apart. These two very different regional patterns played an important role in designing the road symbology and labels for the map.

We continued neutralizing the remaining three road classes (Collector, Major Arterial and Freeway/Highway) by using a single hue to symbolize them. In order to distinguish between the classes we varied the width of the road lines and varied the road label form by using regular through bold versions of the typeface. We didn’t use different colors to distinguish between each road class because it has the potential to cause conflict with the typical rich thematic map colors our users use. We chose a mid-tone grey (40%k) as the choice of road color for all three remaining classes (see figure 6). This provided a strong contrast between the local streets, and was deep enough to add some real structure and orientation to the complex urban areas without drawing too much attention away from other important urban features like buildings, points of interest and land use areas. There is also a certain sophistication that these neutral greys bring with them, and of course they provide the perfect backdrop routing lines.

2. A reduction of point symbols

Figure 7: The mid scale image on the left displays linear route markers compared to the larger scale image on the right which shows a more traditional representation of these features.

Of the three operational data types (point, line and polygon), points were the most commonly used by our users (closely followed by polygons). So we deliberately tried to reduce the quantity, complexity and size of our point symbols, particularly the road markers (shields). The previous design of the World Topographic stripped away all of the color from the road markers in order to provide less competition with overlay data. Through the mid scales the quantity of road markers can be very difficult to manage and the map can begin to be overwhelmed. Since this isn’t a street map it didn’t make sense to over emphasize these features. So we removed the road shields from the map through the mid scales (see figure 7) and added the route number as a linear label to each road line segment. This significantly increases map real estate. Once the space on the map opens up at the small scales and the map transforms more into a street level map we bring the traditional representation of the road markers back. Multi scale mapping allows you the flexibility to re-symbolize features as scale changes and as the map’s focus changes.

3. Tame the magenta (lilac)

Emotional responses to colors have been studied and well documented for years. Colors on maps are no different, and our feedback loop suggested that the lilac used for educational institutions was not to many people’s taste! Educational institutions are often spread over numerous blocks within a city and at some scales are all the map user sees in their map view. So we pulled back the saturation of the magenta to soften its emotive impact and tie in better with the overall look of the map (see figure 8).

Figure 8: Toning back the magenta (lilac) used to symbolize educational institutions. A comparison between the vivid lilac used in the old design (left) and the more subtle version used in the new design (right).

4. Improved road labeling

One of the most common frustrations map users deal with is a map whose labels are hard to read. Labels that are poorly placed and arranged in a non-uniform manner make a map readers life very difficult. An area of concern on the existing map was the legibility of road labels at the large scales. Earlier in the blog we highlighted some of the problems with the current form of the labels and their placement. To improve the readability of the road labels we center aligned the labels which made label-to-feature association much easier. We also converted all of the labels to regular as opposed to italics. Studies have shown that it takes users longer to interpret italic typefaces. We also added a small halo around the black road labels to ensure they were clearly readable against the grey roads. In general our goal was to simplify the road label styles. You will notice that we now use fewer visual variables for our road labels than before which simplifies the whole map reading experience.

5. Improved hillshade

Figure 9: An area of The Alps just east of Geneva in Switzerland displays the increased definition in the hillshade across the map (click for a higher resolution image)

What would a topographic map be without hillshade and contours? The hillshade gives the user an overall impression of the terrain while the contours aid in determining elevation and steepness. The feedback from our users and our community of contributors was that the hillshade in the existing map was too generalized and lacked definition. So we worked on bringing back some definition into the hillshade particularly on the shaded slopes (see figure 9). For the next release of the map we plan to expand on this work even further which will give the map a more classic look and feel and significantly improve the depiction of the landscape.

Summary

The World Topographic Map design will continue to evolve in order to meet our user’s requirements and to keep pace with their patterns of use. Of course, no map is ever complete and no design is ever finalized, and we look forward to growing and maturing the design as time passes. Ten years ago this map would have been unthinkable. But in a short time online maps have become a part of everyone’s daily life. To those millions of  users who view and interact with the map through their browser, mobile or tablet I hope we have given you an insight into why this map appears the way it does, and the decisions we made along the way. The new design allows you to prepare and publish better web maps by making it more consistent, functional and it provides a better background on which to place your own data.  Ultimately, this new basemap design should reduce your workload by better supporting your data while still offering a great reference map to explore the natural features of our world.

Damien is Geospatial Product Engineer at Esri and was the lead designer on the World Topographic Map project. @damiendemaj

Notes:

You can download the style files and map document used in the new design here.

The new design of the World Topographic is being rolled out in stages.

The World Topographic Map was built entirely using ArcGIS.

This entry was posted in ArcGIS Online, Community Maps, Mapping, Uncategorized and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

4 Comments

  1. jasonsawle says:

    Hello Damien

    Great job! I used the Topographic map this week with 50 K-12 teachers and they loved it. Projected onto a classroom interactive whiteboard it is a thing of beauty that draws people in.

    Regards

    Jason
    Esri UK

  2. cgnadinger says:

    Very nice! I love the adjustments!
    Any chance you all will share the layers / symbology details?

  3. ddemaj says:

    Thanks for reminding me cgnadinger. You can download the style files and map document used in the new design at: http://resources.arcgis.com/en/communities/community-maps/01w60000000q000000.htm#s=0&n=30&d=1&md=g-type:0010

  4. Shane Matthews says:

    Great job and explanation! Some contributors (early adopters to Community Maps) ask why the change? This is a great resource to reference.