Web Mashup Slides For Lesson 1
•
0 j'aime•1,279 vues
Credit: Background images from Eric Fischer
Recommandé
Contenu connexe
Similaire à Web Mashup Slides For Lesson 1
Similaire à Web Mashup Slides For Lesson 1 (20)
Dernier
Dernier (20)
Web Mashup Slides For Lesson 1
- 1. Web Mash Up Making maps with web tools
- 2. Lesson Outcome At the end of this segment, you will have: 1. Your own interactive map 2. Containing real data 3. And an understanding of how to leverage the potential of web tools to produce maps
- 4. Stamen Design: Water Color
- 7. MapBox: Baltimore Dark, http://tiles.mapbox.com/mapbox
- 8. MapBox: DC Night Vision, http://tiles.mapbox.com/mapbox
- 9. MapBox: Control Room, http://tiles.mapbox.com/mapbox
- 10. Utilitarian Maps Maps with data
- 11. Stamen Design: Oakland Crime Spotting, http://oakland.crimespotting.org
- 12. Stamen Design: San Francisco Crime Spotting, http://sanfrancisco.crimespotting.org
- 13. New York Times: Mapping America, Every City, Every Block, http://projects.nytimes.com/census/2010/explorer
- 14. New York Times: Mapping America, Every City, Every Block, http://projects.nytimes.com/census/2010/explorer
- 15. Cambridge: Solar Tool, http://cambridgema.gov/solar/
- 16. MIT: Resource Intensity of Cities, http://urbmet.org
- 17. 4sqmap: Foursquare Maps and Statistics
- 18. To Do This I’ll introduce you to simple concepts in: 1. GIS 2. KML 3. Data processing
- 19. Objectives Learn to: 1. Produce styled maps 2. Append data to maps 3. Include basic dynamic elements 4. Make our maps freely accessible online
- 20. The Fun Part Styling Maps Required components for this exercise: 1. Google styled map wizard 2. Google maps 3. Basic javascript
- 21. The Fun Part Styling Maps http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
- 22. The Fun Part Styling Maps Features 1. Area of interest defined by Google 2. You have control over what you want or do not want to show 3. Dependent on the type of map you are building and the design goal it is meant to achieve
- 23. The Fun Part Styling Maps Each feature has 2 elements • Geometry • Shape • Fill • Stroke • Label • Text • Fill • Stroke • Icon
- 24. The Fun Part Styling Maps Stylers • Visibility • On • Off • Simplified • Colour • RGB • HSB • Invert Lightness
- 25. The Fun Part Styling Maps You may remember styling with CSS, this is similar except that it is structured in a different data format .json Java Script Object Notation
- 26. JSON Data Structure [! !{! ! !“A” : [! ! ! !{ “A1” : “value” },! ! ! !{ “A2” : “value” },! ! ! !{ “A3” : “value” },! ! ! !{ “A4” : “value” },! ! ! !{ “A5” : “value” }! ! !]! !},{! ! !“B” : “value”,! ! !“C” : “value”,! ! !“D” : [! ! ! !{ “D1” : “value” }! ! !] ! !} ! !! ]!
- 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. Another Way to Understand B A C D
- 29. Another Way to Understand A1 B A2 A3 C A4 D1 A5
- 30. Another Way to Understand A1 B A2 A3 C A4 D1 A5
- 31. The Fun Part Styling Maps .json Style file • Click show JSON • Copy and paste into empty document • Save document with .json extension
- 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. 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. GIS & Space Projection & Coordinate System Google Maps: Mercator projection – Latitude, Horizontal Grid, Rows – Longitude, Vertical Grid, Columns – Elevation, Depth, Z Axis
- 35. GIS & Space Reading 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. Geo Coding Finding geographic coordinates (in our case latitude and longitude) from other geographic data, (street addresses or Postal codes) Street Address Google Maps
- 37. Google Maps & Data Basic element of Google maps is the marker Latitude ,Longitude
- 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. Slightly Technical How to include your style file 1. Embed Google maps in a .html document 2. Load your style file 3. Bind your style with to the map
- 40. Slightly Technical Embed Google maps Device has no GPS sensor
- 41. Slightly Technical Embed Google maps Where we will center the map
- 42. Slightly Technical Embed Google maps Define map options
- 43. Slightly Technical Embed Google maps Map zoom level
- 44. Slightly Technical Embed Google maps Set map center
- 45. Slightly Technical Embed Google maps Specify the type of map
- 46. Slightly Technical Embed Google maps Options • TERRAIN • ROADMAP • SATELLITE • HYBRID
- 47. Slightly Technical Embed Google maps Display the map within the html div tag name ‘map’ with the defined map options
- 48. Slightly Technical Load your style file URL of my file where the file lives in the computer
- 49. Slightly Technical Load your style file Load the style file into an object called styles using the defined options
- 50. Slightly Technical Load your style file Create a new map type with the name “styledMap”
- 51. Slightly Technical Load your style file Instead of specifying 1 map type, we can specify several as an array
- 52. Slightly Technical Load your style file The 2nd map type in this case is our styled map and its unique id is ‘map_style’
- 53. Slightly Technical Load your style file Associate unique id ‘map_style’ with maptype ‘styledMap’
- 54. Let’s Make a Marker How to add a marker 1. Embed Google maps in a .html document 2. Define a location in coordinates 3. Add the marker to the map
- 55. Let’s Make a Marker Define a location in coordinates Create a new marker object
- 56. Let’s Make a Marker Define a location in coordinates Set its position
- 57. Let’s Make a Marker Add the marker Tell it which map it should go to
- 58. Is it customizable? How to change the look of your marker 1. Embed Google maps in a .html document 2. Add your marker 3. Change the marker with a .png file (max res. 32 x 32 pixels)
- 59. Custom Marker Load marker image Get the marker image and define its anchor point
- 60. Custom Marker Tell the marker to use your image Simply add it to your marker options
- 61. Animate? When someone clicks the marker… Pan the map to the marker when it is clicked
- 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. Let’s Geotag Some Data Simple geotagging 1. Embed Google maps in a .html document 2. Add the marker to the map 3. Add html content
- 64. Let’s Geotag Some Data Create an info window
- 65. Let’s Geotag Some Data Specify its content Include all content into a single html div
- 66. Let’s Geotag Some Data When someone clicks the marker… Send the content to the info window
- 67. Let’s Geotag Some Data When someone clicks the marker… Open the info window
- 68. Is it customizable? How to change the look of your info window 1. Embed Google maps in a .html document 2. Add the marker to the map 3. Add html content 4. Style the content
- 69. Style the Info Window We’ll need a plugin
- 70. Style the Info Window Don’t move the Customizable CSS window because we are already moving it in the mouse event
- 71. Style the Info Window Customizable CSS Standard 1:1 aspect ratio
- 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. Batch Processing Geo 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. Batch Processing So 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. Batch Processing Publically 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. Let’s See It On The Map Get the source URL
- 77. Let’s See It On The Map Load the data
- 78. Let’s See It On The Map Parse it Break data down into individual lines
- 79. Let’s See It On The Map Parse it Break down into individual words using comma as a splitter
- 80. Let’s See It On The Map Parse it Create an array that will contain our data
- 81. Let’s See It On The Map Parse it Send each line to the array
- 82. Let’s See It On The Map Create multiple markers For each data entry Create a marker with the corresponding lat,lon
- 83. Let’s See It On The Map When a marker is clicked… For the clicked marker among all markers, get its corresponding data and display it in the infowindow
- 84. Assignment
- 85. Assignment
- 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!