Unfolding	
  library	
  
for	
  interac1ve	
  maps	
  
Processing	
  Berlin,	
  August	
  2011	
  


                              Till	
  Nagel,	
  FH	
  Potsdam,	
  11th	
  August	
  2011	
  
Unfolding	
     Map	
  library	
  for	
  Processing,	
  2011	
  
Overview	
  

 • 	
  GeoVisualiza<on	
  
 • 	
  Projects	
  using	
  Unfolding	
  
 • 	
  Features	
  &	
  Backgrounds	
  
      • 	
  Map	
  Interac<ons	
  
      • 	
  Map	
  Styles	
  
      • 	
  Geo	
  Visualiza<on	
  
 • 	
  Outlook	
  &	
  Extensions	
  
GeoVisualiza1on	
  
“Plain”	
  data	
  mapping	
  
London	
  Cholera	
  Map	
     John	
  Snow,	
  1854	
  
Oakland	
  crimespoOng	
     Stamen,	
  2009	
  
Napoleon’s	
  March	
     Charles	
  Joseph	
  Minard,	
  1869	
  
Real	
  Time	
  Rome	
     MIT	
  Senseable	
  City	
  Lab,	
  2006	
  
London	
  Underground	
  map	
     Harry	
  Beck,	
  1931	
  
Travel	
  Time	
  Tube	
  Map	
     Tom	
  Carden,	
  2005	
  
Travel	
  Time	
  Tube	
  Map	
     Tom	
  Carden,	
  2005	
  
Muse	
  
Easy-­‐to-­‐use	
  interac1ve	
  geovisualiza1on	
  
Muse	
     Visualizing	
  Scien1fic	
  Collabora1on	
  	
  
Muse	
     Visualizing	
  Scien1fic	
  Collabora1on	
  	
  
Muse	
  –	
  Visualizing	
  scien1fic	
  collabora1on	
  
Muse	
  –	
  Visualizing	
  scien1fic	
  collabora1on	
  
Video	
  of	
  prototype	
  
Venice	
  Unfolding	
  
Enabling	
  ci1zens	
  to	
  par1cipate	
  in	
  urban	
  planning	
  
Interac1ve	
  tabletop	
  




                             Jula	
  Lakritz,	
  Nadine	
  Patzig,	
  
                             Stefan	
  Rechsteiner,	
  Mar1n	
  
                             Schissler,	
  Stephan	
  Thiel	
  
Polyhedron	
  to	
  explore	
  faceted	
  data	
  
Display	
  of	
  facets	
  
Tilt	
  to	
  select	
  facet	
  
Rotate	
  to	
  select	
  term	
  
Lock	
  term	
  to	
  highlight	
  matching	
  results	
  
Video:	
  Venice	
  Unfolding	
  




                   hNp://vimeo.com/11526474	
  
Browse	
  through	
  media	
  files	
  
Geovisualiza1ons	
  
Experimental	
  projects	
  at	
  FH	
  Potsdam	
  
LiteraryMap	
  	
     Loca1on	
  based	
  literature	
  explora1on	
  




                                                                         Jan-­‐Erik	
  Stange	
  and	
  
                                                                         Sebas1an	
  Meier	
  
LiteraryMap	
  	
  




                      hbp://lit.sebas1anmeier.eu/	
  
Emography	
     Feelings	
  of	
  a	
  city	
  




                                                  Daniel	
  Palmér,	
  
                                                  Robin	
  Rundkvist	
  
Video:	
  Emography	
  




                 hNp://vimeo.com/20259633	
  
LiquidPhone	
     Movements	
  in	
  a	
  city	
  




                                                     Gunnar	
  Friedrich,	
  Luis	
  Grass,	
  
                                                     Christopher	
  Pietsch,	
  David	
  
                                                     Ikuye,	
  Pierre	
  La	
  Baume	
  
The	
  Naked	
  City	
     Guy	
  Debord,	
  1957	
  
LiquidPhone	
  
LiquidPhone	
  
 LiquidPhone	
     Movements	
  in	
  a	
  city	
  
Coming	
  soon	
  




                     Moritz	
  Stefaner	
  &	
  
                     Onforma1ve	
  
Beber	
  tools	
  
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	
  
DotspoOng	
  
Live	
  Singapore	
  
Live	
  Singapore	
  
Unfolding	
  library	
  
Hands-­‐on	
  tutorial	
  
Download	
  &	
  Install	
  
For	
  Eclipse	
  and	
  Processing	
  
hbp://code.google.com/p/unfolding	
  
Unfolding-­‐to-­‐go	
  (watch	
  for	
  USB	
  s1ck)	
  

 • 	
  Processing:	
  Copy	
  /Unfolding	
  into	
  your	
  libraries	
  folder	
  	
  	
  




 • 	
  Eclipse:	
  Copy	
  /unfolding-­‐app-­‐template	
  into	
  your	
  workspace	
  
