[OpenLayers-Commits] r10875 - trunk/openlayers/examples

Fri Nov 5 17:56:24 EDT 2010

Author: tschaub
Date: 2010-11-05 14:56:24 -0700 (Fri, 05 Nov 2010)
New Revision: 10875

Added:
   trunk/openlayers/examples/kml-layer.js
Modified:
   trunk/openlayers/examples/kml-layer.html
Log:
Update KML layer example.

Modified: trunk/openlayers/examples/kml-layer.html
===================================================================

--- trunk/openlayers/examples/kml-layer.html	2010-11-05 14:14:28 UTC (rev 10874)
+++ trunk/openlayers/examples/kml-layer.html	2010-11-05 21:56:24 UTC (rev 10875)
@@ -1,45 +1,33 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <link rel="stylesheet" href="style.css" type="text/css" />
-    <script src="../lib/OpenLayers.js"></script>
-    <script type="text/javascript">
-        var lon = 5;
-        var lat = 40;
-        var zoom = 5;
-        var map, layer;
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+    </head>
+    <body>
+    <h1 id="title">KML Layer Example</h1>
 
-        function init(){
-            map = new OpenLayers.Map('map');
-            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                    "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
-            map.addLayer(layer);
-            map.addLayer(new OpenLayers.Layer.GML("KML", "kml/lines.kml", 
-               {
-                format: OpenLayers.Format.KML, 
-                formatOptions: {
-                  extractStyles: true, 
-                  extractAttributes: true,
-                  maxDepth: 2
-                }
-               }));
-            map.zoomToExtent(new OpenLayers.Bounds(-112.306698,36.017792,-112.03204,36.18087));
-        }
-    </script>
-  </head>
-  <body onload="init()">
-      <h1 id="title">KML Layer Example</h1>
+    <div id="tags">KML</div>
 
-      <div id="tags">
-        KML
-      </div>
-
-      <p id="shortdesc">
-          Demonstrates loading and displaying a KML file on top of a basemap.
+    <p id="shortdesc">
+        Demonstrates loading and displaying a KML file on top of a basemap.
     </p>
 
     <div id="map" class="smallmap"></div>
 
-    <div id="docs"></div>
-  </body>
+    <div id="docs">
+        <p>
+            A vector layer can be populated with features from a KML document
+            by configuring the layer with an HTTP protocol that points to the 
+            KML document and is configured with a KML format for parsing features.
+            The fixed strategy is used to load all features at once.
+        </p>
+        <p>
+            View the <a href="kml-layer.js" target="_blank">kml-layer.js</a>
+            source to see how this is done.
+        </p>
+    </div>
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="kml-layer.js"></script>
+    </body>
 </html>

Added: trunk/openlayers/examples/kml-layer.js
===================================================================
--- trunk/openlayers/examples/kml-layer.js	                        (rev 0)
+++ trunk/openlayers/examples/kml-layer.js	2010-11-05 21:56:24 UTC (rev 10875)
@@ -0,0 +1,22 @@
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [
+        new OpenLayers.Layer.WMS(
+            "WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",
+            {layers: "basic"}
+        ),
+        new OpenLayers.Layer.Vector("KML", {
+            strategies: [new OpenLayers.Strategy.Fixed()],
+            protocol: new OpenLayers.Protocol.HTTP({
+                url: "kml/lines.kml",
+                format: new OpenLayers.Format.KML({
+                    extractStyles: true, 
+                    extractAttributes: true,
+                    maxDepth: 2
+                })
+            })
+        })
+    ],
+    center: new OpenLayers.LonLat(-112.169, 36.099),
+    zoom: 11
+});

