From 892088ffac527a599acc8c9928ecafa8e2ae4248 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Wed, 17 Jul 2013 11:39:57 +0200 Subject: [PATCH] Updating examples to use the new API --- examples/gml.js | 23 +---- examples/gpx.js | 23 +---- examples/kml-timezones.js | 22 +---- examples/kml.js | 28 +----- examples/style-rules.js | 203 +++++++++++++++++++------------------- examples/vector-layer.js | 23 +---- 6 files changed, 114 insertions(+), 208 deletions(-) diff --git a/examples/gml.js b/examples/gml.js index b61d50a199..373028937d 100644 --- a/examples/gml.js +++ b/examples/gml.js @@ -4,7 +4,6 @@ goog.require('ol.View2D'); goog.require('ol.layer.TileLayer'); goog.require('ol.layer.Vector'); goog.require('ol.parser.ogc.GML_v3'); -goog.require('ol.proj'); goog.require('ol.source.MapQuestOpenAerial'); goog.require('ol.source.Vector'); goog.require('ol.style.Polygon'); @@ -17,7 +16,8 @@ var raster = new ol.layer.TileLayer({ var vector = new ol.layer.Vector({ source: new ol.source.Vector({ - projection: ol.proj.get('EPSG:4326') + parser: new ol.parser.ogc.GML_v3({axisOrientation: 'neu'}), + url: 'data/gml/topp-states-wfs.xml' }), style: new ol.style.Style({rules: [ new ol.style.Rule({ @@ -39,22 +39,3 @@ var map = new ol.Map({ zoom: 4 }) }); - -var gml = new ol.parser.ogc.GML_v3({axisOrientation: 'neu'}); - -var url = 'data/gml/topp-states-wfs.xml'; -var xhr = new XMLHttpRequest(); -xhr.open('GET', url, true); - - -/** - * onload handler for the XHR request. - */ -xhr.onload = function() { - if (xhr.status == 200) { - // this is silly to have to tell the layer the destination projection - var projection = map.getView().getProjection(); - vector.parseFeatures(xhr.responseText, gml, projection); - } -}; -xhr.send(); diff --git a/examples/gpx.js b/examples/gpx.js index d709cdfcc0..44e307effb 100644 --- a/examples/gpx.js +++ b/examples/gpx.js @@ -4,7 +4,6 @@ goog.require('ol.View2D'); goog.require('ol.layer.TileLayer'); goog.require('ol.layer.Vector'); goog.require('ol.parser.GPX'); -goog.require('ol.proj'); goog.require('ol.source.OSM'); goog.require('ol.source.Vector'); @@ -14,7 +13,8 @@ var raster = new ol.layer.TileLayer({ var vector = new ol.layer.Vector({ source: new ol.source.Vector({ - projection: ol.proj.get('EPSG:4326') + parser: new ol.parser.GPX(), + url: 'data/gpx/yahoo.xml' }), transformFeatureInfo: function(features) { var info = []; @@ -44,22 +44,3 @@ map.on(['click', 'mousemove'], function(evt) { } }); }); - -var gpx = new ol.parser.GPX(); - -var url = 'data/gpx/yahoo.xml'; -var xhr = new XMLHttpRequest(); -xhr.open('GET', url, true); - - -/** - * onload handler for the XHR request. - */ -xhr.onload = function() { - if (xhr.status == 200) { - // this is silly to have to tell the layer the destination projection - var projection = map.getView().getProjection(); - vector.parseFeatures(xhr.responseText, gpx, projection); - } -}; -xhr.send(); diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js index 7c5db6b48c..ff4209d03a 100644 --- a/examples/kml-timezones.js +++ b/examples/kml-timezones.js @@ -5,7 +5,6 @@ goog.require('ol.expr'); goog.require('ol.layer.TileLayer'); goog.require('ol.layer.Vector'); goog.require('ol.parser.KML'); -goog.require('ol.proj'); goog.require('ol.source.Stamen'); goog.require('ol.source.Vector'); goog.require('ol.style.Polygon'); @@ -55,7 +54,8 @@ var style = new ol.style.Style({rules: [ var vector = new ol.layer.Vector({ source: new ol.source.Vector({ - projection: ol.proj.get('EPSG:4326') + parser: new ol.parser.KML({dimension: 2}), + url: 'data/kml/timezones.kml' }), style: style }); @@ -103,21 +103,3 @@ map.on(['click', 'mousemove'], function(evt) { } }); }); - -var kml = new ol.parser.KML({dimension: 2}); - -var url = 'data/kml/timezones.kml'; -var xhr = new XMLHttpRequest(); -xhr.open('GET', url, true); - - -/** - * onload handler for the XHR request. - */ -xhr.onload = function() { - if (xhr.status == 200) { - var projection = map.getView().getProjection(); - vector.parseFeatures(xhr.responseText, kml, projection); - } -}; -xhr.send(); diff --git a/examples/kml.js b/examples/kml.js index 885ab94ff0..098e7f5554 100644 --- a/examples/kml.js +++ b/examples/kml.js @@ -20,11 +20,12 @@ var raster = new ol.layer.TileLayer({ }) }); -var epsg4326 = ol.proj.get('EPSG:4326'); - var vector = new ol.layer.Vector({ source: new ol.source.Vector({ - projection: epsg4326 + parser: new ol.parser.KML({ + maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true + }), + url: 'data/kml/lines.kml' }), transformFeatureInfo: function(features) { var info = []; @@ -40,15 +41,12 @@ var map = new ol.Map({ renderer: ol.RendererHint.CANVAS, target: 'map', view: new ol.View2D({ - projection: epsg4326, + projection: ol.proj.get('EPSG:4326'), center: [-112.169, 36.099], zoom: 11 }) }); -var kml = new ol.parser.KML({ - maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true}); - map.on(['click', 'mousemove'], function(evt) { map.getFeatureInfo({ pixel: evt.getPixel(), @@ -58,19 +56,3 @@ map.on(['click', 'mousemove'], function(evt) { } }); }); - -var url = 'data/kml/lines.kml'; -var xhr = new XMLHttpRequest(); -xhr.open('GET', url, true); - - -/** - * onload handler for the XHR request. - */ -xhr.onload = function() { - if (xhr.status == 200) { - // this is silly to have to tell the layer the destination projection - vector.parseFeatures(xhr.responseText, kml, epsg4326); - } -}; -xhr.send(); diff --git a/examples/style-rules.js b/examples/style-rules.js index eafea47bd7..6e98f675ec 100644 --- a/examples/style-rules.js +++ b/examples/style-rules.js @@ -60,112 +60,111 @@ var style = new ol.style.Style({rules: [ var vector = new ol.layer.Vector({ style: style, source: new ol.source.Vector({ + data: { + 'type': 'FeatureCollection', + 'features': [{ + 'type': 'Feature', + 'properties': { + 'color': '#BADA55', + 'where': 'inner' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[-10000000, -10000000], [10000000, 10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'color': '#BADA55', + 'where': 'inner' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[-10000000, 10000000], [10000000, -10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'color': '#013', + 'where': 'outer' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[-10000000, -10000000], [-10000000, 10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'color': '#013', + 'where': 'outer' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[-10000000, 10000000], [10000000, 10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'color': '#013', + 'where': 'outer' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[10000000, 10000000], [10000000, -10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'color': '#013', + 'where': 'outer' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[10000000, -10000000], [-10000000, -10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'label': 'South' + }, + 'geometry': { + 'type': 'Point', + 'coordinates': [0, -6000000] + } + }, { + 'type': 'Feature', + 'properties': { + 'label': 'West' + }, + 'geometry': { + 'type': 'Point', + 'coordinates': [-6000000, 0] + } + }, { + 'type': 'Feature', + 'properties': { + 'label': 'North' + }, + 'geometry': { + 'type': 'Point', + 'coordinates': [0, 6000000] + } + }, { + 'type': 'Feature', + 'properties': { + 'label': 'East' + }, + 'geometry': { + 'type': 'Point', + 'coordinates': [6000000, 0] + } + }] + }, + parser: new ol.parser.GeoJSON(), projection: ol.proj.get('EPSG:3857') }) }); -vector.parseFeatures({ - 'type': 'FeatureCollection', - 'features': [{ - 'type': 'Feature', - 'properties': { - 'color': '#BADA55', - 'where': 'inner' - }, - 'geometry': { - 'type': 'LineString', - 'coordinates': [[-10000000, -10000000], [10000000, 10000000]] - } - }, { - 'type': 'Feature', - 'properties': { - 'color': '#BADA55', - 'where': 'inner' - }, - 'geometry': { - 'type': 'LineString', - 'coordinates': [[-10000000, 10000000], [10000000, -10000000]] - } - }, { - 'type': 'Feature', - 'properties': { - 'color': '#013', - 'where': 'outer' - }, - 'geometry': { - 'type': 'LineString', - 'coordinates': [[-10000000, -10000000], [-10000000, 10000000]] - } - }, { - 'type': 'Feature', - 'properties': { - 'color': '#013', - 'where': 'outer' - }, - 'geometry': { - 'type': 'LineString', - 'coordinates': [[-10000000, 10000000], [10000000, 10000000]] - } - }, { - 'type': 'Feature', - 'properties': { - 'color': '#013', - 'where': 'outer' - }, - 'geometry': { - 'type': 'LineString', - 'coordinates': [[10000000, 10000000], [10000000, -10000000]] - } - }, { - 'type': 'Feature', - 'properties': { - 'color': '#013', - 'where': 'outer' - }, - 'geometry': { - 'type': 'LineString', - 'coordinates': [[10000000, -10000000], [-10000000, -10000000]] - } - }, { - 'type': 'Feature', - 'properties': { - 'label': 'South' - }, - 'geometry': { - 'type': 'Point', - 'coordinates': [0, -6000000] - } - }, { - 'type': 'Feature', - 'properties': { - 'label': 'West' - }, - 'geometry': { - 'type': 'Point', - 'coordinates': [-6000000, 0] - } - }, { - 'type': 'Feature', - 'properties': { - 'label': 'North' - }, - 'geometry': { - 'type': 'Point', - 'coordinates': [0, 6000000] - } - }, { - 'type': 'Feature', - 'properties': { - 'label': 'East' - }, - 'geometry': { - 'type': 'Point', - 'coordinates': [6000000, 0] - } - }] -}, new ol.parser.GeoJSON(), ol.proj.get('EPSG:3857')); - - var map = new ol.Map({ layers: [vector], controls: ol.control.defaults({ diff --git a/examples/vector-layer.js b/examples/vector-layer.js index 05774f56f5..23b8f9e4ee 100644 --- a/examples/vector-layer.js +++ b/examples/vector-layer.js @@ -5,7 +5,6 @@ goog.require('ol.expr'); goog.require('ol.layer.TileLayer'); goog.require('ol.layer.Vector'); goog.require('ol.parser.GeoJSON'); -goog.require('ol.proj'); goog.require('ol.source.MapQuestOpenAerial'); goog.require('ol.source.Vector'); goog.require('ol.style.Polygon'); @@ -25,7 +24,8 @@ ol.expr.register('resolution', function() { var vector = new ol.layer.Vector({ source: new ol.source.Vector({ - projection: ol.proj.get('EPSG:4326') + parser: new ol.parser.GeoJSON(), + url: 'data/countries.geojson' }), style: new ol.style.Style({rules: [ new ol.style.Rule({ @@ -72,22 +72,3 @@ map.on(['click', 'mousemove'], function(evt) { } }); }); - - -var geojson = new ol.parser.GeoJSON(); -var url = 'data/countries.geojson'; -var xhr = new XMLHttpRequest(); -xhr.open('GET', url, true); - - -/** - * onload handler for the XHR request. - */ -xhr.onload = function() { - if (xhr.status == 200) { - // this is silly to have to tell the layer the destination projection - var projection = map.getView().getProjection(); - vector.parseFeatures(xhr.responseText, geojson, projection); - } -}; -xhr.send();