Unfolding	
  in	
  Processing	
  
Download	
  &	
  Install	
  GLGraphics	
  
(op1onal,	
  but	
  recommended)	
  




                                             hbp://glgraphics.sourceforge.net/	
  
Unfolding	
  in	
  Eclipse	
  
hbp://processing.org/learning/eclipse	
  
Hello	
  World!	
  
Unfolding	
  Basics	
  
Create	
  and	
  draw	
  a	
  map	
  




                                        Example:	
  SimpleMap	
  
Zoom	
  &	
  Pan:	
  Selec1ng	
  the	
  map	
  sec1on	
  




                                                            Example:	
  SimpleMap	
  
User	
  interac1ons:	
  Mouse	
  &	
  Keyboard	
  




                                                     Example:	
  SimpleMap	
  
Projec1on	
  
Unfolding	
  the	
  World	
  
hbp://www.elica.net	
  
Mercator	
  projec1on	
  
Pixel	
  coordinates	
  
Draw	
  onto	
  map	
  
Screen	
  coordinates	
  to	
  geoloca1on	
  




                                                Example:	
  SimpleConversionMap	
  
Geoloca1on	
  to	
  screen	
  coordinates	
  




                                                Example:	
  SimpleConversionMap	
  
Tiles	
  
Map	
  Styles	
  &	
  Tile	
  Provider	
  
Pyramid	
  of	
  image	
  1les	
  




                                     (cc)	
  OpenGeo	
  
Example:	
  DebugTiles	
  
Tiles	
  in	
  slippy	
  maps	
  
Tiles	
  in	
  slippy	
  maps	
  
MapProvider	
  for	
  various	
  map	
  styles	
  




      Google	
  Maps	
             Google	
  Terrain	
         Microso^	
  Aerial	
  




    Open	
  Street	
  Map	
     Midnight	
  Commander	
     ImmoScout	
  Heatmap	
  
      (CloudMade)	
                (CloudMade)	
  
Specify	
  map	
  provider	
  to	
  use	
  
Mul1ple	
  maps	
  with	
  different	
  map	
  styles	
  




                                                Example:	
  Mul1ProviderMul1MapApp	
  
Overlapping	
  maps	
  




                          Example:	
  Mul1ProviderOverlayMapApp	
  
Custom	
  styles	
  with	
  CloudMade	
  
Custom	
  styles	
  with	
  TileMill	
  
Tutorial:	
  How	
  to	
  use	
  TileMill	
  in	
  Unfolding	
  
User	
  Interac1ons	
  
Mouse,	
  Mul1touch,	
  Events,	
  etc.	
  
User	
  interac1ons	
  




                          Example:	
  SimpleMap	
  
Example:	
  Mul1touch	
  Interac1ons	
  




                                           Example:	
  Mul1touchMapApp	
  
Data	
  Maps	
  
Dots,	
  Markers	
  &	
  Connec1ons	
  
Dots	
  on	
  a	
  map	
  




                             Example:	
  SimpleMarkerApp	
  
Dots	
  on	
  a	
  map	
  




                             Example:	
  SimpleMarkerApp	
  
Reading	
  and	
  parsing	
  geoloca1ons	
  




                                               Example:	
  GeoRSSMarkerApp	
  
Reading	
  and	
  parsing	
  geoloca1ons	
  




                                               Example:	
  GeoRSSMarkerApp	
  
Reading	
  and	
  parsing	
  geoloca1ons	
  




                                               Example:	
  GeoRSSMarkerApp	
  
Reading	
  and	
  parsing	
  geoloca1ons	
  




                                               Example:	
  GeoRSSMarkerApp	
  
Reading	
  and	
  parsing	
  geoloca1ons	
  




                                               Example:	
  GeoRSSMarkerApp	
  
Advanced	
  
MarkerManager,	
  Mul1ple	
  maps,	
  Events,	
  ...	
  
Marker	
  and	
  MarkerManager	
  
Mul1ple	
  maps	
  
Coordinated	
  mul1ple	
  views	
  	
  
Map	
  transforma1ons	
  
Call	
  for	
  Ac1on	
  
Unfolding:	
  Call	
  for	
  Ac1on	
  

 • 	
  Use	
  it	
  and	
  give	
  feedback	
  


 • 	
  Request	
  features	
  
 • 	
  Report	
  bugs	
  
 • 	
  Suggest	
  examples	
  &	
  tutorials	
  


 • 	
  Par<cipate	
  in	
  the	
  project	
  
Play	
  with	
  it!	
  
Thank	
  you!	
  Ques1ons?	
  
hbp://unfoldingmaps.org	
  




                              Till	
  Nagel,	
  FH	
  Potsdam,	
  08/2011	
  
                              nagel@s-­‐potsdam.de	
  	
  –	
  	
  twiber:	
  @1llnm	
  

Unfolding Library for Interactive Maps