CARTOGRAPHY III

EGE 2312

Mobile/Webmaps

Felix Mutua, PhD

1/13/2020
 Course Outline

• Basics
– Lecture 1: map elements
– Lecture 2: maps for reports, PowerPoint and other small publications
– Lecture 3: multidimensional maps with alternative software
• Overview + Introduction to R
• Making maps with R
• Introduction to Python
• Making maps with Python
• Web maps
– Lecture 4: maps for the web (paper-web)
– Lecture 5: maps for the web(new elements)
– Lecture 6: maps for the web(color, layout, animation)
• Map Infographics
– Lecture 7: Map infographics
– Lecture 8: Map infographics
• CATS/Review
– Lecture 9: CAT I
– Lecture 10: Review
– Lecture 11: Review
–
1/13/2020
Lecture 12: CAT II
 Introduction

• For decades, most geographic information was confined to use

on desktop-based PCs and could not be easily shared
• Specialized software was required to view or manipulate the
data, effectively narrowing the audience
• With mass uptake of the Internet in the mid-1990s, people
began thinking about how maps could be shared across
computers
• The first step was to post static images of maps on HTML
pages

3
 Introduction (2)

• people soon realized the potential for interactive maps. The

first of these, served out by newborn versions of software such
as Map Server and Esri ArcIMS, were horrendously pixelated,
slow, and clunky by today's standards
• these early interactive web maps were revolutionary at the
time
• These early, dynamically drawn web maps ran into challenges
with speed and scalability

4
 Introduction(3)

• Google Maps + many sites began serving out “pre-cooked”

tiled map images using a creative technique known as
Asynchronous JavaScript and XML (AJAX) that eliminated the
ubiquitous and annoying blink that occurred after any
navigation action in earlier web maps.
• Cartographers, who had largely been resigned to cutting
aesthetic corners in web maps, also realized the potential of
the tiled map techniques.

5
 Introduction(4)

• Web maps became an opportunity to exercise cartographic

techniques and make the most attractive map possible.
• Thus were born the beautiful, fast, and detailed web 2.0
basemaps that are common today on Google, Microsoft,
Yahoo!, and other popular websites.
• As web browsers increased in their ability to draw graphics
using technologies such as SVG, the possibilities for
interactivity arose.
• On-the-fly feature highlighting and HTML-enriched popup
windows became common elements.
• The widespread adoption of smartphones and tablets in
subsequent years only increased the demand for web maps

6
 Webmapping : what is it?

• the process of using maps delivered by geographical

information systems (GIS) on the web
• Generally when we talk about web mapping we mean a map
that you can interact with, zoom in and out, pan around,
change what you are looking at etc.
• So the question is how do we do all of those things? Well we
need a program that runs on the web server that can convert
spatial data into a map and understand what the client (that's
you) wants to do next.
• web mapping is more than just web cartography, it is both a
service activity and consumer activity

7
 Why Webmapping?

• Web mapping provides opportunities

– to have realtime maps,
– cheaper dissemination, more frequent and cheaper updates of data and software,
– personalized map content, distributed data sources and sharing of geographic
information.
– Rich mapping and imagery – road and surface features, orthorectified imagery,
oblique (Bird’s Eye) imagery, 3D
– Services designed for the web – high performance raster tile pyramids (quad trees)
for smooth user navigation in client browser
– Scalability – web mapping platforms can easily scale from a few users to millions.
– Cloud computing – base map features flow from cloud servers outside an
organization’s infrastructure directly to a user’s browser reducing required server
capacity, bandwidth, and IT support.
– Data maintenance – creation and maintenance of base map features is handled by
the web service, so additional personnel are not required by the organizations using
these services.
– Users – Web mapping application require very little training, and can be tailored for
non-GIS users who need to visualize data quickly to make better decisions
8
 Open Vs. Commercial

• Commercial: • Public APIs:

– ArcGIS Server (ESRI) – Google Maps
– GeoMedia WebMap (Intergraph) – Yahoo! Maps
– MapXtreme (MapInfo) – Microsoft Virtual Earth (2D)
– MapGuide (Autodesk) – MapQuest's OpenAPI
• Open source: • Globes:
– MapServer – Google Earth
– GeoServer – Microsoft Virtual Earth (3D)
– OpenLayers – ArcGIS Explorer
– Scaleable Vector Graphics (SVG) – NASA WorldWind
– Adobe Flex (actually part open,
part proprietary)

9
 FOSS and its use in web mapping

