Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

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.

DeleteCancel

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
by

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
Conclusion
Map design for web mapping
Mariana Danielová
Seminar for Cartography
Vienna University of Technology
17. 6. 2013
Map design for web mapping
Designing rules
Resources
comparing digital and traditional cartography

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

focusing time

tools
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
http://usahitman.com/fprtgsptp/
Expectation for the web maps
current data

continuously updated

functions

queries & analysis

customization
detail

free to download

complete
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
Color
Symbols
Typography
Resolution
Map scale
Size
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
http://www.sitepoint.com/anatomy-web-fonts/
Anti-aliasing
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
serif

sans-serif
blocks of text
map
transparency ~ fogginess




shading and cast shadow
Image: http://www.goldensoftware.com/activekb/images/3Dsurface2.png
http://www.colourbox.com/preview/1499883-919439-map-pin-icons-with-drop-shadow-ideal-for-satellite-navigation.jpg
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
limitations



viewing technology



transmission speed
generalization
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
compromise
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
http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/150px-Apple_logo_black.svg.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
Conclusion
Smart legend – smart atlas!
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.83.8975&rep=rep1&type=pdf
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=10.1.1.83.8975&rep=rep1&type=pdf>[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