web mashup slides for lesson 2
DESCRIPTION
Credit: Background images from Eric FischerTRANSCRIPT
![Page 1: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/1.jpg)
Web Mash Up Making maps with web tools
![Page 2: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/2.jpg)
Keyhole Markup Language
Google earth & maps data format
1. Hierarchical, parent-child logic
2. KML files are rendered server side
3. Must be hosted online in order for Google to retrieve & compute
![Page 3: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/3.jpg)
Keyhole Markup Language <A>!
<B>!<B1></B1>!<B2>!
!<B3></B3>!!<B4></B4>!!<B5>!
! !<B5A></B5A>!!</B5>!!<B6>!! !<B6A>!
! ! !<B6A1>!! ! ! !<B6A1A></B6A1A>!! ! !</B6A1>!
! !</B6A>!!</B6>!</B2>!
</B>!
</A>!
![Page 4: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/4.jpg)
<Kml>!<Document>!
<Name></Name>!<Placemark>!
!<Name></Name>!!<Description></Description>!!<Point>!
! !<coordinates></coordinates>!!</Point>!!<Style>!! !<IconStyle>!
! ! !<Icon>!! ! ! !<href></href>!! ! !</Icon>!
! !</IconStyle>!!</Style>!</Placemark>!
</Document>!
</Kml>!
Keyhole Markup Language
![Page 5: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/5.jpg)
Flickr KML Feed
A neat function 1. Flickr has an easy to use KML
function
2. Right click, copy the KML link
![Page 6: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/6.jpg)
Let’s See It On The Map
How to visualise a KML file 1. Embed Google maps in a .html document
2. Load the KML
3. Create and add markers
![Page 7: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/7.jpg)
Let’s See It On The Map
Load the KML
URL of the KML file
![Page 8: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/8.jpg)
Let’s See It On The Map
Load the KML
Send the data to an object called kmlLayer
![Page 9: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/9.jpg)
Let’s See It On The Map
Create and add markers
Google maps handles kml internally. Essentially it replicates the code used in our spreadsheet example.
![Page 10: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/10.jpg)
Transparency Issue
What’s inside
1. A black box
2. We have no control over how it is displayed
![Page 11: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/11.jpg)
Batch Processing
Automatically generate KML KML from Flickr photosets http://www2.adamfranco.com/photosetToKML.php
![Page 12: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/12.jpg)
Batch Processing
What’s required
![Page 13: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/13.jpg)
See It On A Map
Visualise the generated KML file 1. Embed Google maps in a .html document
2. Load the KML data
3. Create and add markers
Observe that the markers are actually image thumbnails
![Page 14: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/14.jpg)
What’s Inside
Components Placemark
name description Style IconStyle Point Coordinates
![Page 15: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/15.jpg)
Construct our KML
![Page 16: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/16.jpg)
Take Note
If your include an image or other html content…
<![CDATA[
<img src = “your_content_url_here” /> ]]>
![Page 17: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/17.jpg)
Multiple KML Files
How to visualise multiple KML files
1. Embed Google maps in a .html document
2. Load all KML URLs
3. Create checklist interface 4. Create and add markers
![Page 18: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/18.jpg)
Multiple KML Files Load All KML URLs
![Page 19: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/19.jpg)
Multiple KML Files
Create checklist interface
Create a HTML form that contains an unordered list
![Page 20: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/20.jpg)
Multiple KML Files
Create checklist interface
For every KML URL in our array, add to unordered list a checkbox with the KML name specified
![Page 21: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/21.jpg)
Multiple KML Files
Create checklist interface
These checkboxes have the same action. When user selects an item, java script will execute the function toggleKML & highlight
![Page 22: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/22.jpg)
Multiple KML Files
Create checklist interface
There are 2 possible actions toggleKML will execute If the checkbox is checked, Google maps will query the specified URL attached to this checkbox then load and render the KML data
![Page 23: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/23.jpg)
Multiple KML Files
Create checklist interface
If the checkbox is unchecked, java script will simply remove the KML data
![Page 24: Web Mashup Slides For Lesson 2](https://reader034.vdocuments.us/reader034/viewer/2022042713/5494f6d5b47959474d8b4c26/html5/thumbnails/24.jpg)
Multiple KML Files
Create checklist interface
Test to see if the check box is checked, if it is, assign it the selected style