Unfolding Library for Interactive Maps

32,948 views
32,798 views

Published on

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

Published in: Design, Education, Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
32,948
On SlideShare
0
From Embeds
0
Number of Embeds
25,594
Actions
Shares
0
Downloads
0
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

Unfolding Library for Interactive Maps

  1. 1. Unfolding  library  for  interac1ve  maps  Processing  Berlin,  August  2011   Till  Nagel,  FH  Potsdam,  11th  August  2011  
  2. 2. Unfolding   Map  library  for  Processing,  2011  
  3. 3. Overview   •   GeoVisualiza<on   •   Projects  using  Unfolding   •   Features  &  Backgrounds   •   Map  Interac<ons   •   Map  Styles   •   Geo  Visualiza<on   •   Outlook  &  Extensions  
  4. 4. GeoVisualiza1on  
  5. 5. “Plain”  data  mapping  
  6. 6. London  Cholera  Map   John  Snow,  1854  
  7. 7. Oakland  crimespoOng   Stamen,  2009  
  8. 8. Napoleon’s  March   Charles  Joseph  Minard,  1869  
  9. 9. Real  Time  Rome   MIT  Senseable  City  Lab,  2006  
  10. 10. London  Underground  map   Harry  Beck,  1931  
  11. 11. Travel  Time  Tube  Map   Tom  Carden,  2005  
  12. 12. Travel  Time  Tube  Map   Tom  Carden,  2005  
  13. 13. Muse  Easy-­‐to-­‐use  interac1ve  geovisualiza1on  
  14. 14. Muse   Visualizing  Scien1fic  Collabora1on    
  15. 15. Muse   Visualizing  Scien1fic  Collabora1on    
  16. 16. Muse  –  Visualizing  scien1fic  collabora1on  
  17. 17. Muse  –  Visualizing  scien1fic  collabora1on  
  18. 18. Video  of  prototype  
  19. 19. Venice  Unfolding  Enabling  ci1zens  to  par1cipate  in  urban  planning  
  20. 20. Interac1ve  tabletop   Jula  Lakritz,  Nadine  Patzig,   Stefan  Rechsteiner,  Mar1n   Schissler,  Stephan  Thiel  
  21. 21. Polyhedron  to  explore  faceted  data  
  22. 22. Display  of  facets  
  23. 23. Tilt  to  select  facet  
  24. 24. Rotate  to  select  term  
  25. 25. Lock  term  to  highlight  matching  results  
  26. 26. Video:  Venice  Unfolding   hNp://vimeo.com/11526474  
  27. 27. Browse  through  media  files  
  28. 28. Geovisualiza1ons  Experimental  projects  at  FH  Potsdam  
  29. 29. LiteraryMap     Loca1on  based  literature  explora1on   Jan-­‐Erik  Stange  and   Sebas1an  Meier  
  30. 30. LiteraryMap     hbp://lit.sebas1anmeier.eu/  
  31. 31. Emography   Feelings  of  a  city   Daniel  Palmér,   Robin  Rundkvist  
  32. 32. Video:  Emography   hNp://vimeo.com/20259633  
  33. 33. LiquidPhone   Movements  in  a  city   Gunnar  Friedrich,  Luis  Grass,   Christopher  Pietsch,  David   Ikuye,  Pierre  La  Baume  
  34. 34. The  Naked  City   Guy  Debord,  1957  
  35. 35. LiquidPhone  
  36. 36. LiquidPhone   LiquidPhone   Movements  in  a  city  
  37. 37. Coming  soon   Moritz  Stefaner  &   Onforma1ve  
  38. 38. Beber  tools  
  39. 39. 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  
  40. 40. DotspoOng  
  41. 41. Live  Singapore  
  42. 42. Live  Singapore  
  43. 43. Unfolding  library  Hands-­‐on  tutorial  
  44. 44. Download  &  Install  For  Eclipse  and  Processing  
  45. 45. hbp://code.google.com/p/unfolding  
  46. 46. Unfolding-­‐to-­‐go  (watch  for  USB  s1ck)   •   Processing:  Copy  /Unfolding  into  your  libraries  folder       •   Eclipse:  Copy  /unfolding-­‐app-­‐template  into  your  workspace  
  47. 47. Unfolding  in  Processing  
  48. 48. Download  &  Install  GLGraphics  (op1onal,  but  recommended)   hbp://glgraphics.sourceforge.net/  
  49. 49. Unfolding  in  Eclipse  
  50. 50. hbp://processing.org/learning/eclipse  
  51. 51. Hello  World!  Unfolding  Basics  
  52. 52. Create  and  draw  a  map   Example:  SimpleMap  
  53. 53. Zoom  &  Pan:  Selec1ng  the  map  sec1on   Example:  SimpleMap  
  54. 54. User  interac1ons:  Mouse  &  Keyboard   Example:  SimpleMap  
  55. 55. Projec1on  Unfolding  the  World  
  56. 56. hbp://www.elica.net  
  57. 57. Mercator  projec1on  
  58. 58. Pixel  coordinates  
  59. 59. Draw  onto  map  
  60. 60. Screen  coordinates  to  geoloca1on   Example:  SimpleConversionMap  
  61. 61. Geoloca1on  to  screen  coordinates   Example:  SimpleConversionMap  
  62. 62. Tiles  Map  Styles  &  Tile  Provider  
  63. 63. Pyramid  of  image  1les   (cc)  OpenGeo  
  64. 64. Example:  DebugTiles  
  65. 65. Tiles  in  slippy  maps  
  66. 66. Tiles  in  slippy  maps  
  67. 67. MapProvider  for  various  map  styles   Google  Maps   Google  Terrain   Microso^  Aerial   Open  Street  Map   Midnight  Commander   ImmoScout  Heatmap   (CloudMade)   (CloudMade)  
  68. 68. Specify  map  provider  to  use  
  69. 69. Mul1ple  maps  with  different  map  styles   Example:  Mul1ProviderMul1MapApp  
  70. 70. Overlapping  maps   Example:  Mul1ProviderOverlayMapApp  
  71. 71. Custom  styles  with  CloudMade  
  72. 72. Custom  styles  with  TileMill  
  73. 73. Tutorial:  How  to  use  TileMill  in  Unfolding  
  74. 74. User  Interac1ons  Mouse,  Mul1touch,  Events,  etc.  
  75. 75. User  interac1ons   Example:  SimpleMap  
  76. 76. Example:  Mul1touch  Interac1ons   Example:  Mul1touchMapApp  
  77. 77. Data  Maps  Dots,  Markers  &  Connec1ons  
  78. 78. Dots  on  a  map   Example:  SimpleMarkerApp  
  79. 79. Dots  on  a  map   Example:  SimpleMarkerApp  
  80. 80. Reading  and  parsing  geoloca1ons   Example:  GeoRSSMarkerApp  
  81. 81. Reading  and  parsing  geoloca1ons   Example:  GeoRSSMarkerApp  
  82. 82. Reading  and  parsing  geoloca1ons   Example:  GeoRSSMarkerApp  
  83. 83. Reading  and  parsing  geoloca1ons   Example:  GeoRSSMarkerApp  
  84. 84. Reading  and  parsing  geoloca1ons   Example:  GeoRSSMarkerApp  
  85. 85. Advanced  MarkerManager,  Mul1ple  maps,  Events,  ...  
  86. 86. Marker  and  MarkerManager  
  87. 87. Mul1ple  maps  
  88. 88. Coordinated  mul1ple  views    
  89. 89. Map  transforma1ons  
  90. 90. Call  for  Ac1on  
  91. 91. Unfolding:  Call  for  Ac1on   •   Use  it  and  give  feedback   •   Request  features   •   Report  bugs   •   Suggest  examples  &  tutorials   •   Par<cipate  in  the  project  
  92. 92. Play  with  it!  
  93. 93. Thank  you!  Ques1ons?  hbp://unfoldingmaps.org   Till  Nagel,  FH  Potsdam,  08/2011   nagel@s-­‐potsdam.de    –    twiber:  @1llnm  

×