initial commit

fr1n63 · Jun 16, 2011 · e26ac4f · e26ac4f
commit e26ac4f
Show file tree

Hide file tree

Showing 8 changed files with 336 additions and 0 deletions.
diff --git a/doc.kml b/doc.kml
@@ -0,0 +1,167 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<kml xmlns="http://earth.google.com/kml/2.2">
+<Document>
+  <name>test_cycle_route</name>
+  <description><![CDATA[]]></description>
+  <Style id="style1">
+    <LineStyle>
+      <color>73FF0000</color>
+      <width>5</width>
+    </LineStyle>
+  </Style>
+  <Style id="style9">
+    <IconStyle>
+      <Icon>
+        <href>http://maps.gstatic.com/intl/en_uk/mapfiles/ms/micons/blue-dot.png</href>
+      </Icon>
+    </IconStyle>
+  </Style>
+  <Style id="style3">
+    <IconStyle>
+      <Icon>
+        <href>http://maps.gstatic.com/intl/en_uk/mapfiles/ms/micons/blue-dot.png</href>
+      </Icon>
+    </IconStyle>
+  </Style>
+  <Style id="style7">
+    <IconStyle>
+      <Icon>
+        <href>http://maps.gstatic.com/intl/en_uk/mapfiles/ms/micons/blue-dot.png</href>
+      </Icon>
+    </IconStyle>
+  </Style>
+  <Style id="style2">
+    <IconStyle>
+      <Icon>
+        <href>http://maps.gstatic.com/intl/en_uk/mapfiles/ms/micons/blue-dot.png</href>
+      </Icon>
+    </IconStyle>
+  </Style>
+  <Style id="style6">
+    <IconStyle>
+      <Icon>
+        <href>http://maps.gstatic.com/intl/en_uk/mapfiles/ms/micons/blue-dot.png</href>
+      </Icon>
+    </IconStyle>
+  </Style>
+  <Style id="style5">
+    <IconStyle>
+      <Icon>
+        <href>http://maps.gstatic.com/intl/en_uk/mapfiles/ms/micons/blue-dot.png</href>
+      </Icon>
+    </IconStyle>
+  </Style>
+  <Style id="style8">
+    <IconStyle>
+      <Icon>
+        <href>http://maps.gstatic.com/intl/en_uk/mapfiles/ms/micons/blue-dot.png</href>
+      </Icon>
+    </IconStyle>
+  </Style>
+  <Style id="style4">
+    <IconStyle>
+      <Icon>
+        <href>http://maps.gstatic.com/intl/en_uk/mapfiles/ms/micons/blue-dot.png</href>
+      </Icon>
+    </IconStyle>
+  </Style>
+  <Style id="style10">
+    <IconStyle>
+      <Icon>
+        <href>http://maps.gstatic.com/intl/en_uk/mapfiles/ms/micons/blue-dot.png</href>
+      </Icon>
+    </IconStyle>
+  </Style>
+  <Placemark>
+    <name>test_cycle_route</name>
+    <description><![CDATA[]]></description>
+    <styleUrl>#style1</styleUrl>
+    <LineString>
+      <tessellate>1</tessellate>
+      <coordinates>
+        -0.126429,51.531281,0.000000
+        -0.135183,51.535126,0.000000
+        -0.137157,51.539288,0.000000
+        -0.131493,51.544041,0.000000
+        -0.117588,51.545483,0.000000
+        -0.110893,51.540943,0.000000
+        -0.114841,51.536991,0.000000
+        -0.112610,51.534752,0.000000
+        -0.122137,51.532402,0.000000
+      </coordinates>
+    </LineString>
+  </Placemark>
+  <Placemark>
+    <name>Start</name>
+    <description><![CDATA[<div dir="ltr"><img src="http://www.urban75.org/london/images/oyster-bar-kings-cross-01.jpg" style="width:244px"></div><div dir="ltr">This is where we set off from</div>]]></description>
+    <styleUrl>#style9</styleUrl>
+    <Point>
+      <coordinates>-0.126343,51.531334,0.000000</coordinates>
+    </Point>
+  </Placemark>
+  <Placemark>
+    <name>Point 1</name>
+    <description><![CDATA[<div dir="ltr"><img src="http://london-sightseeing.net/wp-content/uploads/2010/06/regents-park-gardens-london.jpg" style="width:244px"></div><div dir="ltr">Then we pass through here...</div>]]></description>
+    <styleUrl>#style3</styleUrl>
+    <Point>
+      <coordinates>-0.135527,51.535286,0.000000</coordinates>
+    </Point>
+  </Placemark>
+  <Placemark>
+    <name>Point 2</name>
+    <description><![CDATA[<div dir="ltr"><img src="http://bebokobocamdenmarket.blog.com/files/2010/09/camden-market.jpg" style="width:244px"></div><div dir="ltr">Then we pass through here...</div>]]></description>
+    <styleUrl>#style7</styleUrl>
+    <Point>
+      <coordinates>-0.137072,51.539341,0.000000</coordinates>
+    </Point>
+  </Placemark>
+  <Placemark>
+    <name>Point 3</name>
+    <description><![CDATA[<div dir="ltr">Then we pass through here...</div>]]></description>
+    <styleUrl>#style2</styleUrl>
+    <Point>
+      <coordinates>-0.131922,51.543934,0.000000</coordinates>
+    </Point>
+  </Placemark>
+  <Placemark>
+    <name>Point 4</name>
+    <description><![CDATA[<div dir="ltr">Then we pass through here...</div>]]></description>
+    <styleUrl>#style6</styleUrl>
+    <Point>
+      <coordinates>-0.117931,51.545269,0.000000</coordinates>
+    </Point>
+  </Placemark>
+  <Placemark>
+    <name>Point 5</name>
+    <description><![CDATA[<div dir="ltr">Then we pass through here...</div>]]></description>
+    <styleUrl>#style5</styleUrl>
+    <Point>
+      <coordinates>-0.111322,51.540836,0.000000</coordinates>
+    </Point>
+  </Placemark>
+  <Placemark>
+    <name>Point 6</name>
+    <description><![CDATA[<div dir="ltr">Then we pass through here...</div>]]></description>
+    <styleUrl>#style8</styleUrl>
+    <Point>
+      <coordinates>-0.114584,51.536942,0.000000</coordinates>
+    </Point>
+  </Placemark>
+  <Placemark>
+    <name>Point 7</name>
+    <description><![CDATA[<div dir="ltr">Then we pass through here...</div>]]></description>
+    <styleUrl>#style4</styleUrl>
+    <Point>
+      <coordinates>-0.112567,51.534752,0.000000</coordinates>
+    </Point>
+  </Placemark>
+  <Placemark>
+    <name>End</name>
+    <description><![CDATA[<div dir="ltr">And finally we finish</div>]]></description>
+    <styleUrl>#style10</styleUrl>
+    <Point>
+      <coordinates>-0.122223,51.532295,0.000000</coordinates>
+    </Point>
+  </Placemark>
+</Document>
+</kml>
diff --git a/images/camden.jpg b/images/camden.jpg
diff --git a/images/holloway.jpg b/images/holloway.jpg
diff --git a/images/kentish_town.jpeg b/images/kentish_town.jpeg
diff --git a/images/scala.jpeg b/images/scala.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+<style type="text/css">
+  html { height: 100% }
+  body { height: 100%; margin: 0px; padding: 0px }
+  #map_canvas { height: 100% }
+</style>
+<script type="texxt/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+<script type="text/javascript"
+    src="http://maps.google.com/maps/api/js?sensor=false">
+</script>
+<script type="text/javascript">
+  //the shortcut on this page
+  //https://sites.google.com/site/gmapstips/export-my-map-as-kml
+  //has a neat trick for extracting raw kml from a my map
+
+
+  //idea is that we use polylines to, in steps draw a series of lat-lngs together, as described here: http://code.google.com/apis/maps/documentation/javascript/overlays.html#PolylineOptions
+  //if we define a function that times this process, it could appear like an animation
+  function initialize() {
+
+    var myLatlng = new google.maps.LatLng(51.5421410, -0.1277350);
+    var myOptions = {
+      zoom: 10,
+      center: myLatlng,
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+    }
+
+    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
+
+
+    var ctaLayer = new google.maps.KmlLayer('http://dl.dropbox.com/u/5403549/doc.kml?1');
+
+    ctaLayer.setMap(map);
+
+  }
+
+  function setMarkers(map, locations) {  
+
+    var marker_image_url = "http://google-maps-icons.googlecode.com/files/purple0"
+    var image = new google.maps.MarkerImage(marker_image_url,
+      // This marker is 20 pixels wide by 32 pixels tall.
+      new google.maps.Size(20, 32),
+      // The origin for this image is 0,0.
+      new google.maps.Point(0,0),
+      // The anchor for this image is the base of the flagpole at 0,32.
+      new google.maps.Point(0, 32));
+    var shape = {
+        coord: [1, 1, 1, 20, 18, 20, 18 , 1],
+        type: 'poly'
+    };
+
+    for (var i = 0; i < locations.length; i++) {
+      //put the right number on the marker
+      var image = marker_image_url + (i + 1) + ".png"
+      var location = locations[i];
+      var myLatLng = new google.maps.LatLng(location[1], location[2]);
+      var marker = new google.maps.Marker({
+          position: myLatLng,
+          map: map,
+          icon: image,
+          shape: shape,
+          title: location[0]
+      });
+    }
+  }
+
+
+</script>
+</head>
+<body onload="initialize()">
+  <div id="map_canvas" style="width: 700px; height:500px"></div>
+  <a href="#"><div></div></a>
+</body>
+</html>
+
+
diff --git a/test_cycle_route.kmz b/test_cycle_route.kmz
diff --git a/usa-ca-sf.kml b/usa-ca-sf.kml
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+1) GroundOverlay+Region
+2) All Regions same Lod, but different area (LatLonAltBox)
+3) Fade extents on min and max end of visibility range
+-->
+<kml xmlns="http://www.opengis.net/kml/2.2">
+  <Folder>
+    <name>usa-ca-sf</name>
+    <open>1</open>
+    <GroundOverlay>
+      <name>USA</name>
+      <Region>
+        <Lod>
+          <minLodPixels>150</minLodPixels>
+          <minFadeExtent>200</minFadeExtent>
+          <maxLodPixels>1200</maxLodPixels>
+          <maxFadeExtent>200</maxFadeExtent>
+        </Lod>
+        <LatLonAltBox>
+          <north>49.88917329870536</north>
+          <south>23.94026921890727</south>
+          <east>-69.74604659554515</east>
+          <west>-125.4474990891444</west>
+        </LatLonAltBox>
+      </Region>
+      <Icon>
+        <href>pngs/usa.png</href>
+      </Icon>
+      <LatLonBox>
+        <north>49.88917329870536</north>
+        <south>23.94026921890727</south>
+        <east>-69.74604659554515</east>
+        <west>-125.4474990891444</west>
+      </LatLonBox>
+    </GroundOverlay>
+    <GroundOverlay>
+      <name>California</name>
+      <Region>
+        <Lod>
+          <minLodPixels>150</minLodPixels>
+          <minFadeExtent>200</minFadeExtent>
+          <maxLodPixels>1200</maxLodPixels>
+          <maxFadeExtent>200</maxFadeExtent>
+        </Lod>
+        <LatLonAltBox>
+          <north>42.27619551626825</north>
+          <south>31.92992770903672</south>
+          <east>-113.2181138694033</east>
+          <west>-125.0257787671715</west>
+        </LatLonAltBox>
+      </Region>
+      <Icon>
+        <href>pngs/california.png</href>
+      </Icon>
+      <LatLonBox>
+        <north>42.27619551626825</north>
+        <south>31.92992770903672</south>
+        <east>-113.2181138694033</east>
+        <west>-125.0257787671715</west>
+      </LatLonBox>
+    </GroundOverlay>
+    <GroundOverlay>
+      <name>San Francisco</name>
+      <Region>
+        <Lod>
+          <minLodPixels>150</minLodPixels>
+          <minFadeExtent>200</minFadeExtent>
+          <maxLodPixels>1200</maxLodPixels>
+          <maxFadeExtent>200</maxFadeExtent>
+        </Lod>
+        <LatLonAltBox>
+          <north>37.82053872095779</north>
+          <south>37.70316249008254</south>
+          <east>-122.3497604415885</east>
+          <west>-122.5276024676772</west>
+        </LatLonAltBox>
+      </Region>
+      <Icon>
+        <href>pngs/san-francisco.png</href>
+      </Icon>
+      <LatLonBox>
+        <north>37.82053872095779</north>
+        <south>37.70316249008254</south>
+        <east>-122.3497604415885</east>
+        <west>-122.5276024676772</west>
+      </LatLonBox>
+    </GroundOverlay>
+  </Folder>
+</kml>