• Free and Open Source software (FOSS) means that you have
the right to download and look at the source code for the
program you are using. Most people don't need to do this and
don't much care if they have this right or not, to them open
source software just means that it is free.
• Open source software is now used in mission critical solutions
by large and small businesses as well as millions of home users
systems.

10
 Principles of Open Standards

• Availability - Open Standards are available for all to read and implement.
• Maximize End-User Choice Open Standards create a fair, competitive market for
implementations of the standard. They do not lock the customer in to a particular
vendor or group.
• Royalty - Open Standards are free for all to implement, with no royalty or fee.
• Discrimination - Open Standards and the organizations that administer them do
not favor one implementer over another for any reason other than the technical
standards compliance of a vendor's implementation.
• Extension or Subset Implementations of Open Standards may be extended, or
offered in subset form.
• Predatory Practices Open Standards may employ license terms that protect against
subversion of the standard by embrace-and-extend tactics.

11
 Types of Web Maps

• Static web maps - Static maps, as their name implies, are essentially
the digital equivalents of paper maps. While the user may be able to
zoom in or out on the map, the content of the map is static
• Dynamically-created web maps - In contrast to static web maps,
dynamically created web maps are generated on the fly when the
user loads the associated web page e.g population figures compiled
by a census
• Distributed web maps- those compiled from distributed data
sources
• Animated web maps - Animated web maps are most often
associated with the display of snapshots of the same map variable
taken at different times.

12
 Types of Web Maps(2)

• Real-time web maps - In addition to fitting into the animated map

category, weather maps are also perhaps the most commonly
viewed type in the real-time map category
• Interactive web maps - forms of interactivity include the ability to:
toggle map layers on/off, obtain detailed information about map
features, browse to web sites associated with map features, produce
a personalized map, and explore data patterns and relationships
using visualization tools that are dynamically linked to the map.
• Analytic Web Maps - most common analytic function performed by
web map applications include route finding, overlay e.t.c
• Collaborative Web Maps - includes those in which a distributed
network of people create and maintain the map. Such sites are
similar in concept to Wikipedia.

13
Example: Analytic Vs. Animated

14
 Historical Development – 1st
Generation

Web 2nd
What Indepe
1990 1993 ?
1995 Inter 1997
ndent 2000 Generati
face on

• Xerox Palo Alto • a web interface • a web interface • emerging

• www
Research on top of GRASS for its enormously technologies like
Center (PARC) • UC-Berkeley rich TIGER dataset Dynamic HTML, Java
Map Viewer • Possible to view - U.S. Census and ActiveX
any GRASS Bureau
dataset, pan and • MapQuest,
zoom and query launched in 1996

15
 Historical Development - 2nd
Generation

Lets
Where
200 Baby 200 get 200 Diversi acceptan
2010 2020 are
4 steps 6 involve 8 fy ce
we?
d

• OpenstreetMap • Yahoo Maps • Google • Google Maps • 3D navigation

• Housingmaps.co • Iphone StreetView Navigation: free turn- • OpenLayers 3
m • Wikimapia • KML 2.2 W3C by-turn navigation • Indoor
• Google maps • OpenLayers Standard • Google Fusion Tables Navigation
• GoogleMaps API • ArcGIS Explorer • Android Phone • Google Styled Maps • Crowd
• Google Earth with GPS and mapping
compass • AI
• VPS
• MapBox
• Indoor

16
 System architecture for web mapping

• It can take several different

physical machines to create,
serve, and use a web map.
• These are often depicted in
diagrams as separate levels,
or tiers of architecture

17
 System architecture for web
mapping(2)
• desktop workstations that are used • a geospatial web
by administrators and internal services server that has specialized
client applications. software and processing power for
• These machines will also be used to drawing maps, responding to
prepare data, author maps, and feature queries, and performing GIS
sometimes administer the other analysis operations.
machines. • a web server that acts as a web
• a database and/or entry point into your organization's
file server holding all of your GIS network. This is also called a proxy
data. This machine might be server. It is protected by firewalls
equipped with redundant storage that shield malicious traffic into your
mechanisms and regular backup internal network. It's also a place
scripts that prevent the loss of data. where you can put web application
• many client applications that use code (such as HTML and JavaScript
the web map. These can be apps files) for your web maps.
that run on your desktop
workstation or they could be mobile
apps.

18
 Elements of a web map

• Basemaps : A basemap provides • Interactive elements - Web

