Merge pull request #7127 from ahocevar/street-labels-geojson

Use static GeoJSON instead of Overpass query for faster loading

examples/street-labels.html

@@ -3,10 +3,10 @@ layout: example.html
 title: Street Labels
 shortdesc: Render street names with a custom render.
 docs: >
-  Example showing the use of a custom renderer to render text along a path. [Labelgun](https://github.com/Geovation/labelgun) is used to avoid label collisions. [label-segment](https://github.com/ahocevar/label-segment) makes sure that labels are placed on suitable street segments. [textpath](https://github.com/ahocevar/textpath) arranges the letters of a label along the geometry. The data is fetched from OSM using the [Overpass API](https://overpass-api.de).
+  Example showing the use of a custom renderer to render text along a path. [Labelgun](https://github.com/Geovation/labelgun) is used to avoid label collisions. [label-segment](https://github.com/ahocevar/label-segment) makes sure that labels are placed on suitable street segments. [textpath](https://github.com/ahocevar/textpath) arranges the letters of a label along the geometry.
-tags: "vector, label, collision detection, labelgun, linelabel, overpass"
+tags: "vector, label, collision detection, labelgun, linelabel"
 resources:
-  - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
+  - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set
   - https://unpkg.com/rbush@2.0.1/rbush.min.js
   - https://unpkg.com/labelgun@0.1.1/lib/labelgun.min.js
   - https://unpkg.com/textpath@1.0.1/dist/textpath.js

examples/street-labels.js

@@ -3,7 +3,7 @@
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.extent');
-goog.require('ol.format.OSMXML');
+goog.require('ol.format.GeoJSON');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.BingMaps');
@@ -25,8 +25,8 @@ function collectDrawData(letter, x, y, angle) {
 }
 
 var style = new ol.style.Style({
-  renderer: function(coords, context) {
+  renderer: function(coords, state) {
-    var feature = context.feature;
+    var feature = state.feature;
     var text = feature.get('name');
     // Only create label when geometry has a long and straight segment
     var path = labelSegment(coords, Math.PI / 8, measureText(text));
@@ -51,22 +51,11 @@ var rasterLayer = new ol.layer.Tile({
   })
 });
 
-var source = new ol.source.Vector();
-// Request streets from OSM, using the Overpass API
-fetch('https://overpass-api.de/api/interpreter', {
-  method: 'POST',
-  body: '(way["highway"](48.19642,16.32580,48.22050,16.41986));(._;>;);out meta;'
-}).then(function(response) {
-  return response.text();
-}).then(function(responseText) {
-  var features = new ol.format.OSMXML().readFeatures(responseText, {
-    featureProjection: 'EPSG:3857'
-  });
-  source.addFeatures(features);
-});
-
 var vectorLayer = new ol.layer.Vector({
-  source: source,
+  source: new ol.source.Vector({
+    format: new ol.format.GeoJSON(),
+    url: 'data/geojson/vienna-streets.geojson'
+  }),
   style: function(feature) {
     if (feature.getGeometry().getType() == 'LineString' && feature.get('name')) {
       return style;