Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Map design for web mapping

Seminar for Cartography, TUW

Mariana Danielova

on 8 November 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Map design for web mapping

Mariana Danielová
Do you have any questions?
Digital cartography
Designing rules
Map design for web mapping
Mariana Danielová
Seminar for Cartography
Vienna University of Technology
17. 6. 2013
Map design for web mapping
Designing rules
comparing digital and traditional cartography

expectation for the web maps
Digital cartography
Comparing digital and traditional cartography
viewing distance

focusing time

30 cm
smallest object
0,09 mm
smallest object: 0,09 mm
smallest object: 0,17 mm
smallest object
0,17 mm
60 cm
Image: http://www.freepik.com/free-psd/high-resolution-google-map-psd_605387.htm
Images: http://www.freepik.com/free-photo/world-grunge-map_605804.htm
Background based on http://depositphotos.com/9937181/stock-illustration-Facet-world-map-vector.html
Expectation for the web maps
current data

continuously updated


queries & analysis


free to download

for digital maps

for interactive tools
Design rules for digital maps
Design rules for interactive tools
Image: http://0.s3.envato.com/files/44142288/preview.jpg
factors influencing
the design
Map projection
Map scale
Geographic extent
many devices
design for the primary delivery mode
extent can be greater than on traditional maps
(pan and zoom)

depends on the map's purpose
restrict extent

provide global overview
Image: http://gis.meridenct.gov/meriden/images/i_map.png
zooming variable scale
make separate map for each scale
pay attention to mashups

you want to overlay your map

your users want to use your map
Mercator projection
Image: http://www.truenorthgeospatial.com/wp-content/uploads/2011/09/Layers.png
use web-safe color palette (?)

reasons for inconsistent color display
Image: http://webial.com/sites/default/files/savecolors_1.png
symbols dimension
Images: http://www.cartography.oregonstate.edu/pdf/2008_Jenny_etal_MapDesignForTheInternet.pdf
Advanced design
Image: http://www.esri.com/news/arcuser/0612/graphics/betterwebmaps_4-lg.jpg
Average color contrast
Background color
Table of color contrast metrics
use fonts designed for the web
The anatomy of Web Font
Image: http://malideveloper.arm.com/wp-content/uploads/2009/10/sample_code_aa.jpg
anti-aliased text
aliased text
= number of pixels per surface unit expressed in dots or pixels per inch (dpi)

screens have lower resolution than printed maps (?)
display in pixels cause jagged edges
non orthogonal lines
sharp edges
= adding pixels of intermediate color between the object and background
potential large public including users with special needs

blocks of text
transparency ~ fogginess

shading and cast shadow
Image: http://www.goldensoftware.com/activekb/images/3Dsurface2.png
used for objects

enhance contrast between 'figure' and 'ground'
'3D' clickable objects
overlaying layers
subdue the background
perception of depth
ideal scale
depends on the density and accuracy of map detail
Zooming strategies
Interactive legend
Zooming strategies
static linear zooming
static stepped zooming
dynamic zooming
map is an image, no change in content
separate map for each scale (range)
relation between scale and map content
larger scale more detail is shown
Interactive legend
pop-up legend
control-panel legend
Factors influencing the design

viewing technology

transmission speed
facilitate loading
small map size
limit the amount of information
when selecting map object
all object have to be active
Images: https://maps.google.com/maps?hl=en
control the information appearing on the map
switching on/off the layers
temporal animation
consider accessibility, graphical design and interface functionalities
different web browsers
Data: http://www.w3schools.com/browsers/browsers_stats.asp
users don't want to wait
bandwidth: 50 kilobytes per single web page
Screen resolution
Image: http://www.gaumina.ie/wp-content/uploads/2012/05/screen-resolutions-1999-2012.png
contrast = ability to distinguish symbol from its background
monitor quality
operating systems
web browsers
darker and
more intensive than
Image: http://rocketdock.com/images/screenshots/windows_flag.png
coarser and simpler than paper maps
users don't want to wait for map to load
users don't want to learn unknown tools
Smart legend – smart atlas!
Lobben, A. K. and Patton, D. K., 2003. Design Guidelines for Digital Atlases. Cartographic Perspectives, 44, pp. 51-62. ISSN: 1048-9053
[pdf] Available at <http://nacis.org/documents_upload/cp44winter2003.pdf > [Accessed: 28 March 2013]

Tsou, M. H. and Curran, J.M., 2008. User-Centered Design Approaches for Web Mapping Applications: A Case Study with USGS
Hydrological Data in the United States. In: M. P. Peterson, ed. 2008. International Perspectives on Maps and the Internet, Heidelberg: Springer-Verlag, pp. 301-318. ISBN 978-3-540-72028-7

Jenny, B., Jenny, H. and Räber S., 2008. Map Design for the Internet. In: M. P. Peterson, ed.2008. Heidelberg: Springer-Verlag.
International Perspectives on Maps and the Internet, p. 31-48. ISBN 978-3-540-72028-7

Buckley, A., 2012. Designing Great Web Maps. Esri Mapping Center Lead. [pdf] Available at <http://www.esri.com/news/arcuser/0612/
files/better-web-maps.pdf>[Accessed: 27 March 2013]

Sieber, R. et al., 2005. Smart legend – smart atlas! In: ICA-ACI, XXII International Cartographic Conference. Coruña, Spain, 11-16 July
2005. ISBN: 0-958-46093-0. [pdf] Available at < http://citeseerx.ist.psu.edu/viewdoc/download?oi=>[Accessed: 29 March 2013]

Stopper, R. et. al., 2006. Cartographic Design for Screen Maps. [pdf] Available at <http://www.e-cartouche.ch/content_reg/cartouche/
cartdesign/en/text/cartdesign.pdf > [Accessed: 3 April2013]

Worm, J., 2011. Web map design in practice. In: M.-J. Kraak and A- Brown, ed. 2001.Web Cartography. London: Taylor & Francis, pp.
87-108. ISBN 0-7484-0868-1
Do you have any questions?
Full transcript