geographic context for your map. maps are often equipped with
The most common basemaps interactive elements that can
you've used online are vector help you learn more about the
road maps and remotely sensed layers in the map. These can be
imagery. informational popups that
• Thematic layers - Thematic appear when you click a feature,
layers (also known as business or charts and graphs that are drawn
operational layers) go on top of in a separate part of the page,
the basemap. They're the reason slider bars that adjust the time
people are coming to visit your slice of data displayed in the
map. map, and so forth

19
 Map elements

• At a minimum, Service’s Web Map Applications

should include the following set of map elements:
– logo and/or Title bar; division or office if applicable
– Privacy, Disclaimer (access and use constraints), and Copyright Statement(s)
– Contact information
– Legend (if applicable)
– List of data , Basemap (if applicable)
– Scale bar (if applicable)
– Site title or application name (if applicable)
– Application description/abstract: Include information on why the application
was designed, what the applications intended uses are, and what audience it is
geared for.
– HELP for tools and functions within the site (if applicable)
– Tools for map navigation (e.g. pan, zoom in, zoom out, etc...)
– Links to metadata for data 20
 Interactivity

• The biggest difference between designing maps for print

versus the Web is that we no longer design for map readers
but map users.
• This change in terminology is important. People interact and
manipulate Web maps.
• We no longer need to attempt to design a one-size-fits-all,
optimal form of data communication.
• we design our maps to be interactive and responsive to a map
user’s needs to facilitate communication that is more effective.

1/13/2020 21
 Of Mice and Touch Screens

• Interactivity with a Web map was a fairly straightforward

endeavor a decade ago.
• Essentially, if you had a computer, you had a mouse.
• Thus, GUIs facilitating HCIs were almost always designed using
the WIMP (windows, icons, menus, pointer) model.

1/13/2020 22
 WIMP interface

1/13/2020 23
 WIMP interface

• WIMP interfaces are still ubiquitous but will soon find

themselves in the minority.
• Even before the arrival of mobile computing, we began to see
the rise of post-WIMP interfaces.
• The early iPod is one example of a post-WIMP user interface.
• With mobile phones and tablets, as well as touchscreen PC
operating systems such as Microsoft Windows 10, pointers are
completely disappearing.
• Google’s Android and Apple’s iOS, for example, are not WIMP
interfaces;

1/13/2020 24
 Post-WIMP interface

1/13/2020 25
 Future is post-WIMP

• The future is post-WIMP, and as a Web cartographer you need to

prepare and plan for this.
• Any map you design today should probably be WIMP compatible but
always post-WIMP user friendly.
• What does this mean?
– Essentially, you will want to include some GUIs for pointer devices (such as
zoom bars, further discussed later in the course), but you should also
– build post-WIMP capability into your map (e.g., pinch to zoom, finger
panning, map rotation, and GUIs that are chubby-finger friendly).
– That way, on a mobile phone a user will not need to hit the zoom bar
perfectly with a thumb to get your map to work.
• On the flip side, if the same person is opening your map on a friend’s
desktop personal computer (PC), he or she can still use your map
because it will have a zoom bar.

1/13/2020 26
 NEW INTERACTIVE MAP ELEMENTS

1/13/2020 27
 New Interactive Map Elements

• traditional map elements and their design are still crucial for
effective map communication.
• The main difference is that most map elements can now be
better thought of as GUIs.
• Thus, the purpose of most map elements may not have
changed, but rather their design has become very different.
• For example, many map elements for Web maps can be
designed far more compactly and subsequently present more
information once someone has decided to interact with them.

1/13/2020 28
 Title/Splash Screen

• One thing that has begun to disappear in Web maps, particularly

mobile map apps, is the title.
• omitting titles makes more sense. There is a need to do so because
people’s fingers are often quite chubby
• effective map apps will employ a title splash screen. Just as almost
all commercial apps begin with a splash screen showing everything
from the names of developers to animated pigs grunting, map apps
generally should as well.
• Title splash screens promote the map as a production, not
something to be merely used once and discarded.
• Brief splash screens showing a title and some poignant aesthetics
can help guide the map user’s interaction with the forthcoming map

1/13/2020 29
 Title/Splash Screen

• If you are going to use either a title or a splash screen, some

simple rules should be followed.
• First, keep them short and to the point.
• Second, when possible, let the map user click on the splash
screen to skip it.
• Regular users of your map will probably end up clicking on the
splash screen hundreds of times in vain if you do not provide
this option
• A splash screen should consist of the title and perhaps a few
supplemental graphics that inform users what the map is going
to be about—nothing else.

