Load features on demand in vector-osm example

examples/vector-osm.html

@@ -32,11 +32,11 @@
 
         <div class="span4">
           <h4 id="title">OSM XML example</h4>
-          <p id="shortdesc">Example of using the OSM XML source.</p>
+          <p id="shortdesc">Example of using the OSM XML source.  Vector data is loaded dynamically from a remote server using a tiling strategy.</p>
           <div id="docs">
             <p>See the <a href="vector-osm.js" target="_blank">vector-osm.js source</a> to see how this is done.</p>
           </div>
-          <div id="tags">vector, osm, xml</div>
+          <div id="tags">vector, osm, xml, loading, remote</div>
         </div>
         <div class="span4 offset4">
           <div id="info" class="alert alert-success">

examples/vector-osm.js

@@ -1,13 +1,17 @@
 goog.require('ol.Map');
 goog.require('ol.View2D');
+goog.require('ol.format.OSMXML');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
+goog.require('ol.loading');
+goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
-goog.require('ol.source.OSMXML');
+goog.require('ol.source.RemoteVector');
 goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
+goog.require('ol.tilegrid.XYZ');
 
 var styles = {
   'amenity': {
@@ -83,9 +87,18 @@ var styles = {
   }
 };
 
-var vectorSource = new ol.source.OSMXML({
-  projection: 'EPSG:3857',
-  url: 'data/osm/map.osm'
+var epsg3857ToEPSG4326 = ol.proj.getTransform('EPSG:3857', 'EPSG:4326');
+var vectorSource = new ol.source.RemoteVector({
+  extentUrlFunction: function(extent, resolution) {
+    var epsg4326Extent = epsg3857ToEPSG4326(extent, []);
+    return 'http://overpass-api.de/api/xapi?map?bbox=' +
+        epsg4326Extent.join(',');
+  },
+  format: new ol.format.OSMXML(),
+  loadingFunction: ol.loading.createTile(new ol.tilegrid.XYZ({
+    maxZoom: 19
+  })),
+  projection: 'EPSG:3857'
 });
 
 var vector = new ol.layer.Vector({
@@ -117,6 +130,7 @@ var map = new ol.Map({
   target: document.getElementById('map'),
   view: new ol.View2D({
     center: [739218, 5906096],
+    maxZoom: 19,
     zoom: 17
   })
 });