Updating examples to use the new API

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();

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();

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();

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();

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({

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();