Web Mashup Slides For Lesson 1

1,419 views

Published on

Credit: Background images from Eric Fischer

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,419
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Mashup Slides For Lesson 1

  1. 1. Web Mash UpMaking maps with web tools
  2. 2. Lesson OutcomeAt the end of this segment, you will have:1.  Your own interactive map2.  Containing real data3.  And an understanding of how to leverage the potential of web tools to produce maps
  3. 3. Some Cool Maps
  4. 4. Stamen Design: Water Color
  5. 5. Stamen Design: Toner
  6. 6. Stamen Design: Terrain
  7. 7. MapBox: Baltimore Dark, http://tiles.mapbox.com/mapbox
  8. 8. MapBox: DC Night Vision, http://tiles.mapbox.com/mapbox
  9. 9. MapBox: Control Room, http://tiles.mapbox.com/mapbox
  10. 10. Utilitarian MapsMaps with data
  11. 11. Stamen Design: Oakland Crime Spotting, http://oakland.crimespotting.org
  12. 12. Stamen Design: San Francisco Crime Spotting, http://sanfrancisco.crimespotting.org
  13. 13. New York Times: Mapping America, Every City, Every Block, http://projects.nytimes.com/census/2010/explorer
  14. 14. New York Times: Mapping America, Every City, Every Block, http://projects.nytimes.com/census/2010/explorer
  15. 15. Cambridge: Solar Tool, http://cambridgema.gov/solar/
  16. 16. MIT: Resource Intensity of Cities, http://urbmet.org
  17. 17. 4sqmap: Foursquare Maps and Statistics
  18. 18. To Do ThisI’ll introduce you to simpleconcepts in:1.  GIS2.  KML3.  Data processing
  19. 19. ObjectivesLearn to:1.  Produce styled maps2.  Append data to maps3.  Include basic dynamic elements4.  Make our maps freely accessible online
  20. 20. The Fun Part Styling MapsRequired componentsfor this exercise:1.  Google styled map wizard2.  Google maps3.  Basic javascript
  21. 21. The Fun Part Styling Mapshttp://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
  22. 22. The Fun Part Styling Maps Features1.  Area of interest defined by Google2.  You have control over what you want or do not want to show3.  Dependent on the type of map you are building and the design goal it is meant to achieve
  23. 23. The Fun Part Styling MapsEach feature has2 elements•  Geometry •  Shape •  Fill •  Stroke•  Label •  Text •  Fill •  Stroke •  Icon
  24. 24. The Fun Part Styling MapsStylers•  Visibility •  On •  Off •  Simplified•  Colour •  RGB •  HSB •  Invert Lightness
  25. 25. The Fun Part Styling MapsYou may remember styling with CSS, thisis similar except that it is structured in adifferent data format .json Java Script Object Notation
  26. 26. JSON Data Structure [! !{! ! !“A” : [! ! ! !{ “A1” : “value” },! ! ! !{ “A2” : “value” },! ! ! !{ “A3” : “value” },! ! ! !{ “A4” : “value” },! ! ! !{ “A5” : “value” }! ! !]! !},{! ! !“B” : “value”,! ! !“C” : “value”,! ! !“D” : [! ! ! !{ “D1” : “value” }! ! !] ! !} ! !! ]!
  27. 27. JSON Data Structure [! !{! ! !“stylers” : [! ! ! !{ “visibility” : “on” },! ! ! !{ “hue” : “#ff0000” },! ! ! !{ “saturation” : -100 },! ! ! !{ “lightness” : 4 },! ! ! !{ "gamma": 0.5 }! ! !]! !},{! ! !“featureType” : “road.highway”,! ! !“elementType” : “labels.icon”,! ! !“stylers” : [! ! ! !{ “visibility” : “off” }! ! !]! !} ! !! ]!
  28. 28. Another Way to Understand B A C D
  29. 29. Another Way to Understand A1 B A2 A3 C A4 D1 A5
  30. 30. Another Way to Understand A1 B A2 A3 C A4 D1 A5
  31. 31. The Fun Part Styling Maps.json Style file•  Click show JSON•  Copy and paste into empty document•  Save document with .json extension
  32. 32. Data & GIS•  The marker is an indication of a location on the map•  Geographically, we understand this as a coordinate.•  GIS is a way to work with data on digital maps.
  33. 33. Geographic Information System GIS•  Is a broad term•  A system to work with geographic data•  In simplest form, GIS is the merger of: –  Cartography –  Analysis –  Database
  34. 34. GIS & SpaceProjection & Coordinate SystemGoogle Maps: Mercator projection – Latitude, Horizontal Grid, Rows – Longitude, Vertical Grid, Columns – Elevation, Depth, Z Axis
  35. 35. GIS & SpaceReading a coordinate –  Latitude, Longitude •  50.8790° N, 4.7015° E •  Google Search It –  Machine Readable Format •  Float Values •  50.877613, 4.70438 •  Google Search It
  36. 36. Geo CodingFinding geographic coordinates (in our caselatitude and longitude) from othergeographic data, (street addresses or Postalcodes) Street Address Google Maps
  37. 37. Google Maps & Data Basic element of Google maps is the marker Latitude ,Longitude
  38. 38. How to find Lat Lon?Many websites offer geocoding services –  http://www.findlatitudeandlongitude.com –  http://itouchmap.com/latlong.html –  http://stevemorse.org/jcal/latlon.php –  http://www.gpsvisualizer.com/geocode
  39. 39. Slightly TechnicalHow to include your style file1.  Embed Google maps in a .html document2.  Load your style file3.  Bind your style with to the map
  40. 40. Slightly TechnicalEmbed Google maps Device has no GPS sensor
  41. 41. Slightly TechnicalEmbed Google maps Where we will center the map
  42. 42. Slightly TechnicalEmbed Google maps Define map options
  43. 43. Slightly TechnicalEmbed Google maps Map zoom level
  44. 44. Slightly TechnicalEmbed Google maps Set map center
  45. 45. Slightly TechnicalEmbed Google maps Specify the type of map
  46. 46. Slightly TechnicalEmbed Google maps Options •  TERRAIN •  ROADMAP •  SATELLITE •  HYBRID
  47. 47. Slightly TechnicalEmbed Google maps Display the map within the html div tag name ‘map’ with the defined map options
  48. 48. Slightly TechnicalLoad your style file URL of my file where the file lives in the computer
  49. 49. Slightly TechnicalLoad your style file Load the style file into an object called styles using the defined options
  50. 50. Slightly TechnicalLoad your style file Create a new map type with the name “styledMap”
  51. 51. Slightly TechnicalLoad your style file Instead of specifying 1 map type, we can specify several as an array
  52. 52. Slightly TechnicalLoad your style file The 2nd map type in this case is our styled map and its unique id is ‘map_style’
  53. 53. Slightly TechnicalLoad your style file Associate unique id ‘map_style’ with maptype ‘styledMap’
  54. 54. Let’s Make a MarkerHow to add a marker1.  Embed Google maps in a .html document2.  Define a location in coordinates3.  Add the marker to the map
  55. 55. Let’s Make a MarkerDefine a location in coordinates Create a new marker object
  56. 56. Let’s Make a MarkerDefine a location in coordinates Set its position
  57. 57. Let’s Make a MarkerAdd the marker Tell it which map it should go to
  58. 58. Is it customizable?How to change the look of your marker1.  Embed Google maps in a .html document2.  Add your marker3.  Change the marker with a .png file (max res. 32 x 32 pixels)
  59. 59. Custom MarkerLoad marker image Get the marker image and define its anchor point
  60. 60. Custom MarkerTell the marker to use your imageSimply add it to your marker options
  61. 61. Animate?When someone clicks the marker… Pan the map to the marker when it is clicked
  62. 62. Geo Tagging•  By making a geo tag, we are essentially associating location specific information with other data.•  In doing so, we create a connection between data and space. Twitter Photo <Lat, Lon> Instagram Facebook Text Flickr
  63. 63. Let’s Geotag Some DataSimple geotagging1.  Embed Google maps in a .html document2.  Add the marker to the map3.  Add html content
  64. 64. Let’s Geotag Some DataCreate an info window
  65. 65. Let’s Geotag Some DataSpecify its content Include all content into a single html div
  66. 66. Let’s Geotag Some DataWhen someone clicks the marker… Send the content to the info window
  67. 67. Let’s Geotag Some DataWhen someone clicks the marker… Open the info window
  68. 68. Is it customizable?How to change the look ofyour info window1.  Embed Google maps in a .html document2.  Add the marker to the map3.  Add html content4.  Style the content
  69. 69. Style the Info WindowWe’ll need a plugin
  70. 70. Style the Info Window Don’t move theCustomizable CSS window because we are already moving it in the mouse event
  71. 71. Style the Info WindowCustomizable CSS Standard 1:1 aspect ratio
  72. 72. Batch Processing•  Manually populating a map is time consuming•  Datasets may contain up to several million objects•  We can speed up this process
  73. 73. Batch ProcessingGeo coding with Google spreadsheet 1.  Get a set of addresses 2.  Populate column B with addresses 3.  In cell A1, insert •  http://maps.google.com/maps/geo?output=csv&q= 4.  In cell C1 insert 1.  =importData(CONCATENATE($A$1,B1)) 2.  Click & drag to iterate formula
  74. 74. Batch ProcessingSo what’s the extra stuff? 1.  Column C = Query Response 2.  Column D = Zoom Level 3.  Create a new spreadsheet •  Bottom Left Corner ‘ + ‘ Symbol 4.  Insert the following query into cell A1 •  =query(Sheet1!B:F,"select B,E,F”) 5.  Now the set is clean
  75. 75. Batch ProcessingPublically Accessible 1.  Select File 2.  Select Publish to the web 3.  Click Publish now 4.  Copy the generated URL 5.  For all subsequent changes to take effect, you must republish this document
  76. 76. Let’s See It On The MapGet the source URL
  77. 77. Let’s See It On The MapLoad the data
  78. 78. Let’s See It On The MapParse it Break data down into individual lines
  79. 79. Let’s See It On The MapParse it Break down into individual words using comma as a splitter
  80. 80. Let’s See It On The MapParse it Create an array that will contain our data
  81. 81. Let’s See It On The MapParse it Send each line to the array
  82. 82. Let’s See It On The MapCreate multiple markers For each data entry Create a marker with the corresponding lat,lon
  83. 83. Let’s See It On The MapWhen a marker is clicked… For the clicked marker among all markers, get its corresponding data and display it in the infowindow
  84. 84. Assignment
  85. 85. Assignment
  86. 86. Assignment•  Each student takes an address•  Conducts field observation based on a list of characteristics•  Bring your observation during the next lesson and we will attempt to complete it!

×