1/13/2020 30
 Mapped Area

• scale does not have to be fixed—the mapped area can often be

manipulated by the map user, and mobile maps almost always need
to have a mapped area that takes up the entire page or screen.
• mapped areas can now be designed to be interactive, and many, if
not most, map users expect them to be. Since the advent of Google
Maps in February 2005, “slippy maps” (i.e., maps that one can
interact with to pan to areas) have become a new cartographic
standard
• These maps typically also include a zoom element.
• A single Web map might be comprised of 20 static base maps, each
generalized for a specific zoom level.
• Not all maps require one to zoom in on the data for a clearer
overview.
1/13/2020 31
 New Interactive Map Elements

Not all maps require one to

zoom in on the data for a
clearer overview.

1/13/2020 32
 Pan User Interfaces Panning

• Pan User Interfaces Panning is the ability to move a portion of visible

content out of the mapped area to be replaced by adjacent, but currently
unseen, content.
• If map users can zoom in on your map, or if your map is preset to a scale
that does not allow the entire mapped area to be shown on a single screen
at one time, your map will require the ability to be panned.
• There are several keys to effective panning.
– First, do not let map users pan beyond the scope of your mapped area (i.e., if
you are mapping France’s wine regions, do not let map users pan to Belarus).
– Second, do not include panning if it truly does not add anything. If you can show
all of your data clearly and effectively at one scale, and everything fits on the
screen, skip it. Just because you can include a map element does not mean you
should.
– Panning is typically achieved using several types of interaction and is almost
always both WIMP (windows, icons, menus, pointer) and post-WIMP compliant
regardless of the device used.
– The most common methods of panning are via the use of (1) panning arrows, (2)
arrow keys, and (3) click and dragging. In some cases, you have two- or three-
finger panning as well
1/13/2020 33
 Panning Arrows Should Be Banned

• Some l believe that every Web map needs panning arrows. I do

not.
• These are a remnant of earlier technology limitations.
• Unless you have a really good reason to use panning arrows, I
recommend excluding them.

1/13/2020 34
 Arrow Keys

• arrow keys are extremely different from, and far superior to,
panning arrows.
• In fact, whenever possible, I recommend incorporating arrow
keys into one’s map design when panning is required.
• However, there is a key caveat to this: make sure arrow keys
are not the only method of panning available.

1/13/2020 35
 Zoom Bars

• The most ubiquitous interface design

for zoom change is via a zoom bar
Zoom bars take many guises, but the
reason they are ubiquitous is because
they work with almost every type of
user-computer interactive tool (e.g.,
mouse, touch pads, touch screens).
Not all zoom bars are equally effective.

1/13/2020 36
 Zoom Bars

• Considerations
– most zoom bars are vertical in nature.
– the top of the zoom bar is the maximum map scale (i.e., more detail,
less geographic area covered, less generalization).
– The bottom of the zoom bar is the minimum map scale
– It is also convention to place it to the left or right side of the map so
that it is readily available when desired but not competing with the
data on the map.
– Akin to scale bars on print maps, less is often more. The less gaudy
zoom bars look, the less distracting they are when someone is
reading the map.

1/13/2020 37
 Plus and Minus Zoom Buttons

• Like north arrows, the inclusion of plus and minus zoom

buttons is probably due more to cartographic norms and
conventions than need.
• Unlike north arrows, however, pluses and minuses often take
up even more screen space.
• Plus and minus zoom symbols can enhance usability. For
example, if someone wants to zoom in at fixed intervals (one
step at a time), plus and minus buttons may be nice.
• However, a zoom bar allows the same incremental zooming, so
having both would be redundant.

1/13/2020 38
 Double Click and Tap

• Within the past handful of years, double clicking with a mouse

(or double tapping via touch input) has become a new zoom
standard.
• It is the norm not only in mapping but also in Web browsers.
• Thus, adding double-tap zoom functionality to one’s own Web
maps is a wise decision

1/13/2020 39
 Scroll Wheel and Pinch to Zoom

• Both scroll wheels and pinch to zoom are methods of using

one or two fingers to zoom both in and out on a map without
any clicking or tapping.
• Several best practices exist for scroll wheels and pinch-to-zoom
interfaces. E.g the zoom interaction should always emphasize
the area where the user initializes the interface interaction.

1/13/2020 40
 Keyboard Shortcuts

