web mashup slides for lesson 1
DESCRIPTION
Credit: Background images from Eric FischerTRANSCRIPT
![Page 1: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/1.jpg)
Web Mash Up Making maps with web tools
![Page 2: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/2.jpg)
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
![Page 3: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/3.jpg)
Some Cool Maps
![Page 4: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/4.jpg)
Stamen Design: Water Color
![Page 5: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/5.jpg)
Stamen Design: Toner
![Page 6: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/6.jpg)
Stamen Design: Terrain
![Page 7: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/7.jpg)
MapBox: Baltimore Dark, http://tiles.mapbox.com/mapbox
![Page 8: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/8.jpg)
MapBox: DC Night Vision, http://tiles.mapbox.com/mapbox
![Page 9: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/9.jpg)
MapBox: Control Room, http://tiles.mapbox.com/mapbox
![Page 10: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/10.jpg)
Utilitarian Maps Maps with data
![Page 11: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/11.jpg)
Stamen Design: Oakland Crime Spotting, http://oakland.crimespotting.org
![Page 12: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/12.jpg)
Stamen Design: San Francisco Crime Spotting, http://sanfrancisco.crimespotting.org
![Page 13: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/13.jpg)
New York Times: Mapping America, Every City, Every Block, http://projects.nytimes.com/census/2010/explorer
![Page 14: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/14.jpg)
New York Times: Mapping America, Every City, Every Block, http://projects.nytimes.com/census/2010/explorer
![Page 15: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/15.jpg)
Cambridge: Solar Tool, http://cambridgema.gov/solar/
![Page 16: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/16.jpg)
MIT: Resource Intensity of Cities, http://urbmet.org
![Page 17: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/17.jpg)
4sqmap: Foursquare Maps and Statistics
![Page 18: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/18.jpg)
To Do This
I’ll introduce you to simple concepts in: 1. GIS 2. KML
3. Data processing
![Page 19: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/19.jpg)
Objectives
Learn to:
1. Produce styled maps
2. Append data to maps
3. Include basic dynamic elements
4. Make our maps freely accessible online
![Page 20: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/20.jpg)
The Fun Part Styling Maps
Required components for this exercise:
1. Google styled map wizard
2. Google maps
3. Basic javascript
![Page 21: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/21.jpg)
The Fun Part Styling Maps
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
![Page 22: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/22.jpg)
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
![Page 23: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/23.jpg)
The Fun Part Styling Maps
Each feature has 2 elements • Geometry
• Shape • Fill • Stroke
• Label • Text
• Fill • Stroke
• Icon
![Page 24: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/24.jpg)
The Fun Part Styling Maps
Stylers • Visibility
• On • Off • Simplified
• Colour • RGB • HSB • Invert Lightness
![Page 25: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/25.jpg)
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
![Page 26: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/26.jpg)
JSON Data Structure [!
!{!! !“A” : [!! ! !{ “A1” : “value” },!! ! !{ “A2” : “value” },!! ! !{ “A3” : “value” },!! ! !{ “A4” : “value” },!! ! !{ “A5” : “value” }!! !]!!},{!! !“B” : “value”,!! !“C” : “value”,!! !“D” : [!! ! !{ “D1” : “value” }!! !] !!} ! !!
]!
![Page 27: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/27.jpg)
JSON Data Structure [!
!{!! !“stylers” : [!! ! !{ “visibility” : “on” },!! ! !{ “hue” : “#ff0000” },!! ! !{ “saturation” : -100 },!! ! !{ “lightness” : 4 },!! ! !{ "gamma": 0.5 }!! !]!!},{!! !“featureType” : “road.highway”,!! !“elementType” : “labels.icon”,!! !“stylers” : [!! ! !{ “visibility” : “off” }!! !]!!} ! !!
]!
![Page 28: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/28.jpg)
A
B
C
D
Another Way to Understand
![Page 29: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/29.jpg)
A1
A2
A3
A4
A5
B
C
D1
Another Way to Understand
![Page 30: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/30.jpg)
A1
A2
A3
A4
A5
B
C
D1
Another Way to Understand
![Page 31: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/31.jpg)
The Fun Part Styling Maps
.json Style file • Click show JSON
• Copy and paste into empty document
• Save document with .json extension
![Page 32: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/32.jpg)
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.
![Page 33: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/33.jpg)
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
![Page 34: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/34.jpg)
GIS & Space
Projection & Coordinate System Google Maps: Mercator projection
– Latitude, Horizontal Grid, Rows – Longitude, Vertical Grid, Columns – Elevation, Depth, Z Axis
![Page 35: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/35.jpg)
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
![Page 36: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/36.jpg)
Google Maps Street Address
Geo Coding
Finding geographic coordinates (in our case latitude and longitude) from other geographic data, (street addresses or Postal codes)
![Page 37: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/37.jpg)
Google Maps & Data
Basic element of Google maps is the marker
Latitude ,Longitude
![Page 38: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/38.jpg)
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
![Page 39: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/39.jpg)
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
![Page 40: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/40.jpg)
Slightly Technical
Embed Google maps
Device has no GPS sensor
![Page 41: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/41.jpg)
Slightly Technical
Embed Google maps Where we will center the map
![Page 42: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/42.jpg)
Slightly Technical
Embed Google maps
Define map options
![Page 43: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/43.jpg)
Slightly Technical
Embed Google maps
Map zoom level
![Page 44: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/44.jpg)
Slightly Technical
Embed Google maps
Set map center
![Page 45: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/45.jpg)
Slightly Technical
Embed Google maps
Specify the type of map
![Page 46: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/46.jpg)
Slightly Technical
Embed Google maps
Options • TERRAIN • ROADMAP • SATELLITE • HYBRID
![Page 47: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/47.jpg)
Slightly Technical
Embed Google maps
Display the map within the html div tag name ‘map’ with the defined map options
![Page 48: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/48.jpg)
Slightly Technical
Load your style file
URL of my file where the file lives in the computer
![Page 49: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/49.jpg)
Slightly Technical
Load your style file
Load the style file into an object called styles using the defined options
![Page 50: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/50.jpg)
Slightly Technical
Load your style file
Create a new map type with the name “styledMap”
![Page 51: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/51.jpg)
Slightly Technical
Load your style file
Instead of specifying 1 map type, we can specify
several as an array
![Page 52: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/52.jpg)
Slightly Technical
Load your style file
The 2nd map type in this case is our styled map
and its unique id is ‘map_style’
![Page 53: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/53.jpg)
Slightly Technical
Load your style file Associate unique id ‘map_style’ with maptype ‘styledMap’
![Page 54: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/54.jpg)
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
![Page 55: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/55.jpg)
Let’s Make a Marker
Define a location in coordinates Create a new marker object
![Page 56: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/56.jpg)
Let’s Make a Marker
Define a location in coordinates Set its position
![Page 57: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/57.jpg)
Let’s Make a Marker
Add the marker
Tell it which map it should go to
![Page 58: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/58.jpg)
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)
![Page 59: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/59.jpg)
Custom Marker
Load marker image
Get the marker image and define its anchor point
![Page 60: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/60.jpg)
Custom Marker
Tell the marker to use your image
Simply add it to your marker options
![Page 61: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/61.jpg)
Animate?
When someone clicks the marker…
Pan the map to the marker when it is clicked
![Page 62: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/62.jpg)
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.
Photo <Lat, Lon>
Text
Twitter Instagram Facebook Flickr
![Page 63: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/63.jpg)
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
![Page 64: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/64.jpg)
Let’s Geotag Some Data
Create an info window
![Page 65: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/65.jpg)
Let’s Geotag Some Data
Specify its content
Include all content into a single html div
![Page 66: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/66.jpg)
Let’s Geotag Some Data
When someone clicks the marker…
Send the content to the info window
![Page 67: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/67.jpg)
Let’s Geotag Some Data
When someone clicks the marker…
Open the info window
![Page 68: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/68.jpg)
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
![Page 69: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/69.jpg)
Style the Info Window
We’ll need a plugin
![Page 70: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/70.jpg)
Style the Info Window
Customizable CSS Don’t move the window because we are already moving it in the mouse event
![Page 71: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/71.jpg)
Style the Info Window
Customizable CSS Standard 1:1 aspect ratio
![Page 72: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/72.jpg)
Batch Processing
• Manually populating a map is time consuming
• Datasets may contain up to several million objects
• We can speed up this process
![Page 73: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/73.jpg)
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
![Page 74: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/74.jpg)
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
![Page 75: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/75.jpg)
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
![Page 76: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/76.jpg)
Let’s See It On The Map
Get the source URL
![Page 77: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/77.jpg)
Let’s See It On The Map
Load the data
![Page 78: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/78.jpg)
Let’s See It On The Map
Parse it Break data down into individual lines
![Page 79: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/79.jpg)
Let’s See It On The Map
Parse it Break down into individual words using comma as a splitter
![Page 80: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/80.jpg)
Let’s See It On The Map
Parse it Create an array that will contain our data
![Page 81: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/81.jpg)
Let’s See It On The Map
Parse it
Send each line to the array
![Page 82: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/82.jpg)
Let’s See It On The Map
Create multiple markers
For each data entry Create a marker with the corresponding lat,lon
![Page 83: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/83.jpg)
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
![Page 84: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/84.jpg)
Assignment
![Page 85: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/85.jpg)
Assignment
![Page 86: Web Mashup Slides For Lesson 1](https://reader033.vdocuments.us/reader033/viewer/2022052621/558b993fd8b42ab2788b45a9/html5/thumbnails/86.jpg)
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!