From e267c3a53d0f6698610e7f09fd3ddbb3b5569b10 Mon Sep 17 00:00:00 2001 From: Peter Robins Date: Sun, 4 Mar 2012 12:43:15 +0000 Subject: [PATCH] Example for cross-origin xml --- examples/cross-origin-xml.html | 32 ++++++++++++++++++++++++++++++++ examples/cross-origin-xml.js | 25 +++++++++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 examples/cross-origin-xml.html create mode 100644 examples/cross-origin-xml.js diff --git a/examples/cross-origin-xml.html b/examples/cross-origin-xml.html new file mode 100644 index 0000000000..b811bf72c1 --- /dev/null +++ b/examples/cross-origin-xml.html @@ -0,0 +1,32 @@ + + + + OpenLayers Script Protocol XML Example + + + + + + + + +

Script Protocol With XML

+
+ protocol, script, cross origin, xml, advanced +
+

+ 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. +

+
+
+

+ 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. +

+

+ View the cross-origin-xml.js + source to see how this is done +

+
+ + + diff --git a/examples/cross-origin-xml.js b/examples/cross-origin-xml.js new file mode 100644 index 0000000000..a97cc1fdb6 --- /dev/null +++ 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()); + } + } + }) + ] +});