• Keyboard shortcuts are always easy to include (since they

generally require minimal scripting), and they can enhance
one’s map dramatically for those using a conventional personal
computer.
• The one downside of keyboard shortcuts is nonexpert users
will likely never realize they are there.

1/13/2020 41
 Rectangle Zoom

• The last common interactive zoom device is the rectangle

drawing tool. This tool can be useful on WIMP-based devices
(i.e., computers using a traditional mouse).
• The tool is usually represented via an icon that the user
selects.
• This turns the pointer device into a magnifying tool that allows
the user to click and drag over part of the map area to zoom in
on a particular specific region of the map.
• It gives the map user more precise control over where and
how much zoom should be used.
• It allows users to skip intermediate scales and go directly to
the desired one.

1/13/2020 42
 Pros and Cons – Zoom tools

1/13/2020 43
 Pros and Cons – Zoom tools

1/13/2020 44
 Locator Maps

• Locator maps are inset maps that show where the main mapped area is located
within a broader geographical context.
• They are useful for large-scale maps (i.e., maps showing small areas) because
people often have a difficult time referencing the location of what they are
viewing based on their mental maps alone.
• Early on, most Web maps included locator maps, and they are also a good idea
to include with your large-scale maps.
• Locator maps have an added bonus - Not only do they help map users find
where they are in the world, so to speak, they also can function as an
alternative zoom tool.
• Many locator maps let the user drag a rectangle over them or pan the area
currently being viewed by directly interacting with the locator map.
• This offers map users an additional method of zooming and getting to where
they want to be as quickly and directly as possible.

1/13/2020 45
 Locator Maps

• In recent years, there has been a trend

away from locator maps among online
map services. Certainly, locator maps
can use up valuable screen real estate
• when possible, it is recommended
that you include a locator map if your
mapped area is large in scale.
• Most often, locator maps are found in
the bottom right of a Web map
• There is no true standard yet. The
main goal is to keep the locator map
low in the visual hierarchy

1/13/2020 46
 Menu Design

• Menus are a great way of organizing and hiding many of them so

they do not interfere with map reading.
• Menu styles and layouts are as myriad as map types. However,
there are certain rules to menu design that people should be
aware of before designing one of their own.
The Three-Click Rule may be Wrong But It Remains a Useful Axiom
• The three-click rule has mythical status in the world of Web
design. The rule states that a Web user, and in this case a Web
map user, should never have to click more than three times with
a pointing device (e.g., mouse) to obtain the information desired.

1/13/2020 47
 Menu Design

• Organize, Test, and Confirm

– the organization of your menus is far more important than how
deeply information is hidden within a menu system.
– The key is that you want map users to know instinctively where to
look for information they are seeking
• Step One: Organize Your Menus
– The first step is to take all of the functionality of your map—anything
that has an interactive component that is not directly addressed by a
map element and organize these things into groups

1/13/2020 48
 Menu Design

• Step Two: Design Your Menus

– Once the interactive and functional components of your Web map
are categorized and organized into groups, the next step is to design
your menus.
– make your menus blend in with the map so that they are readily
accessible and intuitive and do not take too much attention away
from the map.
– it is always a good idea to keep the menu chrome—the area your
menus take up on the Web map—to a minimum.
– Keep your items as Compact and unobtrusive as possible

1/13/2020 49
 Menu Design

• Step Three: Conduct User Tests

– The next step is to conduct user tests. This can be as simple as
inviting your neighbors over for dinner and inviting them to play with
a new Web map you are designing. Very effective
• Step Four: Reorganize Your Menus
– Once you get over the fact that your test subjects do not think about
menus like you do, you can incorporate your findings into a revised
menu system.
– It is hoped this merely means rearranging several of the menus into
new categories that are more intuitive to most users

1/13/2020 50
 Legend

• Web mapping legends can take so many different forms – but

the purpose remains the same
• to design effective Web map legends is follow three simple
steps.
– First, decide what your legend needs to show—not what it could
show (e.g., water is blue), not what it might show (e.g., every map
symbol found in a national map database), but what it needs to show
(e.g., the values of your thematic color scheme).
– Second, determine how to display these data clearly. Make sure
that your legend is not an enigma to users.
– Third, decide whether the effectiveness of your communication will
be enhanced or diminished by allowing the map user to interact
with the legend.

1/13/2020 51
 Legend

• Legend interactivity can help map users make a map more

