Example for cross-origin xml

2012-03-04 12:43:15 +00:00
parent 6d5544ca96
commit e267c3a53d
2 changed files with 57 additions and 0 deletions
--- a/examples/cross-origin-xml.html
+++ b/examples/cross-origin-xml.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Script Protocol XML Example</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <script src="../lib/OpenLayers.js"></script>
+    </head>
+    <body>
+        <h1 id="title">Script Protocol With XML</h1>
+        <div id="tags">
+            protocol, script, cross origin, xml, advanced
+        </div>
+        <p id="shortdesc">
+            Demonstrates how, with a custom parseFeatures method, the script protocol can be used with YQL for cross-origin loading of files in any of the XML formats supported by OpenLayers.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>
+                YQL can wrap a jsonp callback around an XML file, which effectively means Yahoo's servers are acting as a proxy for cross-origin feature loading. This example uses a GPX file, but the same technique can be used for other formats such as KML.
+            </p>
+            <p>
+                View the <a href="cross-origin-xml.js" target="_blank">cross-origin-xml.js</a>
+                source to see how this is done
+            </p>
+        </div>
+        <script src="cross-origin-xml.js"></script>
+    </body>
+</html>
--- a/examples/cross-origin-xml.js
+++ b/examples/cross-origin-xml.js
@@ -0,0 +1,25 @@
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [
+        new OpenLayers.Layer.OSM(),
+        new OpenLayers.Layer.Vector("Vectors", {
+            projection: new OpenLayers.Projection("EPSG:4326"),
+            strategies: [new OpenLayers.Strategy.Fixed()],
+            protocol: new OpenLayers.Protocol.Script({
+                url: "http://query.yahooapis.com/v1/public/yql",
+                params: {
+                    q: "select * from xml where url='http://www.topografix.com/fells_loop.gpx'"
+                },
+                format: new OpenLayers.Format.GPX(),
+                parseFeatures: function(data) {
+                    return this.format.read(data.results[0]);
+                }
+            }),
+            eventListeners: {
+                "featuresadded": function () {
+                    this.map.zoomToExtent(this.getDataExtent());
+                }
+            }
+        })
+    ]
+});