Lesson 8: Interactive Mapping
Lesson 8: Interactive MappingThe links below provide an outline of the material for this lesson. Be sure to carefully read through the entire lesson before returning to Canvas to submit your assignments.
Note: You can print the entire lesson by clicking on the "Print" link above.
Overview
OverviewWelcome to Lesson 8! In this lesson, we discuss another key topic in cartography: map generalization. Generalization, or transforming a map’s features (traditionally from large-scale to small-scale) to fit a map’s given scale and purpose, has been increasingly salient given the proliferation of interactive multi-scale web maps. Such maps are among a new generation of ”fast maps”, which include interactive, animated, and viral maps and mapping products. These maps, as well as other products of technological advancements in mapping, including 3D maps and extended reality applications, present new challenges and opportunities for geographers across many fields of interest.
In Lab 8, we break from our focus on mapping in ArcGIS and Tableau to design an interactive multiscale basemap using Esri's Vector Tile Style Editor online map design platform. To highlight the creative designs possible with such tools, we design this map by taking inspiration from a favorite piece of media/art/computer game/etc. Lab 8 thus ties together our discussion of generalization and interactivity with previous discussions of maps for advertising, map symbology, and basemap design.
Learning Outcomes
By the end of this lesson, you should be able to:
- describe the differences between content, geometry, and symbology generalization operators and their roles in multi-scale map design;
- evaluate a map designer’s use of selection and generalization on a map and the logical and ethical implications of these decisions;
- articulate the merits and challenges associated with designing and using animated and/or interactive maps (vs. static maps);
- discuss applications of cartography within the domain of Extended Reality (XR) – such as Virtual Reality (VR) and Augmented Reality (AR), while recognizing their respective disadvantages;
- design a custom multi-scale Mapbox basemap in the style of a movie, TV show, or other favorite piece of media and/or art.
Lesson Roadmap
| Action | Assignment | Directions |
|---|---|---|
| To Read | In addition to reading all of the required materials here on the course website, before you begin working through this lesson, please read the following required readings:
| The required reading material is available in the Lesson 8 module. |
| To Do |
|
|
Questions?
If you have questions, please feel free to post them to Lesson 8 Discussion Forum. While you are there, feel free to post your own responses if you are able to help a classmate.
Map Generalization
Map GeneralizationIn Lesson 7, we discussed a common theme in cartography: uncertainty visualization. In Lesson 8, we focus on how the complexities of our world are reduced into a visualization via a map. Specifically, when we reduce the complexities of Earth’s geography into a form more appropriate for a map’s given scale and purpose, this is called cartographic generalization. Thorough understanding of generalization and the related concept of scale is—and has always been—essential for creating high quality maps. The increased prevalence of web-maps—featuring seamless, simultaneous zooming and panning across multiple extents and scales—has encouraged increased research in the process of generalization. In Lesson 8, we discuss generalization, both in general, and in the context of multi-scale and interactive web maps.
Maps of Earth or other terrestrial bodies are set to some scale which reduces the complexities of Earth's features and their true size. As a result, all maps contain some level of generalization—maps would be unusable otherwise. A map at a scale of 1:1 is rather pointless. Representing every element of the real world on a map is not feasible, nor would such a map be interpretable by readers. Generalization permits cartographers to construct maps with an appropriate level of detail while preserving spatial relationships, feature density, and complexity. In Lesson 4, we discussed the necessity of using the correct resolution of (raster) digital elevation data to create terrain visualizations of a large scale map. In Lesson 8, we focus primarily on the generalization of vector data, such as road networks, hydrologic features, and political boundaries.
When considering what level of detail is appropriate, it is important to consider your map's location, scale, and geographic extent. A map of seaside hotel locations in Massachusetts would, for example, show a much more detailed coastline of Cape Cod than would a map of the entire United States.
It is also worth quickly reviewing the difference between small-scale and large-scale maps: small-scale maps represent a considerable extent of Earth's surface, while large-scale maps represent a reduced extent of Earth's surface. In terms of representative fractions, a 1:2,000,000 map scale shows a greater extent of Earth's surface than a 1:24,000 map scale. Whereas the former scale would be appropriate to map a state, the latter scale would be more appropriate to map a limited portion of a city. Even professional cartographers mix these two up on occasion, so just do your best to commit this to memory.
It should also be noted that there is no hard-and-fast definition of what constitutes “small” and “large” scale, i.e., there is no quantitative agreement on the scale at which, for example, a map goes from small- to large-scale. Added to this confusion is the use of "medium" to indicate a scale. Generally, maps referred to as “small-scale” tend to depict large areas, such as regions, states, or continents. Large-scale maps tend to depict cities, neighborhoods, streets, and so on. But again, these are not immutable declarations. Instead, when we compare small- and large-scale maps, we are doing so in relative terms. However, small-scale maps nearly always benefit from increased generalization, and large-scale maps benefit from greater resolution or detail. Here is a brief overview of map scale by the USGS.
Natural Earth is a source of boundary data that we have used extensively in this course. Figure 8.1.1 below demonstrates the differences in level of detail between different boundary datasets that Natural Earth offers. Natural Earth offers various categories of data and for each category at different scales. For example, the purple boundaries (left) show the most detail. Such data are appropriate for large-scale maps (scale = 1:10,000,000). Here, the level of detail shown in this large-scale vector linework is high. At this map scale, the intent is to present a dataset with a greater amount of detail compared to the other smaller scales. The pink (center) boundaries would be better suited for smaller-scale maps of countries or continents (scale = 1:50,000,000). The blue (right) boundaries are highly generalized and would be best suited for very small-scale maps such as the globe or advertising maps that use heavily stylized data (scale = 1:110,000,000).
Data Source: Natural Earth, Esri (basemap from ArcGIS).
Figure 8.1.2 shows each of the above boundary files at an appropriate scale given their level of detail. The extent of the largest-scale map (black rectangle of the frameline - left) is shown by the black rectangle extent indicator in the center and right maps. Note that as the scale becomes smaller (moving from the maps left to right in Figure 8.1.2, we see a diminished level of complexity with the administrative boundaries. Try to think of mapping purposes for which each level of boundary detail would be appropriate.
Data Source: Natural Earth, Esri (basemap from ArcGIS).
Student Reflection
For an interactive experience with generalization, try uploading a shapefile from NaturalEarth to the interactive tool MapShaper.
So far, we have talked about the overall idea of generalization – using data that is the correct level of detail for your map’s scale. A general-purpose map of a small town, for example, would likely show lakes, ponds, and reservoirs, while a small-scale map of a large region would show only the largest waterbodies (e.g., rivers, large lakes, and oceans). Often, rules decided upon by the cartographer are used to determine what elements are displayed on a map (e.g., “only show lakes that cover more than five square miles”). However, due to the uneven distribution of features across the landscape, cartographers also have to make some generalization decisions that are complex, subjective, and specific.
An example of this is demonstrated by Figure 8.1.3. Some cities are labeled, and some are not. At first, it may appear that the largest cities are labeled, and to some extent, this is true. New York, NY, is labeled, as well as Washington, DC. However, you may notice some cities that are absent—most notably Philadelphia, PA. A city with 1.5 million people is left off the map, while Reading, PA—a city of about 94,000—is included. Why?
Philadelphia is located in a densely populated region, with many nearby cities, such as Trenton, Baltimore, and Washington, D.C. By contrast, Reading, PA, is surrounded only by smaller towns. Web-maps are designed to display—or not display—city labels based on a number of factors. These include population and general importance, but also design-relevant factors, such as the density of labels on the map. In the case of tools like Google Maps and Apple Maps, the features included on the map are also influenced by the user’s search history and/or other digital activity. Look at several web maps of the same location at the same scale (or zoom level) to see what similarities and differences in labels, road network, and hydrology features are apparent.
Recommended Reading
Chapter 3: Map Generalization: Little White Lies and Lots of Them. Monmonier, Mark. 2018. How to Lie with Maps. 3rd ed. The University of Chicago Press.
Generalization Operators
Generalization OperatorsGeneralization Operators
As suggested by the previous OpenStreetMap example, generalization is also a process for dealing with conflict and congestion among map symbols. Generalization can also be used as a strategy for creating a more readable and useful map by selectively including a limited set of labels, for example. Though this is a complex and context-dependent problem, some resources are available to help you determine the appropriate level of detail for your maps. The now-defunct website ScaleMaster (Brewer et al. 2007), for example, offered advice to mapmakers on which features ought to be included at different scales, and for different mapping purposes.

We will not go into the details of ScaleMaster in this lesson, but you are encouraged to read more about ScaleMaster through the linked Cartographic Perspectives article if you are interested. The most important takeaway is that different scales require differing levels of detail, and that the appropriate level of detail is mediated by the map’s context (e.g., topographic vs. zoning maps).
Generalization can be broadly categorized as either selection or symbolization. In the context of scale, selection is simple—it refers to the decision of whether to include (or not) a feature at a certain scale, while symbolization refers to alteration of the way a feature is designed in order to make its design more appropriate for the scale at hand. For example, when designing a small-scale map, you might choose not to include cities unless they are of high population (selection), and to symbolize these cities as labeled points rather than as areas (symbolization). Generalization traditionally refers to reducing detail in a map as much as is necessary to maintain legibility and usefulness at a specified scale. Generalizing multi-scale web maps (which exist at many rather than one scale) is more challenging, but not fundamentally different—we can think of every possible scale step (or zoom level) of a multi-scale web map as its own map for which an appropriate level of detail must be determined.
As generalization is a fundamental topic in cartography, many cartographers have proposed theoretical frameworks for discussing generalization. For simplicity, in this lesson, we will focus on the set of generalization operators proposed by Roth et al. (2011), as they were developed based on a comprehensive review of previous literature. As we discuss generalization operators, an important distinction should be made between generalization operators and generalization algorithms. Operator refers to a cartographer’s conceptualization of an intended change (e.g., I want to remove some roads to reduce the visual clutter of this road network), while an algorithm is a system followed for implementing this idea (e.g., I will remove all roads with speed limits below 25mph) (Roth et al. 2011). Like Roth et al., we focus on operators rather than algorithms in this lesson as they are more widely applicable to map-making tasks, and not dependent on the use of specific datasets or GIS software tools.
Roth et al. (2011) classify feature generalization operators into three groups: content, geometry, and symbol. Content operators directly alter the content of the map, typically by adding or removing features at particular scales. An example would be deciding not to include local roads or trails in a small-scale map as these features would not be visible at small scales. These operators include: add, eliminate, reorder, and reclassify.
Geometry operators describe the ways in which different features' geometry can be altered to create a map that is more legible and aesthetically pleasing. Examples include smoothing a line feature and representing a city as a point rather than an area. Geometry operators include: simplify, aggregate, collapse, merge, displace, exaggerate, and smooth.
Symbol operators alter feature symbology to improve legibility, but do not change the features’ underlying geometry. An example would be simplifying the pattern in an area fill so it still looks good at a smaller scale. Symbol operators include adjust color, enhance, adjust iconicity, adjust pattern, rotate, adjust shape, adjust size, adjust transparency, and typify.
It is not necessary to memorize the above operators, but you should aim to understand the difference between the three groups of operators (i.e., content, geometry, symbol) and think critically about situations in which each might be useful.
Recommended Reading
Brewer, Cynthia A., and Barbara P. Buttenfield. 2007. “Framing Guidelines for Multi-Scale Map Design Using Databases at Multiple Resolutions.” Cartography and Geographic Information Science 34 (1): 3–15. doi: 10.1559/152304007780279078.
Roth, Robert E., Cynthia A. Brewer, and Michael S. Stryker. 2011. “A Typology of Operators for Maintaining Legible Map Designs at Multiple Scales.” Cartographic Perspectives 68 (68): 29–64. doi:10.14714/CP68.7.
Brewer, Cynthia A., and Barbara P. Buttenfield. 2010. “Mastering Map Scale: Balancing Workloads Using Display and Geometry Change in Multi-Scale Mapping.” GeoInformatica 14 (2): 221–239. doi:10.1007/ s10707-009-0083-6.
Dynamic Maps
Dynamic MapsThe advent of the world wide web initiated many changes in the world of map-making. Though centuries-old cartographic principles are still relevant in a web-mapping world, digital map-making has presented new unique opportunities and challenges for cartographers.
The increasing ubiquity of the Internet has influenced cartography in many ways, from changing the nature of maps themselves (e.g., with new interactive and animated maps), to facilitating a system wherein map-making tools are widely accessible—a world in which almost anyone can make and share it widely.
Figure 8.3.1 demonstrates the evolution of the popular GIS software ArcGIS, from ArcMap/ArcView to ArcGIS Pro, designed with modern processing capabilities, searchable toolboxes, and a ribbon-based interface. Perhaps even more indicative of the times is the widespread availability of web-based mapping tools and libraries, including Felt, Leaflet, Mapbox, Social Explorer, and many more.
Geographer Mark Monmonier (2018) uses the term “fast maps” as an umbrella term to describe many new forms of maps and mapping products that have come about in the internet age. These include interactive maps, animated maps, and viral maps—maps that may be static or otherwise but are nevertheless a product of new technologies and widely spread due to the Internet and social media. New interests in virtual and augmented reality have also added to the variety of maps available in this widely connected world.
Student Reflection
If you have several years of experience using GIS Software, consider how software that you have experience with has changed over the course of your career. What software did you use when you were first learning GIS or started your professional work? How is it different today?
Recommended Reading
Chapter 14: Fast Maps: Animated, Interactive, or Mobile. Monmonier, Mark. 2018. How to Lie with Maps. 3rd ed. The University of Chicago Press.
Interactive Maps
Interactive MapsWe briefly discussed interactive maps in the previous lesson on multivariate mapping—interactivity is often used to solve problems related to multivariate mapping, such as the challenge of fitting all the necessary data into one map frame. New technologies (most notably, mobile smartphones) have both increased the challenge of designing maps and contributed their own solutions. Creating a map that can be viewed on a 4.7-inch screen, for example, can be quite a difficult design problem. Yet, accessibility to mobile cell data and location-aware devices have enabled the creation of zoomable, pan-able, user-specific maps—thus reducing the amount of map content required in-view at any one time.

The data is available under the Open Database License (CC BY-SA).
Web maps such as the one in Figure 8.4.1, which allow the user to zoom and pan around the extent of the map, are commonly called slippy maps. Such maps let you zoom and pan around (think of the map "slipping" around as you drag the mouse). While these slippy maps often serve as general purpose maps, they are most often used as basemaps that provide location context for a variety of thematic or functional overlays, such as the traffic volume data or navigational functionality of Google Maps.
We can categorize interactive maps by the level of user interaction (low to high) they permit. Some maps allow only simple interactions such as panning or zooming, or perhaps show additional information about features on mouse hover or click. Others may be developed for expert users and include the ability to search, filter, and analyze data, as well as the option to upload the user’s own data for exploration and analysis. Many interactive maps, such as the one in Figure 8.4.2, fall somewhere in the middle of this continuum, allowing a multitude of user interactions/experiences.
While the term interactive map is most often used to describe maps such as the one in Figure 8.4.2, other maps are better characterized as containing passive interactivity. These are maps that respond to actions of the user, though not in the traditional sense of a user interacting with tools via a map interface (Monmonier 2018). An example of this is the navigation function in Google Maps, usable in so many car information/navigation screens, or an automotive personal navigation device (PND), such as those made by Garmin or TomTom.

Though these devices also contain traditionally interactive components, they are primarily designed to respond to one particular user behavior—movement through space and time. Such mapping tools provide navigation, real-time traffic, and safety-zone warnings; some even provide advanced notifications such as lane departure warnings via unit-mounted cameras and other sensors.
Interactive maps have the potential to be useful in any geographic decision-making context wherein the computer or other device can provide an appropriate interface between the human and the map (Monmonier 2018). Due to the complexity of many of these products, however, the effectiveness of an interactive map is often dependent not only on the design of the map itself, but on its interface and related functions. This has made interactive map-making a particularly interdisciplinary subset of cartography, as successful approaches borrow increasingly from research in data visualization, human-computer interaction (HCI), and computer science. We will discuss the interface between maps and their users in more detail in Lesson 9.
Recommended Reading
Roth, Robert E. 2013. “Interactive Maps: What We Know and What We Need to Know.” Journal of Spatial Information Science 6: 59–115. doi:10.5311/JOSIS.2013.6.105.
Animated Maps
Animated MapsThough animated maps may also have interactive components, they are uniquely defined by their use of animation to display spatial data. A type of animated map you have likely seen and used is a weather radar map, such as the one shown in Figure 8.5.1. These ubiquitous maps typically contain little user-interaction capabilities—they are watched by the user as if watching a movie—though they may contain zooming or panning functionality, or the option to pause the animation at a point in time.
Animated maps are used to visualize a wide range of data topics, from weather to health data, demographic statistics to travel routes. Most common among these maps is the inclusion of time as the variable that is changed as the animation is performed. Though, theoretically, any quantitative variable could be depicted via animation, the use of animation to depict data through time is supported by the congruence principle which states that the external graphic representation of data should match its intrinsic characters (e.g., in the case of animation, the animation plays across time, and represents temporal data) (Tversky, Morrison, and Betrancourt 2002). Figure 8.5.2 shows a map animation where dots move across the map representing the day in the life of Chicago's extensive taxi network.
Despite the popularity of animated maps for data visualization, little research has yet been conducted that supports its use as a complete replacement for static graphics such as small multiple maps (Tversky, Morrison, and Betrancourt 2002; Griffin et al. 2006). Animated maps present unique challenges for users, who are often hindered by perceptive constraints, such as change blindness – the inability to detect changes in maps across animated frames, often combined with user overconfidence in map comprehension (Fish, Goldsberry, and Battersby 2011).
But there are some advantages: Griffin et al. (2006) conducted a map-cluster detection study with animated maps and small multiples and found that users did tend to be more successful with animated rather than static maps for this task. However, they note an important challenge in animated map design: the pace or speed of the animation is influential on user success, and different paces are more useful for different maps. There is no ideal animation pace for maps, though cartographers ought to consider what pace might be most useful for their map’s intended audience and purpose. One way to address this issue is to add simple interaction features to animated maps, such as the ability to pause or step through time, so the user has control over the animation speed that works best for them (Tversky, Morrison, and Betrancourt 2002). Though many visual variables are used in animated mapping, pace is among the visual variables used specifically for encoding data via animation. Other animation-relevant variables include rate of change – how much the map changes between each animated frame, and order (DiBiase et al. 1992), which is the order in which individual frames are presented (often chronologically, but not always).
Student Reflection
Consider a mapping purpose for which you might want to create an animated map with frames in non-chronological order. Why would this design choice benefit the map user?
Alan MacEachren (1995) extended the above-mentioned visual animation variables to include display date – the starting time of a temporal sequence, frequency – the number of unique animation frames within each unit of time (e.g., animated frames per year vs. animated frames per month), and synchronization – the coincidence (or otherwise) of time series when two or more are displayed at once (e.g., snowfall and school attendance might be displayed out of sync).

Recommended Reading
Tversky, Barbara, Julie Bauer Morrison, and Mireille Betrancourt. 2002. “Animation: Can It Facilitate?” Int. J. Human-Computer Studies Schnotz & Kulhavy 57: 247–262. doi:10.1006/ijhc.1017.
Griffin, Amy L, Alan M MacEachren, Frank Hardisty, Erik Steiner, and Bonan Li. 2006. “A Comparison of Animated Maps with Static Visually Maps for Identifying Clusters Space-Time.” Annals of the Association of American Geographers 96 (4): 740–753.
Dibiase, David, Alan M. MacEachren, John B. Krygier, and Catherine Reeves. 1992. “Animation and the Role of Map Design in Scientific Visualization.” Cartography and Geographic Information Systems 19 (4): 265–266. doi:10.1080/152304092783721295.
Viral Cartography
Viral CartographyThough the term “dynamic maps” implies movement within maps (i.e., animation and interaction), we discuss here a similar category of maps, as suggested by Monmonier (2018) in his categorization of “fast maps” – viral maps. Though there is no widely accepted definition of a viral map, the term applies broadly to a map that is shared widely, and through non-traditional processes (i.e., through users sharing content with each other via social networks, rather than from a singular, popular provider) (Robinson 2018).
Maps that spread in this way tend to inspire emotion and be persuasive in nature (Monmonier 2018; Muehlenhaus 2014; Robinson 2018). Despite the heightened study of such emotive and persuasive maps due to their dispersion on social media, persuasive maps themselves are not new. Figure 8.6.1 shows a map from the Civil War, which illustrates General Winfield Scott’s plan to conquer the South. The snake illustrates a dark, emotional message.

Social networking sites such as Facebook or WhatsApp have facilitated the spread of maps to a global audience with incredible speed—it is difficult to overstate the contrast between this new environment of online map distribution and cartography’s history of maps being made primarily by professional cartographers or those in other positions of power. In many ways, we find ourselves in an exciting, dynamic, more democratic era of map-making. It is important to note, however, the challenges that have arisen in this new era. The increasing ubiquity of maps and map-making has blurred the lines between mapmakers who make mistakes and those who deliberately mislead; between personal perspectives and dangerous propaganda.
Related to the increased availability of map-making tools and online map distribution channels, web technologies have facilitated increased access to a wide amount of data within the public domain. Where debate tends to ensue, however, is when such data are made more visible and accessible to everyone, such as with the creation of an engaging map. Maps printed along with an article in a local newspaper titled “The Gun Owner Next Door: What You Don’t Know About the Weapons in Your Neighborhood” (linked below) provide a useful case study of such a debate. The article and accompanying maps identified gun owners in the local area by their names and addresses. The map itself ‘went viral’ both due to people's interest in the data mapped and the outrage that the discussions surrounding it incurred.
Student Reflection
Read the article mentioned above, available here: “The Gun Owner Next Door: What You Don’t Know About the Weapons in Your Neighborhood.” Would you consider it ethical to map any data, as long as it is available in the public domain? If not, where do you stand on this issue? How might we decide where to draw the line? As a Penn State Student, you have free access to The New York Times, The Wall Street Journal, and others through the Student News Readership Program. The following link provides instructions on how to get access.
Maps are omnipresent in political media—consider the interactive maps used extensively on news channels while reporting election results. About a month before the 2016 US Presidential election, Nate Silver (Silver 2016) posted a map with the heading “Here’s what the election map would look like if only women voted:”
In addition to reaching viral status itself, the map inspired many others to create similar maps, such as what the election map would look like if only millennials/white women/people of color voted. Robinson (2018) uses Silver’s map as an instrumental example of a viral map in his recent paper, Viral Elements of Cartography. He notes that it is characteristic of viral maps to inspire the creation of others.
Though viral and persuasive maps are often discussed in tandem (e.g., Muehlenhaus 2014), viral maps need not always be persuasive or political. The map in Figure 8.6.2 below was designed by Joshua Stevens, a cartographer at NASA who, despite being well-known in the data visualization community, has only a fraction of the online following of journalist Nate Silver (Silver 2018). It was the creativity and entertainment value generated by Stevens’s map that was responsible for generating its viral status.

Like Silver’s map of women voters, Stevens’s Sunsquatch map inspired the design of many others, some of which went viral themselves, such as Jerry Shannon’s Smothered and Covered map (Figure 8.6.3) which illustrated where one could watch the eclipse while eating at Waffle House.
Watch his (entertaining) discussion of this map here: Viral Cartography: Or, how to make an affective map.
These maps by Silver, Stevens, and Shannon highlight the usefulness of Monmonier’s classification of new-era maps facilitated by web technologies as fast rather than dynamic or interactive maps (Monmonier 2018). The speed at which these maps were shared to thousands of users certainly qualifies them as fast, though they are simple, static maps. And though these static maps do not include animation or permit user interaction, they did instigate discussion and inspire further map-making, making them interactive in their own right. Certainly, interactive and/or animated maps can also ‘go viral.’ The above examples illustrate, however, the power in pairing a simple illustrative graphic with a creative idea.
Recommended Reading
Muehlenhaus, Ian. 2014. “Going Viral: The Look of Online Persuasive Maps.” Cartographica: The International Journal for Geographic Information and Geovisualization 49 (1): 18–34. doi:10.3138/carto.49.1.1830.
Robinson, Anthony C. 2018. “Elements of Viral Cartography.” Cartography and Geographic Information Science 00 (00). Taylor & Francis: 1–18. doi:10.1080/15230406.2018.1484304.
3D Maps
3D MapsSimilar to how new web-based technologies have made it easier to design interactive and animated maps, technological advancements have altered mapmaking in another, related way: enabling more realistic depictions of the real world through more accessible 3D-mapping tools and virtual/augmented reality.
Physical, three-dimensional models have long been used to visualize geospatial information, such as cities (e.g., Figure 8.7.1), the Earth’s terrain, buildings, and so on. These models are useful in that they provide a realistic view of the environment, but their realism and complexity often come at a cost. For example, the oblique view inherently obstructs some of the scene (e.g., locations behind tall buildings), and physical models are typically not built to scale.

In the past, creating complex 3D digital visualizations and physical models came at a near-prohibitive cost. Yet recent increases in the computational power of mainstream computers and new software tools have reduced the time, capital, and expertise required to create three-dimensional maps. Naturally, this has encouraged cartographers to make more of them. The inclusion of 3D visuals in mapping tools has become increasingly widespread; realistic modeling of buildings can now be seen, for example, in popular mapping applications such as Google Maps, even if their inclusion is questionably useful.
Increasing interest in and availability of 3D mapping tools has also resulted in an increased use of extruded or perspective height as a visual variable. Unlike the 3D map examples above, perspective height uses a third dimension to encode a variable distinct from the actual physical height of a feature.
An example is shown below (Figure 8.7.2). This is a choropleth map that uses a multi-hue sequential color scheme to encode the population density of the United Kingdom by postal code. In addition to color, however, another visual variable is used: height. Areas with higher densities are extruded from the map, giving them increased visual emphasis. The result is a map that echoes the look of varied terrain, only instead of actual physical terrain, it visualizes the terrain of population density across the landscape.

Similar to the visual depiction of uncertainty, an important question surrounds the use of 3D visualization: is it useful? The answer, as suggested by recent cartographic research, is similar: it depends. Generally, studies have found that people enjoy using 3D maps more than their 2D counterparts. These studies also typically find, however, that people perform tasks less efficiently with 3D graphics than with simpler 2D visualizations (Smallman and John 2005).
There is no scientific consensus on whether 3D visualization tends to be helpful for users, and due to the context-dependence of such a question, it is unlikely that there will ever be a categorical answer. What the current state of research suggests is that 3D visualizations should be used with caution. In contexts where seconds count (e.g., emergency management; disaster response) for example, 3D visualization tools might be a risky option. In contexts where user enjoyment is of greater priority (e.g., in a university’s campus map), it might instead be an excellent choice.
Recommended Reading
Padilla, Lace. 2018. “How Do We Know When a Visualization Is Good? Perspectives from a Cognitive Scientist.” Medium.
Çöltekin, A., I. Lokka, and M. Zahner. 2016. “On the Usability and Usefulness of 3D (Geo)Visualizations - A Focus on Virtual Reality Environments.” International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences - ISPRS Archives 41 (June): 387–392. doi:10.5194/isprsarchives-XLI- B2-387-2016.
Lesson 8 Lab
Lesson 8 LabMultiscale Map Design in the ArcGIS Vector Tile Style Editor (VTSE)
In Lesson 6 and 7, we explored Tableau and the interactive maps that were possible. In Lesson 8, we will continue with the interactive map environment. You learned that the recent proliferation of such interactive maps has brought the challenges of map generalization back into focus. To create an effective interactive map, cartographers must consider not only how a map looks at one scale and extent (i.e., as in a typical static map) but at all locations and every scale.
As suggested above, creating an interactive web basemap can be a challenging task. Fortunately, tools exist to make this process easier and more efficient. In Lab 8, rather than using ArcGIS Pro or Tableau, we will be working in the ArcGIS Online ecosystem. ArcGIS Online (AGOL) is Esri’s online mapping platform. It's not exactly like ArcGIS Pro, but it does offer some of the same functionality—organizing and styling geospatial data, basic analysis—while providing the benefit of cloud-based data synchronization and the ability to more easily publish interactive maps online. AGOL also integrates with ArcGIS StoryMaps, as well as data dashboards, which you may have used yourself at some point.
When one creates a thematic map, one often starts by creating or choosing the basemap. AGOL offers a handful of basemap style options, but they might not always be appropriate for the project you are working on. For example, your client might want you to integrate their corporate style guidelines into the basemap design, or you might want to limit the amount of reference data being displayed in the basemap to reduce visual complexity. Fortunately, Esri has a tool for creating your own basemap style, called the Vector Tile Style Editor (VTSE), which we will be using for this lab.
Before getting into the details of working in AGOL, please be aware that the workflow you need to use is very different compared to ArcGIS Pro, even though they are made by the same organization. AGOL is meant to be more accessible to a wider non-GIS specialist audience than ArcGIS Pro, at least in the sense that there are fewer buttons and tools to keep track of. You can expect a bit of a learning curve with this lab.
This lab, which you will submit at the end of Lesson 8, will be reviewed/critiqued by one of your classmates in Lesson 9 (critique #5).
Lab Objectives
- Design an interactive basemap from the ground up using the ArcGIS Vector Tile Style Editor.
- Build a creative basemap design inspired by a favorite piece of media and/or art.
- Use your knowledge of map generalization to build a basemap that functions well at multiple scales.
- Reflect on the experience and challenges involved in designing an interactive web map.
Overall Lab Requirements
- Submit one PDF document: this should include a link to your basemap design as well as a short reflection statement.
- Example of media-inspired basemaps:
Figure 8.8.1: Nobuhiro Watsuki’s penultimate action-adventure story: Rurouni Kenshin.Credit: Map style by Patrick O’Shea.
Figure 8.8.2: J. R. R. Tolkien’s Middle Earth themed map of Northwest Oregon.Source: Map style by Duncan Freeland.
Specific Requirements
Basemap
- Use at least 12 different layers (total) in your map. Each layer should be individually styled: do not use default settings.
- At least one layer should make use of a pattern fill.
- At least one point layer or label layer should include an icon, either the icon provided, or another one that you made yourself or is in the public domain.
- Data should transition appropriately across scales. Your map will be checked at large (local), medium (regional), and small (world) scales – you will need to set zoom-level controls for some of your layers so that they either appear/disappear or change their styling as the user zooms in and out.
- Draw inspiration from a favorite piece of media/art, such as a famous painting or a favorite TV series. Almost any media will work as an inspiration. However, do not use an existing basemap design from an organization such as Esri or National Geographic. Be creative and have fun with this lesson!
Reflection requirements (250+ words)
- Include the name of the basemap design.
- Include a screen capture of the basemap design that you created in the Vector Tile Style Editor environment.
- Explain the inspiration source (e.g., media, movie, TV show, art, etc.) behind your basemap design.
- Include at least one (1) image or illustration example that served as inspiration for your basemap design.
- Explain the key challenges you faced when working inside the VTSE environment designing your basemap, and how you overcame them.
Lab Instructions
- You should have direct access to AGOL through Penn State.
- Visit this site
- Under the ARCGIS ONLINE (AGOL): Open to all persons with PSU Access Accounts) heading, click on the Visit the Penn State ArcGIS Online Organization link.
- On the page that appears, click on the Penn State WebAccess link.
- You should automatically be directed to the ArcGIS Online environment.
- All map design will take place within the Vector Tile Style Editor web interface, which is an application found within the AGOL environment.
- Download the Lab 8 zipped file (Lab8_Files.zip) (approx. 12 KB). This zipped file contains an example JSON file and images that will be used to demonstrate certain design processes in this lab. Using these examples, you can create new images that would apply to your design work. This zipped file contains the following files:
- blank_style.json
- tree_icon.png
- treen_icon2.png
- tree_icon3.png
Grading Criteria
Registered students can view a rubric for this assignment in Canvas.
Submission Instructions
- Submit one PDF using the naming convention below.
- LastName_Lab8.pdf
- This PDF should include the previously mentioned information.
- Submit to Lesson 8 Lab for instructor and peer review.
- Note: The critique/peer review of the Lab 8 assignment will occur in Lesson 9 (critique #5).
Ready to Begin?
Further instructions are available in Lesson 8 Lab Visual Guide.
Lesson 8 Lab Visual Guide
Lesson 8 Lab Visual GuideLesson 8 Lab Visual Guide Index
- Analyzing Your Design Inspiration
- Introduction to Vector Tile Style Editor
- Creating a New Style with a Blank Template
- A Styling Example
- Consider Your Layers
- Style Label Layers
- Adding Additional Features
- Styling Across Scales
- Working With Patterns and Icons
- Sharing Your Work
1. Analyzing your design inspiration
Before we get into using the software, take a moment to choose a design inspiration for your map. It could be a TV show, movie, painting, comic book, video game, concert poster, food packaging, or some other media with a fairly diverse set of aesthetic elements. That is to say, if you choose Michelangelo’s David as your design inspiration, then you won’t have many style elements to work with aside from shades of white. However, if you choose the TV show Game of Thrones as your inspiration, then you can draw from a large number of the show’s colors, patterns, textures, and possibly symbols, and incorporate them into your design.
So, start by thinking about some piece of media that has appealing (or unappealing!) aesthetic elements, then make a list of what those elements are— again, pay special attention to colors, textures, patterns, and symbols. You will not be submitting this list to be graded, but it will serve as a helpful reference while working on this project. Do your best to make sure that your chosen design inspiration palette looks like the media that you are drawing inspiration from. Returning to the Game of Thrones example: there are a large number of colors and patterns that can be found in the show, but a recognizably “Game of Thrones style” will prominently feature dark, earthy colors to reflect the costumes and environments featured in the show. Once you have identified a handful of elements, it will be time to start using the style editor.
2. Introduction to Vector Tile Style Editor
Unlike our other labs, we will not be using ArcGIS Pro for this lab, so there is no starting file! Instead, we will design an interactive basemap with the ArcGIS Vector Tile Style Editor (VTSE). If you followed the steps outlined above and were able to enter the AGOL environment, you should see the AGOL homepage environment screen shown in Figure 8.1. There are many applications within AGOL that are available for you to use. You can easily access these applications through the dot matrix to the left of your name in the upper right-hand corner of the homepage. Figure 8.2 shows the first several applications available through the AGOL environment. One of the more common applications in the AGOL environment is the Living Atlas, which you may be familiar with in your professional work. To access VTSE, scroll down the list of applications to the bottom. There, you will see the VTSE icon (Figure 8.3). Click on the icon and you will be directed to the VTSE homepage (Figure 8.4).

Screenshot from ArcGIS Online

Screenshot from ArcGIS Online
Screenshot from ArcGIS Online

Screenshot from ArcGIS Online
As you scroll through the basemap gallery shown in Figure 8.4, you may notice that some of the most visually appealing basemaps are not what we would consider traditional basemaps. They take significant creative license with their color and pattern design, while still incorporating proper cartographic generalization and providing legible map symbols. Our goal is to do the same in Lab 8—you will be creating a new interactive basemap inspired by your favorite piece of art/media/design. Regardless, you should be creative and have fun with this lab!
3. Creating a New Style with a Blank Template
With VTSE, you work with styles instead of layers. Styles are templates that you can use to get you started with your basemap design. Note that styles are easily changed. Once you have accessed the VTSE (Figure 8.4), select the green New style button to begin with a preexisting map style as the basis for your own basemap. The preexisting map styles are shown in Figure 8.5. In the search box, type “light gray canvas”. You should see a few styles come up in the results area with similar names, including the phrase “light gray canvas”. Moreover, these light gray canvas styles all have similar appearances. We’ll be working with the style that says exactly “Light Gray Canvas” shown in Figure 8.6. If you choose one of the other styles, you’ll be missing important data.

Screenshots and data from ArcGIS Online

Screenshots and data from ArcGIS Online
After selecting the Light Gray Canvas style option, the editor will load the map style in the top window as a web map. Below this window, you should see three smaller maps (Figure 8.7). While this map style is perfectly functional, we want to create one of our own devising by styling layers one-by-one according to our design inspiration. Before continuing, note that while the process we will use to build a map style in VSTL is different from when we designed basemaps in ArcGIS Pro in Lessons 1 and 2, keep in mind that many of the same principles apply (e.g., arranging the order of layers to match the visual order of the layers the reader sees).

Screenshots and data from ArcGIS Online
Before starting with your design, we’ll first need to orient ourselves on how web map design works. We outline the basic process in five steps.
- Navigate around the large map. Leave the three small maps alone, as these smaller maps serve as helpful references. Zoom in and out, pan around to locations of interest, and so on. Make mental notes of what you do and do not see at each zoom level. For reference, the zoom level is reported below the + and - icons on the main map. For example, you’ll notice that buildings only appear when you’re zoomed in fairly close on the map (e.g., zoom level 15). Also note the visual hierarchy of various elements and how they relate to individual zoom levels.
Examine the data layers that already exist on the map by choosing the Edit layer styles button on the contents toolbar, which is at the left of the main map’s window (Figure 8.8). The icon is a pencil in front of some horizontal lines. If you would rather see the names of the icons listed in the contents toolbar, click the expand button, which is the two arrows icon located at the bottom-left of the content toolbar.
Visual Guide Figure 8.8: The Edit layer styles option along the VTSE contents toolbar.Credit: © Penn State is licensed under CC BY-NC-SA 4.0
Screenshots and data from ArcGIS OnlineThe Edit layer styles environment will present a list of data layer categories like “Natural,” “Populated Places,” and “Water.” Expand the “Water” and “Other” layers. Figure 8.9 shows the individual style layers that are associated with the “Other” “Water” layer. Note that certain layer symbol “outlines” were created by duplicating a layer, then placing the duplicated layer underneath the original layer and changing its symbol to be slightly different. In the Light Gray Canvas template, these duplicated layers are designated with “/0” at the end of their name, while the top layer has “/1” at the end (Figure 8.9). You may not necessarily need to do this in your own basemap, but it’s a useful design trick to keep in mind rather than develop a layer style from scratch.
Visual Guide Figure 8.9: The Edit layer styles option for “Other” types of “Water” layers.Credit: © Penn State is licensed under CC BY-NC-SA 4.0
Screenshots and data from ArcGIS OnlineWe are going to erase everything. Well, sort of. We’re going to use the JSON editor to delete certain layers and make the remaining layers temporarily invisible. It’s certainly helpful to emulate designs that you see elsewhere, but we’re interested in what you can do on your own first. We’ll be accomplishing this by editing the basemap style’s JSON. JSON is a way of storing text-based data in a format that’s easily readable by humans as well as computers. Editing your basemap’s JSON can allow you to easily make global changes without having to navigate through a GUI. Feel free to look at the existing Light Gray Canvas JSON by navigating to Edit JSON in the contents toolbar. We won’t get into specifics about how they work, but you’ll certainly see them come up again in the geospatial world if you haven’t already.
At this point, we haven’t yet made any changes to the map, so if needed, you can close the window without saving any changes. If you want to return to this project later, simply search for Light Gray Canvas again. After the next step, however, you’ll need to get into the habit of saving your progress regularly.
Rather than go through the light gray canvas JSON file to make changes, we’ve prepared a modified JSON for this part of the lab, so follow these steps:
Visual Guide Figure 8.10: VTSE blank map style canvas.Credit: © Penn State is licensed under CC BY-NC-SA 4.0
Screenshots and data from ArcGIS Online- Download the file titled “blank_style.json”.
- Open the JSON file on your computer using a plain text editor such as Notepad (Windows) or TextEdit (Mac), or an IDE such as Visual Studio Code. Do not use a rich text editor like Word, because it will introduce formatting data that can damage functionality.
- Select all of the text in the document. You can do this by placing your cursor anywhere in the text, then hitting Ctrl+A (Windows) or ⌘+A (Mac). Next, copy the document text by hitting Ctrl+C or ⌘ +C.
- Go back to the VTSE window if you don’t have it open already and click Edit JSON on the contents toolbar. You should see a pane appear that looks pretty similar to the JSON file you just downloaded.
- Highlight the entire document the same way that you highlighted your downloaded JSON. Next, hit Ctrl+V or ⌘+V. This will paste the downloaded JSON text over the existing JSON text.
- Click Update in the top-right of the JSON pane.
- If you’re successful, all of the features in your maps should disappear, and you should see something similar to Figure 8.10 – a blank canvas!
- What you have accomplished so far is not a typical workflow, but we’re trying to accomplish something fairly specific for this lab with a minimal investment in time, as well as introduce you to certain concepts.
Let’s get started with our design. Begin with a design for the background for your map. You can alter your background's color, opacity, and a couple of other parameters. To edit the background, simply click Edit layer styles, then click on the “background” layer, which should be listed at the top of the other style layers (Figure 8.11). In the contents pane that appears, make sure the layer’s Visible toggle switch (at the top of the pane) is set to on. Since the JSON background style is set to black, you probably will want to change this default background design to something that is more in line with your own design inspiration. For example, in Figure 8.12, I've selected a dark-ish blue hue for my background color to align with the style of the album cover for The Road to You by the Pat Metheny Group. To change the background color, click on the background layer, then click on the colored rectangle underneath where it says Color (if you have a hex code for your chosen color, there is an option to use that as well).
Visual Guide Figure 8.11: Editing the background map style layer.Credit: © Penn State is licensed under CC BY-NC-SA 4.0
Screenshots and data from ArcGIS Online
Visual Guide Figure 8.12: Changing the color of the background map style layer.Credit: © Penn State is licensed under CC BY-NC-SA 4.0
Screenshots and data from ArcGIS OnlineYou can also change the name of the background layer to something else by clicking on the Actions hamburger menu at the top-right corner of the background pane, then selecting Edit JSON.
The JSON script appears as follows:
{ "id": "background", "type": "background", "paint": { "background-opacity": 1, "background-color": "#187bcc" }, "layout": { "visibility": "visible" } },A line of text near the top should be highlighted; it will say the following: "id": "background"
Change the text within the second set of quotes (currently background) to whatever you want the layer to be called (e.g., “BG_fill”). Remember to keep the new name enclosed in quotes, and don’t remove the comma!
So, for example, an updated name would look like this:
{ "id": "BG_fill", "type": "background", "paint": { "background-opacity": 1, "background-color": "#187bcc" }, "layout": { "visibility": "visible" } },As the goal of this lab is to draw inspiration from a favorite piece of art/media for your basemap design, you will probably come back to alter the background layer more than once. I strongly encourage you to experiment with the many style options available first and then go back later to make changes to your design at a later time.
- Think of an appropriate filename and click Update at the top-right of the JSON pane. Click on Edit layer styles to see your layer with its new name. Once you have finished editing the background, save your progress by clicking the Save as button on the content toolbar. Be sure to use a name that you’ll remember. Don’t worry about the other save options for now. Click Save style at the bottom of the screen.
4. A Styling Example
Before you continue, please get into the habit of saving frequently. You never know when an application will suddenly decide to quit, leading to lost work. To save a VTSE basemap style, think of an appropriate file name that describes the overall style. For example, if you used Vincent van Gogh's Starry Night as inspiration for your basemap design, an appropriate filename could be vanGoghStaryNight. Keep this file name in your memory as you will need to submit the filename as part of your reflection statement.
As you work through your design implementation, keeping track of the individual layers, their visibility at different zoom levels, styles applied, labels, etc., can be overwhelming. To address this issue, I suggest that you create a style guide (in a spreadsheet) that looks something like what is shown in Table 8.1.
| Layer | Color Name | HEX equivalent | Zoom (Scale) Level | Breaks |
|---|---|---|---|---|
| Country Boundary | blue scale | #649d3 | 7 - 22 | 10 - 13 |
| Buildings | bright orange | #d76216 | 16 - 22 | NA |
In Table 8.1, note that each layer that will appear in the basemap is listed. The color name that is applied to the layer is specified. The color name can either be a conventional name or the hex code equivalent. The zoom level or scale represents the level at which the layer is visible to the reader. If there are breaks associated with the layer, that information is also included.
Table 8.2 shows a similar style guide for the labels. In this case, note that mega cities have different styling according to the specific zoom levels. For zoom levels between 6 and 15, the city label appears, but an icon is applied to cities (mega) between zoom levels of 15 - 18. While you are not required to create such a style guide or hand one in, this kind of organizational strategy can help your design workflow and minimize possible confusion while working with VTSE.
| Label Name | Font | Style | Zoom (Scale) Level | Breaks and other Comments |
|---|---|---|---|---|
| Country | Aptos | Bold | 2 - 4 | — |
| State | Aptos | Bold | 4 - 6 | — |
| Cities (Mega) | Georgia | Regular | 6 - 15, 15 - 18 (icon) | Cities labeled with text at scales between 6 and 15, then labeled with an icon from scales of 15 - 18 |
Once you have decided on an appropriate filename and saved your work, VTSE allows you to add or change a style according to, among other things, different zoom levels. In Figure 8.13, I have set up a simple example where the background color changes according to the zoom range.
To view the current zoom stops in your basemap, expand the Appearance heading. Next, look under the gear icon and change the selection from ”Use a single value” to “Set value by zoom level.” Then, add zoom stops to your basemap by selecting the Add stop link. For each zoom stop, set the desired zoom level. While Figure 8.13 shows three zoom levels, you can include more than three zoom levels.
For this example, I have created color stops for three zoom levels. Recall that a zoom range for most web maps runs from 0 (world view) to 22 (completely zoomed in view). To identify the current zoom level, look underneath the + and – zoom buttons that appear on all the maps. There is a box that reports a number, the current zoom level. Notice in my Background layer editor panel under the Appearance header that there are three "stops" that exist.
Note that in Figure 8.13, I have set each map window to show a different zoom level. This is purposeful so that, as you experiment with your design choices, those choices can be visualized. The result being that as the user zooms across the different ranges, the color changes in a linear fashion (note that I’ve also turned on the Land layer for rough visual reference. Land can be found under the Natural layer category. Once you have selected your zoom levels and the color assignments for each zoom level, go through the zoom levels on the main window to see the results of your design work. If you need to change any of the specifications, you can return and alter them. The alterations are automatically updated.

Screenshots and data from ArcGIS Online
- Zoom 0 is assigned a very dark blue background fill
- Zoom 7 is assigned a light blue fill
- Zoom 13 has an even lighter blue fill assigned
5. Consider Your Layers
One by one, we will now add additional layers to our map. We'll start by adding the Boundaries layer group. Note that this is a group of layers rather than a layer itself. To add all the layers in this group, simply click on Boundaries text rather than the arrow next to the name, and the pane that appears will list all the layers (Figure 8.14). Here, you can see at a glance which layers are in a group (there are many), what their visibility ranges are (the blue/gray bars to the right of the layer names), and a few global parameters for the group. Go ahead and toggle the Visible switch on.
If you kept your Land layer colored black, then you will need to choose a new color for the Boundaries layers, because their default line colors are also black, and you won’t be able to see it. This is a good reason to get further styling practice so that you can ensure that you have addressed all of the style layers that you wish to include on your map and the style decisions that are associated with each layer. You have two options here:
Note that inside each boundary group (Country, State Province, Country, etc.) the individual boundaries are identified according to their administrative level. For example, Admin0 represents country boundaries.

Screenshots and data from ArcGIS Online
Figure 8.15 shows the black Land features overprinted by country boundaries cast in white. Note that as the Country Boundary line layer only consists of lines (you can tell that this is the case because the color swatch next to the layer name has a diagonal line in the bottom-right corner), we cannot fill in the boundaries - the fill for the Country boundaries will be the color of your Land layer (or the color of your Background layer, if borders extend over water). Of course, you can return and change the color of the background layer if you choose.
Notice that I have also adjusted the thickness of the country’s borders according to the zoom level.

Screenshots and data from ArcGIS Online
- Change the color of all boundary lines by changing their color in the Boundaries layer editor pane (this is a global change where a design style is applied to all boundaries of a particular type)
- Change the colors of individual boundary layers by clicking on each layer’s name in the Boundaries layer editor pane by group (Country, State Province, Country, etc.). We can only change boundary line colors globally, but if you edit an individual layer, then we can edit the color, opacity, line width, and other properties
- Zoom 0 is assigned a line thickness of 1.0
- Zoom 7 is assigned a line thickness of 2.0
- Zoom 13 has assigned line thickness of 3.0
6. Style Label Layers
Your map should be starting to look like a more complete map. What is missing is the presence of labels. Labels are also data layers that are styles and will be identifiable by a capital “T” in the bottom-right of each style layer’s color swatch.
Click the arrows next to Boundaries > Country, and you will see a number of layers with the names Smallest, Small, Medium, Large, etc. These labels refer to the sizes of features that the labels correspond to. As we did earlier, you can either change a couple of properties for the Label layers by clicking on the layer group name, or you can change many more properties of individual Label layers—such as font, label position, text justification, letter case, etc.—by clicking on their names. Remember to work with the zoom across range option to maximize the visibility of your labels at different zoom ranges. Don’t forget to save your progress!
Here are a few points to remember about changing label styles. The qualitative description of smallest, small, medium, etc., refers to the labels that are associated with each administrative unit. For example, the labels that are associated with the Very Large layer are few in number. For example, in Europe, France, Norway, Sweden, Finland, and Ukraine labels (Figure 8.16) are placed in this layer category. Changing the label style parameters in the Very Large layer style only changes the labels associated in this style. If you make visible labels in the Large layer, those labels will appear but will not style according to whatever styling you have set in the Very Large style layer. Keeping track of individual label layer styles can be tricky. So, I recommend keeping a separate listing of styles that you have applied for each label category. Otherwise, you won’t be able to keep track of all of the label styles and the changes that should take place across the zoom levels.
Also, remember that as you consider changing the type sizes, realize that there may be combinations of type size and zoom level in which the label cannot be displayed (setting the very large type sizes to display a 10-point size at zoom level 0 may not be visually possible).

Screenshots and data from ArcGIS Online
7. Adding Additional Features
By now, you should have a pretty solid, albeit fairly simple map. The only data that should be visible are the background (essentially ocean fill), administrative boundaries at the country level, and their labels. Add some additional features that you think would be helpful for your basemap – not every layer may be appropriate for your design. Start by choosing at least 5 additional data layers to add to the map. You can explore what’s available by navigating through the data categories. At minimum, I would recommend adding the Water area small scale layer located under Water > Lake, as there will be a handful of awkward blank spots in your map without it. But it’s up to you! One more tip: if there is a feature layer that has already been added to your map and you want to change its style, you can click directly on a feature in that layer, and the layer editor will appear. It can be a bit faster than navigating the contents pane
Finally, don’t forget to save regularly!
8. Styling Across Scales
Once you've made some progress on designing your basic basemap style, you should make some more detailed edits. Remember that we are creating a multiscale map. You may, for example, want your place labels to appear at a different point size based on the map's zoom level.
In ArcGIS Online, certain layers have a minimum zoom level. For example, the Land layer is seen at all zoom levels (so, this layer has a minimum zoom level of 0), County boundary lines have a minimum zoom level of 10, and buildings have a minimum zoom level of 15. Thus, when you are working with a style layer and the features are not appearing, check to make sure that you are within the min-max zoom level ranges. Also, make sure that the Visible option for each style layer is toggled “on.”
Importantly, not only can you change the visibility of a layer according to zoom level, but you can also change its style. You can set “stops” for many style parameters in the same way that we added stops for the background. To create these stops, open the layer editor for a particular layer, then find the property that you want to style across a zoom range, and click the gear icon next to that property name. Figure 8.17 shows an example of this, where I have set the opacity of the Admin1 forest or park layer to start as fully transparent at zoom levels less than or equal to 7, then fade into 50% opacity at zoom level 17 and beyond. Notice that I also styled the fill color to change according to the same zoom levels as were set for the opacity.

Screenshots and data from ArcGIS Online
Styling across zoom range permits you to alter the look and feel of a map symbol dynamically as the user zooms in and out of your map. Thinking about how each layer interacts with each other layer at every zoom level gets very complicated very quickly, so you don't have to do anything overly ambitious– the goal is just to make your map look nice at small, medium, and large scales.
Tip! Look at other online interactive basemaps (e.g., Mapbox, Google Maps), as well as the ArcGIS Online examples listed at the top of this guide for ideas about what symbols should appear at which scales, and how they might look best.
9. Working With Patterns and Icons
A great feature of vector data in maps is that you have a great deal of flexibility when it comes to changing how features are represented on the map. We’ll be talking about two options: patterns and icons.
There might be some features on your map that are a bit visually “heavy” in the sense that they are large and visually prominent in your map’s visual hierarchy. These could be park or forest areas, bodies of water, industrial areas, and so on. If you do in fact want to de-emphasize these features so that they blend in with your surrounding features, your first course of action should be to examine your color and transparency options. Choosing a color that is closer to the feature’s background color, or the color of surrounding features, is a good option, as well as increasing transparency/decreasing opacity (it’s the same thing). But if you’re unsatisfied with either of those approaches, you may consider visualizing these features using patterns.
In the contents toolbar, you’ll see an icon that’s a group of shapes titled Edit icons and patterns. Click on it, and you’ll see a handful of pattern swatch thumbnails. Notice that they have some simple geometric shapes in front of a faint checkerboard pattern. What this means is that each pattern has a transparent background. This allows for a great deal more flexibility in design, because you can apply one of these patterns to a feature and it won’t obscure any features that it overlaps. Another characteristic of patterns with transparency is that they reduce the visual hierarchy of features while still maintaining general shape and color. VTSE allows you to adjust the “tint” of patterns, which basically applies a color to them. In Figure 8.18, I have applied a green tint to the “Water are/inundated” pattern and then applied the pattern to my “Admin1 forest or park” layer. Note that the feature being focused on in the screenshot is very large but blends into the Land layer quite well.

Screenshots and data from ArcGIS Online
The reason that these patterns have a transparent background is that they are formatted as PNG files. You’ve probably worked with PNGs in the past as they’re a very common image file type, along with JPEG and GIF. But what you might not know is that a JPEG or GIF with a resolution of, say, 200x200 pixels, will have 100% of its pixels set to an opaque color value. However, if you are making a PNG image, then you can designate certain areas of your image to be transparent. You can make PNGs yourself pretty easily in an image design software like Photoshop or something similar, and you’re welcome to do so for this part of the lab, if you’re comfortable with the process. But if you’d prefer, we have two PNGs with transparent backgrounds ready for you that were included in this lesson’s .zip file, titled tree_icon.png and tree_icon2.png. Go ahead and download those.
Back to VTSE, let’s pretend that you want your basemap to emphasize the locations of parks, so you decide to add a tree icon to park labels. One of our tree icons should do the trick. If you’ve already opened the icons to see what they look like, you’ll notice that one is a solid icon, and the other is an outline. You’re welcome to use either one for this process, or you can use your own PNG.
In VTSE, click on Edit icons and patterns, then click + Add at the top of the screen. Browse to select the file. Choose to add one of the PNG files that you downloaded. Next, navigate to Land Use > Park Or Farming > Park or farming/label/Default in the contents toolbar, or zoom in to a park feature on your map. Remember! We’re adding an icon to park labels, so double-check that your layer editor is showing the correct layer. Under the header titled Icon appearance, click on the box under Image and choose the tree icon. Your map should then look similar to Figure 8.19.
Screenshots and data from ArcGIS Online
Our problem now is that the label text obscures the icon. Fortunately, VTSE offers some label positioning tools.
The final icon and label placement are shown in Figure 8.20.
Screenshots and data from ArcGIS Online
Now you’ve got some nice-looking labels! At this point, you’re welcome to make any changes you’d like, including using your own PNGs for other icons or patterns. Map design is an iterative process, and it may take time for you to get a design you are happy with - be patient with yourself and remember to draw ideas from other maps, your media/art inspiration, and course content.
- Adjust the icon’s size.
- I made my icon’s size 1.0px.
- Change the icon’s position.
- In the layer editor pane, scroll down until you see the Icon position section. Under Icon anchor, you’ll see a 9-cell grid of options for positioning icons. If we want to make sure that the icon and label text never overlap, then what we can do is set their anchors to opposite sides– if the icon anchor is on its right (the right-hand edge of the icon), and the text anchor is on its left (the left edge of the text), then that should solve the overlapping problem. So set the Icon anchor to the center-right side.
- Laterally move the icon’s position.
- We do not want the icon and label text to be too close together, so we can offset the icon a bit. Under Icon translate, set it to about -4px (it uses a Cartesian grid system, so this is -4 pixels away from 0,0).
- Set the alignment of the icon.
- Scroll down farther and under Text anchor, set the option to the left edge. Also set Text justification to Left to give it a somewhat cleaner look.
10. Sharing Your Work
When you’re finally finished with your art-inspired basemap, you’ll need to share it. To generate a URL link to your basemap, return to your AGOL homepage (Figure 8.1). Click on Content. If your basemap is the last ArcGIS Online project that you saved, then you should see the name of your basemap at the top of the list. Towards the right of the filename listing, you may see an icon. This is the Sharing icon. If you see a globe instead (Figure 8.21), then you’re all set. If the icon is in the shape of a person, then you will need to change the sharing permissions. To change the sharing permissions, click on the icon. On the window that appears, Set sharing level to Everyone (public), then click Save.

Screenshots and data from ArcGIS Online
Next, click on the name of your basemap, and a new page appears. On this page, you should see details about the map. Take the following steps before you share your basemap design:
- Please retitle the design something logical. In most cases, the default basemap design is "untitled," which is not very descriptive. Consider a basemap design that relates to your inspiration
- At the top of the page is a link to Add a brief summary about the item. Here, add two or three sentences that summarize your basemap design (give credit to your design inspiration) and save
Remember to include the URL link to your basemap style in your PDF deliverable.
Summary and Final Tasks
Summary and Final TasksYou've reached the end of Lesson 8! In this lesson, we discussed the related topics of cartographic generalization and multiscale maps, as well as how these concepts are integral to creating effective interactive web maps. While introducing new mapping techniques, we discussed both the opportunities and challenges that new technologies in map-making provide. Using Mark Monmonier's conceptualization of fast maps, we discussed how even static maps have taken new forms in recent years due to the ability of social media to spread such maps fast, far, and wide.
In Lab 8, we used a new cartographic tool—the ArcGIS Online Vector Tile Style Editor—to create an interactive basemap inspired by a favorite piece of art. In Lesson 9, we continue along this trajectory of focus on interactivity and web-based map dissemination. We will move into Lesson 9 from creating an interactive basemap in Lesson 8 to an interactive, multimedia map story, pulling together everything that we’ve learned about design and its rhetorical impact in the world.
Reminder - Complete all of the Lesson 8 tasks!
You have reached the end of Lesson 8! Double-check the to-do list on the Lesson 8 Overview page to make sure you have completed all of the activities listed there before you begin Lesson 9.