intuitive and clearer.
• Making your legend interactive offers users the capability to
transform aspects of the map based on individual needs.
• The ability to click buttons and turn things on and off makes
people feel good.
• Moreover, interacting with legends can be really fun,
particularly if the legends are well designed. If your map is fun,
people are more likely to remember it and, it is hoped, get
some meaning and use from it.

1/13/2020 52
 Legend

• legends are a great place to provide

the opportunity to highlight or add
more data to a map in the form of
layers.
• There may be times that your map
user may need to turn different types
of data on or off, reorder data in the
hierarchy, add aerial photography,
add a topographic base map, or
import data of their own to place on
the map

1/13/2020 53
 Legend

• Symbol and Thematic Modification

– Perhaps no place lends itself better to
allowing a map user to select, change, or
manipulate how your map data are
represented than the legend.
– While you have chosen and designed
your symbology and data representations
based on an overarching map purpose,
sometimes including options for the
manipulation of your map elements
helps map users style the map as they
prefer.

1/13/2020 54
 Web Cartography

Layout

1/13/2020 55
 Drastic changes

• The change from paper to an interactive medium has

implications for map design far beyond map elements. It has
altered how maps can be designed and organized.
• New Visual Hierarchies for Web Map Elements

1/13/2020 56
 New Visual Hierarchies for Web Map
Elements

1/13/2020 57
 Screen Real Estate, Resolution, and the
Pixel Problem
• Three things will inevitably affect every Web map’s layout: (1)
screen real estate, (2) screen resolution, and (3) pixels per
inch.
• Screen real estate refers to the amount of space you have to
work with on any screened device. You have a fixed amount of
space to show everything you want to show.
• there are several major hurdles to deal with as a Web
cartographer with regard to screen real estate. First, unlike
with a print map, the Web cartographer never knows how
large a screen the map user will have

1/13/2020 58
 Screen Real Estate

• Before you begin any project, you want to consider all of the
different screen sizes your Web map is likely to be viewed on and
design accordingly.
• design the same map several times to facilitate functionality in
different browsers or for different size mobile devices.
• Never settle for a one-size-fits-all Web map layout.
• Whenever possible, include code in your HTML that will allow your
map to determine the resolution and screen size of the user’s
device.
• Use screen responsive interfaces such as boostrap
• One rule of thumb is always to design your map for the device with
the smallest screen you want people to use your map on.

1/13/2020 59
 Screen Resolution

• It is therefore good
practice to design your
map with a resolution
that will fit nicely on a
majority of screens
without the need for
scrolling.

1/13/2020 60
 Two Types of Web Map Layouts

• Fluid Map Layout

– Fluid layouts are those in which the neat and frame lines are one and the
same
– The map takes up the entire page.
– All of the other map elements are placed on top of the mapped area and,
when designed well, do not cover any important spatial data relevant to
clear communication.
– Typically, the elements are scattered around the mapped area so that visual
balance is achieved
– It allows the mapped area to be produced at the largest scale possible,
providing more visual detail and requiring less generalization

1/13/2020 61
 Fluid Map Layout

• One potential
disadvantage, however, is
that this type of map layout
can start to look very busy.
• If not designed well, it can
result in an unbalanced
map that detracts from the
information being
communicated.

1/13/2020 62
 Compartmentalized Map Layout

• Compartmentalized map layouts are those that separate many of

the core map elements into separate boxes or divisions
• Each map element has its own particular place; mingling among
elements is discouraged. E.g
– the title of a map may be in a separately framed box at the top of the
mapped area itself,
– with its legend in a separate, boxed area underneath the mapped area.
– Scale bars may not actually be over the mapped area but instead adjacent
to it.
– Supplemental text boxes might be put to the side of the mapped area.
• This fragmented layout style is commonly used among geographic
information system (GIS) professionals, and several variations are
often included as map design templates in GIS packages.

1/13/2020 63
 Compartmentalized Map Layout

• This layout suffers from several

disadvantages.
– First, the mapped area is often not
as large as it could be, limiting the
amount of data detail that can be
revealed.
– Second, fragmenting map elements
means that map users may have to
move their eyes much further away
from the mapped area to read the
supplemental information.
• Of course, as an advantage, once a
map user becomes adequately
acquainted with the layout, the
user no longer needs to search for
map elements; he or she will know
right where to look for information.

1/13/2020 64
 Which layout?

