Web Mash Up Making maps with web tools
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
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>!
<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
Flickr KML Feed
A neat function 1. Flickr has an easy to use KML
function
2. Right click, copy the KML link
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
Let’s See It On The Map
Load the KML
URL of the KML file
Let’s See It On The Map
Load the KML
Send the data to an object called kmlLayer
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.
Transparency Issue
What’s inside
1. A black box
2. We have no control over how it is displayed
Batch Processing
Automatically generate KML KML from Flickr photosets http://www2.adamfranco.com/photosetToKML.php
Batch Processing
What’s required
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
What’s Inside
Components Placemark
name description Style IconStyle Point Coordinates
Construct our KML
Take Note
If your include an image or other html content…
<![CDATA[
<img src = “your_content_url_here” /> ]]>
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
Multiple KML Files Load All KML URLs
Multiple KML Files
Create checklist interface
Create a HTML form that contains an unordered list
Multiple KML Files
Create checklist interface
For every KML URL in our array, add to unordered list a checkbox with the KML name specified
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
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
Multiple KML Files
Create checklist interface
If the checkbox is unchecked, java script will simply remove the KML data
Multiple KML Files
Create checklist interface
Test to see if the check box is checked, if it is, assign it the selected style
Recommended