Introduction of the Unfolding map library, including a hands-on tutorial. Presented at Processing Berlin, August 2011.

1. Unfolding
library
for
interac1ve
maps
Processing
Berlin,
August
2011
Till
Nagel,
FH
Potsdam,
11th
August
2011

2. Unfolding
Map
library
for
Processing,
2011

3. Overview
•
GeoVisualiza<on
•
Projects
using
Unfolding
•
Features
&
Backgrounds
•
Map
Interac<ons
•
Map
Styles
•
Geo
Visualiza<on
•
Outlook
&
Extensions

4. GeoVisualiza1on

5. “Plain”
data
mapping

6. London
Cholera
Map
John
Snow,
1854

7. Oakland
crimespoOng
Stamen,
2009

8. Napoleon’s
March
Charles
Joseph
Minard,
1869

9. Real
Time
Rome
MIT
Senseable
City
Lab,
2006

10. London
Underground
map
Harry
Beck,
1931

11. Travel
Time
Tube
Map
Tom
Carden,
2005

12. Travel
Time
Tube
Map
Tom
Carden,
2005

13. Muse
Easy-­‐to-­‐use
interac1ve
geovisualiza1on

14. Muse
Visualizing
Scien1fic
Collabora1on

15. Muse
Visualizing
Scien1fic
Collabora1on

16. Muse
–
Visualizing
scien1fic
collabora1on

17. Muse
–
Visualizing
scien1fic
collabora1on

19. Video
of
prototype

20. Venice
Unfolding
Enabling
ci1zens
to
par1cipate
in
urban
planning

21. Interac1ve
tabletop
Jula
Lakritz,
Nadine
Patzig,
Stefan
Rechsteiner,
Mar1n
Schissler,
Stephan
Thiel

22. Polyhedron
to
explore
faceted
data

23. Display
of
facets

24. Tilt
to
select
facet

25. Rotate
to
select
term

26. Lock
term
to
highlight
matching
results

27. Video:
Venice
Unfolding
hNp://vimeo.com/11526474

28. Browse
through
media
files

29. Geovisualiza1ons
Experimental
projects
at
FH
Potsdam

30. LiteraryMap
Loca1on
based
literature
explora1on
Jan-­‐Erik
Stange
and
Sebas1an
Meier

31. LiteraryMap
hbp://lit.sebas1anmeier.eu/

32. Emography
Feelings
of
a
city
Daniel
Palmér,
Robin
Rundkvist

33. Video:
Emography
hNp://vimeo.com/20259633

34. LiquidPhone
Movements
in
a
city
Gunnar
Friedrich,
Luis
Grass,
Christopher
Pietsch,
David
Ikuye,
Pierre
La
Baume

35. The
Naked
City
Guy
Debord,
1957

36. LiquidPhone

37. LiquidPhone
LiquidPhone
Movements
in
a
city

38. Coming
soon
Moritz
Stefaner
&
Onforma1ve

39. Beber
tools

40. Summary
•
GeoVisualiza<on
s<mulates
visual
analysis.
•
Making
invisible
layers
visible.
•
Interac<ve
visualiza<on
allow
explora<on.
•
Aesthe<cs
in
visualiza<on
and
interac<on.
•
Ques<on-­‐making
and
engage
a
discussions.
•
Tools
for
beNer
GeoVisualiza<ons
are
needed

41. DotspoOng

42. Live
Singapore

43. Live
Singapore

44. Unfolding
library
Hands-­‐on
tutorial

45. Download
&
Install
For
Eclipse
and
Processing

46. hbp://code.google.com/p/unfolding

47. Unfolding-­‐to-­‐go
(watch
for
USB
s1ck)
•
Processing:
Copy
/Unfolding
into
your
libraries
folder
•
Eclipse:
Copy
/unfolding-­‐app-­‐template
into
your
workspace

48. Unfolding
in
Processing

49. Download
&
Install
GLGraphics
(op1onal,
but
recommended)
hbp://glgraphics.sourceforge.net/

50. Unfolding
in
Eclipse

51. hbp://processing.org/learning/eclipse

52. Hello
World!
Unfolding
Basics

53. Create
and
draw
a
map
Example:
SimpleMap

54. Zoom
&
Pan:
Selec1ng
the
map
sec1on
Example:
SimpleMap

55. User
interac1ons:
Mouse
&
Keyboard
Example:
SimpleMap

56. Projec1on
Unfolding
the
World

57. hbp://www.elica.net

58. Mercator
projec1on

59. Pixel
coordinates

60. Draw
onto
map

61. Screen
coordinates
to
geoloca1on
Example:
SimpleConversionMap

62. Geoloca1on
to
screen
coordinates
Example:
SimpleConversionMap

63. Tiles
Map
Styles
&
Tile
Provider

64. Pyramid
of
image
1les
(cc)
OpenGeo

65. Example:
DebugTiles

66. Tiles
in
slippy
maps

67. Tiles
in
slippy
maps

68. MapProvider
for
various
map
styles
Google
Maps
Google
Terrain
Microso^
Aerial
Open
Street
Map
Midnight
Commander
ImmoScout
Heatmap
(CloudMade)
(CloudMade)

69. Specify
map
provider
to
use

70. Mul1ple
maps
with
different
map
styles
Example:
Mul1ProviderMul1MapApp

71. Overlapping
maps
Example:
Mul1ProviderOverlayMapApp

72. Custom
styles
with
CloudMade

73. Custom
styles
with
TileMill

74. Tutorial:
How
to
use
TileMill
in
Unfolding

75. User
Interac1ons
Mouse,
Mul1touch,
Events,
etc.

76. User
interac1ons
Example:
SimpleMap

77. Example:
Mul1touch
Interac1ons
Example:
Mul1touchMapApp

78. Data
Maps
Dots,
Markers
&
Connec1ons

79. Dots
on
a
map
Example:
SimpleMarkerApp

80. Dots
on
a
map
Example:
SimpleMarkerApp

81. Reading
and
parsing
geoloca1ons
Example:
GeoRSSMarkerApp

82. Reading
and
parsing
geoloca1ons
Example:
GeoRSSMarkerApp

83. Reading
and
parsing
geoloca1ons
Example:
GeoRSSMarkerApp

84. Reading
and
parsing
geoloca1ons
Example:
GeoRSSMarkerApp

85. Reading
and
parsing
geoloca1ons
Example:
GeoRSSMarkerApp

86. Advanced
MarkerManager,
Mul1ple
maps,
Events,
...

87. Marker
and
MarkerManager

88. Mul1ple
maps

90. Coordinated
mul1ple
views

91. Map
transforma1ons

92. Call
for
Ac1on

93. Unfolding:
Call
for
Ac1on
•
Use
it
and
give
feedback
•
Request
features
•
Report
bugs
•
Suggest
examples
&
tutorials
•
Par<cipate
in
the
project

94. Play
with
it!

95. Thank
you!
Ques1ons?
hbp://unfoldingmaps.org
Till
Nagel,
FH
Potsdam,
08/2011
nagel@s-­‐potsdam.de
–
twiber:
@1llnm