Compartmetnalzied Fluid
• abundant in maps designed for Web • proliferate on mobile devices on which
browsers. screen real estate is at a premium.
• These maps frequently make use of • tend to hide features under icon-based
HTML divisions (<div> tags) that are menus and submenus - have such menus
collapse as soon as someone clicks
styled with Cascading Style Sheets (CSS). outside them
• maps function well when there is ample • The arrangement of menu icons can take
screen real estate. many forms. However, one generally
• Often lack rhetorical and aesthetic flair wants to place these icons where people
focus their visual gaze the least
• People are familiar with the layout.
• map elements simply do not lend
• Creating a fragmented map layout also themselves to small-screen devices and
lends a feeling of professional, business- should be kept off a fluid map layout in
like design these circumstances e.g title
• such maps are often a bit easier to • Panning arrows—ugh—and zoom bars
design using HTML and CSS are best omitted, or at least hidden and
minimized

1/13/2020 65
 How to Design an Effective Web Map
Layout

• Identify your Web map audience and its expectations.

– What kind of Web map does your intended audience expect?
– If your map is going to be used in a manner that is similar to many other maps
already out there, you may want to mimic the layout and design of those maps.
• Determine which kind of Web map you will design.
– Are you going to make a map for a Web browser or a stand-alone app?
– Browser-based maps tend to be well integrated within the Web browser,
allowing the browser’s menus and features (e.g., printing, bookmarking, and
searching) to be used on the map itself.
– Map apps are often stand-alone map packages, like video game apps, that have
their own unique interface designs and incorporate well into the ecosystem of a
given mobile operating system (e.g., Android, iOS, Windows).

1/13/2020 66
 How to Design an Effective Web Map
Layout
• Determine which elements of the visual hierarchy need to
stand out.
– Which map elements must be promoted for the map to make the
most sense?
– I recommend making a list of all of the map elements you think your
map needs. Then, go through and prioritize them. Choose the top
three or four. Those are the map elements that are needed.
Everything else is typically supplementary.

1/13/2020 67
 How to Design an Effective Web Map
Layout
• Design mock layouts and user test.
– Have you exhausted all of your layout options?
– The best Web map layouts are not whipped together at the end of a
long programming session; they are well thought out and have been
compared to a litany of other potential layouts your computer, pull
out a notebook, draw a grid on the page, and start sketching every
type of layout imaginable.
– Move your map elements and legends around, paying particular
attention to the visual hierarchy you have decided on in the previous
step

1/13/2020 68
 How to Design an Effective Web Map
Layout
• Finalize the map layout and user test it again.
– Are there any unforeseen issues? For example, are there certain
aspects of your ideal map layout that are impossible to implement
due to the Web service, API, or technology you are using?
– Once you have finalized your map, it is wise to user test it to make
sure it is fully functional.

1/13/2020 69
 Web Cartography

Color

1/13/2020 70
 Color

• Selecting an effective color scheme is one of the most crucial steps in

designing a powerful and useful map, regardless of whether it is for print or
the Web.
• Color Rules That Remain Unchanged from Print
– Less Color Variation Is More Powerful - It has long been known that you should
limit the number of hues and values on your map to help users better interpret
what they are viewing.
– use neutral colors, or even gray scale, on your base map so that any colors you
do use to symbolize important data catch the map user’s attention
– Different Colors Have Different Meanings to Different People
– Color Preferences Change over Time - The impact and meaning of color is time
sensitive. Colors go through phases of popularity in different societies
• Never Design Web Maps with CMYK (subtractive – color is created by
subtracting from white) - cannot be accurately represented on a screen
device. Monitors do not subtract to make color; they add. Every screen you
look at, from your mobile phone to your high-definition television, uses the
RGB model to represent color.

1/13/2020 71
 Basemap colors

• White and light gray are great choices for base map colors
because they act as a neutral canvas for other map symbols to
jump out as figures.
• what if you want to include shaded relief? There are generally
two ways to do this: grayscale shaded relief or hypsometric
tinting. Hypsometric tinting shows elevation change through
the use of a color scheme

1/13/2020 72
 Choosing Thematic Map Colors

• your first stop might be Color Brewer

