Scribd
Upload
17 views

Lecture_4_Interactive_maps.pdf

Uploaded by

minh21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Lecture_4_Interactive_maps.pdf

Uploaded by

minh21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

Lecture 4

Interactive maps

Steven HS Zhang, PhD


[email protected]
Department of Geography
The University of Hong Kong

Copyright 2022 HKU, All rights reserved 1


Goals of map communication

v Maps are a form of spatial communication


v Presentation medium does not matter
v Most maps are designed to communicate and convey
information to a map user / reader
v Effective map design: establish the communicative
purpose of the map

Copyright 2022 HKU, All rights reserved 2


Goals of map communication

v For a map to maximize its communication potential,


mapmakers need to ask themselves four questions
throughout the design process:
§ What are the things this map will communicate?
§ Which data will best communicate these things?
§ Who is the intended audience for this map?
§ Which design elements will help the map user
receive the message most clearly?

Copyright 2022 HKU, All rights reserved 3


A Concept Map of Objective-based Primitives

Copyright 2022 HKU, All rights reserved 4


Static digital maps

vA static map is a graphic


representation at a certain
level of detail. (smaller the
scale, the less detail the map
can show).
vA static map is only a single
snapshot in time.
vFormats: PDF, TIFF, JPEG

Copyright 2022 HKU, All rights reserved 5


Static digital maps

vDigitalization (paperless)
vVirtual view (representation)
vSatellite/aerial view (image)
v3D landscapes

Copyright 2022 HKU, All rights reserved 6


What are interactive maps?

v“Human-Map” interactivity
§ can change state of the map
§ access to up-to-date info
Paper maps
vInteractive elements
§ specialized tools
vMany unknowns
§ viewing device resolution
§ screen real estate
§ representation
Interactive maps
Copyright 2022 HKU, All rights reserved 7
Interactive maps

vAn interactive map can present graphic representations at


multiple spatial scales, with varying degrees of detail.

Increasing map scale

Copyright 2022 HKU, All rights reserved 8


Two types of interactive maps

vDesktop maps (without internet)

vOnline maps (with internet)

Desktop maps Online maps

Copyright 2022 HKU, All rights reserved 9


Two categories of online interactive maps

Client/Server (C/S) model Browser/Server (B/S) model

Copyright 2022 HKU, All rights reserved 10


vIn interactive maps,
§ Information that can be switched on/off depending
on users’ points of interest
§ The points of interest can show links, pictures or
videos about that area
§ Ability to update changes or demonstrate future
developments that could affect users

http://poncamap.sig-gis.com/
Copyright 2022 HKU, All rights reserved 11
vIn interactive maps, there are:
§ Location-based services (GPS)
§ Multi-layer/multi-scale/multi-time

http://hint.fm/wind/
Copyright 2022 HKU, All rights reserved 12
Human interactions with a map

vMice vs touch screens


• WIMP interfaces
Windows, Icons, Menus, Pointer

Copyright 2022 HKU, All rights reserved 13


Human interactions with a map

vMice vs touch screens


• Touch screens
multi touch, can also have gesture control,
eye tracking, voice recognition, etc.

Copyright 2022 HKU, All rights reserved 14


Elements of interactive maps
v Title and splash screen
v Map area
v Pan or Zoom user interfaces
v Info Window
v Locator Maps
v Menu and its design, Neat lines,
Help Menu
v Smart Legends
v Other
Multimedia graphics, Images,
Videos, Graphs + Highlighting

Copyright 2022 HKU, All rights reserved 15


Elements of interactive maps

http://hk.centamap.com/gc/home.aspx
Copyright 2022 HKU, All rights reserved 16
New interactive elements
v Map elements have become part of the GUI*

*GUI: Graphic User Interface


Copyright 2022 HKU, All rights reserved 17
Layout depends on
v Screen real estate
v Resolution
(size in pixel vertical columns * horizontal rows)
v Pixels per inch (size of each pixel)
-> size of a pixel becomes tiny in high definition devices

Copyright 2022 HKU, All rights reserved 18


Pixels per inch

SOURCE IDC 2005 SOURCE Muehlenhaus, I. ( 2014): Web Cartography


Copyright 2022 HKU, All rights reserved 19
Layout types
Compartmentalized Fluid

§ formal presentation § map elements distributed


§ separation of maped area and around the mapped area
other map elements § best choice for mobile devices
§ work well on big screens
Copyright 2022 HKU, All rights reserved 20
Cartography of interactive maps

v Color

v Typography

v Core visual variables

v Symbolization

v Thematic visualization

Copyright 2022 HKU, All rights reserved 21


Cartography of interactive maps
v Colour
• RGB, additive colour model for all screens
• Depending on screen, not 100% sure of representation

Copyright 2022 HKU, All rights reserved 22


Cartography of interactive maps
v Typography
• Vector labels depend on installed fonts, ccs style
• Font family
• 2 types of fonts maximum per map

Copyright 2022 HKU, All rights reserved 23


Cartography of interactive maps

v Core visual variables

Copyright 2022 HKU, All rights reserved 24


Cartography of interactive maps
vSymbolization

Copyright 2022 HKU, All rights reserved 25


Cartography of interactive maps
vThematic visualization (base map)
Google vs Custom

Note: A thematic map is a map that focuses on a specific theme or subject area such as
physical phenomena like temperature variation, rainfall distribution and population density in
an area.
Copyright 2022 HKU, All rights reserved 26
Cartography of interactive maps
vThematic visualization (analytical map)

8,340 cycling trips from 220 unique cyclists in Philadelphia,


tracked by an app called CyclePhilly.
Copyright 2022 HKU, All rights reserved 27
Several interactive maps
http://adkwebmap.com/hamletViz.php http://roadtolarissa.com/meteors/

http://roadtolarissa.com/twisters/ https://www.hktramways.com/en/interactive-map

Copyright 2022 HKU, All rights reserved 28


www.themegallery.com
Copyright 2022 HKU, All rights reserved

You might also like