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