(http://www.colorbrewer2.org ). This site allows you to
experiment with previously derived color schemes
• if the thematic data do not necessarily need to be read for
clarity but are included in a map to achieve a rhetorical goal or
purpose, designing your own color scheme to better invoke a
message is extremely advisable
• Beware of Color Blindness - One thing that needs to be
mentioned is that certain colors should simply never be used
together. Approximately 10–14% of all males are red–green
colorblind.

1/13/2020 73
 Choosing Thematic Map Colors

• These two maps

show exactly the
same information
using exactly the
same colors.
• The map on the right
is how this map
appears to people
with deuteranopia
(red-green color
blindness).

1/13/2020 74
 Typography

• The Web has revolutionized how type can be used on maps.

No longer does text need to be static, but it can be resized,
manipulated, and even created by map users.
• Although this has meant that many things about map
typography have changed, most of the print standards dealing
with labeling and text placement stay true today.

1/13/2020 75
 Font rules

• No More Than Two Fonts per Map - Sure, there are always exceptions to
the rule that there should be no more than two fonts per map.
• Font Styles and Properties Indicate Different Things - Differences in type
size, case, and style still have the same visual impact on the Web map user
as they do in print maps
• When Possible, Ditch Serif Fonts - There is a new cartographic convention
that has evolved with Web cartography:
– use only sans-serif fonts (Figure 6.3). The avoidance of fonts with serifs in Web
maps developed with good reason; resolution on most digital media is
mediocre.
– Serif fonts are actually more difficult to read on backlit displays (i.e., LCDs,
cathode-ray tubes [CRTs]).
• Size Does Matter
– Not all fonts are created equally.
– The best fonts for screens have generous x-heights, spacing between letters,
internal letter widths, and consistent thicknesses

1/13/2020 76
 Font rules

• add the ability for a user to manipulate font sizes on a map.

– Doing this is not always a simple endeavor, particularly when it comes to
maintaining the integrity of your labels, but it is almost always beneficial.
– The alternative is to design your fonts with high pixels-per-inch devices in
mind from the beginning, ensuring that the font can only increase in size
• Not Everyone Has Access to the Fonts You Do
– Web mapping without a plug-in (e.g., Adobe Flash, Microsoft Silverlight,
Oracle Java) depends on HTML, CSS, and scripting languages (i.e., primarily
JavaScript). HTML and CSS make use of fonts found on your map user’
computer.
– Different computers and mobile devices will have different fonts installed on
them.

1/13/2020 77
 Interactive text

• Will Your Map Have Interactive Text?

• Interactive text is text that users can
control, manipulate, or interact with
in some fashion. Interactive text takes
many forms. For example, perhaps
you have text that acts like a button.
• If no one is going to need to copy
your label names, it is wise to make
sure your label text is not selectable.
It leads to less confusion and fewer
accidental selections.

1/13/2020 78
 What font type then?

• Fonts That Play Well with Web Maps

– Verdana
– Century Gothic
– Arial and Helvetica
– Trebuchet MS
– Tahoma
– Corbel
– Myriad Pro and Myriad Web
– Georgia…

1/13/2020 79
 Symbology

• Keep Symbols Simple

– One thing to remember when designing map symbols for
the Web is that many screens have poor resolution. Not
only that, but when designing point symbols for your Web
map, much of the time, your symbols will be quite small.
– Map symbols are almost always more effective when they
are simple and pictographic in nature.
• Generic Caricatures Are Best
– Whenever possible, avoid creating symbols that may
accidentally imply details about a place that are not
necessarily accurate. For example, if you are designing a
symbol to represent a dog park, you should try to make
the symbol inclusive to all dog breeds

1/13/2020 80
 Symbology

• Symbols Are Era and Audience Dependent

– Symbology is constantly evolving. Make sure that you are
not using antiquarian icons. At the same time, if certain
mapping conventions are known to exist, do not design
new symbols just for the sake of it. Use people’s
knowledge of symbols to your advantage.
• Symbols Are Context Dependent
– Symbols will have different meanings depending on the
nature of symbols around them.
– Never, ever, use ambiguous, default Web map symbols
(e.g., upsidedown teardrops, pushpins, or thumbtacks)
unless your client insists on it. Even then, try to get out of
it.

1/13/2020 81
 Assignment 08

Each student has been allocated a country to prepare a webmap using ArcGIS
online (see attached excel sheet). The Webmap should contain :
1. The 1st and 2nd level boundaries ( e.g Counties//subcounties in Kenya)
2. Major cities
3. Main Highways, railways and airports
4. Major natural vegetation and water bodies
5. Male/Female population (for level 2 e.g. counties of Kenya)
6. Baselayers : Satellite, terrain
Required :
1. Download data from DivaGIS or any other site
2. Upload your data to your ArcGIS online account (all of you have!)
3. Prepare the Webmap using ArGIS online tools
4. Submit the link via the classrep
Deadline: 27th January 2020 (next week)

82