Use the placement: 'line' property in the street-labels example

This makes the code of the example much simpler.

examples/street-labels.html

@@ -3,14 +3,8 @@ 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.
-tags: "vector, label, collision detection, labelgun, linelabel"
-resources:
-  - 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
-  - https://unpkg.com/label-segment@1.0.0/dist/label-segment.js
+  Example showing the use of a text style with `placement: 'line'` to render text along a path.
+tags: "vector, label, streets"
 cloak:
   As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---

examples/street-labels.js

@@ -1,5 +1,3 @@
-// NOCOMPILE
-/* global labelgun, labelSegment, textPath */
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.extent');
@@ -8,64 +6,37 @@ goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.BingMaps');
 goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Style');
-
-var emptyFn = function() {};
-var labelEngine = new labelgun['default'](emptyFn, emptyFn);
-
-var context, pixelRatio; // Will be set in the map's postcompose listener
-function measureText(text) {
-  return context.measureText(text).width * pixelRatio;
-}
-
-var extent, letters; // Will be set in the style's renderer function
-function collectDrawData(letter, x, y, angle) {
-  ol.extent.extend(extent, [x, y, x, y]);
-  letters.push([x, y, angle, letter]);
-}
+goog.require('ol.style.Text');
 
 var style = new ol.style.Style({
-  renderer: function(coords, state) {
-    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));
-    if (path) {
-      extent = ol.extent.createEmpty();
-      letters = [];
-      textPath(text, path, measureText, collectDrawData);
-      ol.extent.buffer(extent, 5 * pixelRatio, extent);
-      var bounds = {
-        bottomLeft: ol.extent.getBottomLeft(extent),
-        topRight: ol.extent.getTopRight(extent)
-      };
-      labelEngine.ingestLabel(bounds, feature.getId(), 1, letters, text, false);
-    }
-  }
-});
-
-var rasterLayer = new ol.layer.Tile({
-  source: new ol.source.BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'Aerial'
+  text: new ol.style.Text({
+    font: 'bold 11px "Open Sans", "Arial Unicode MS"',
+    placement: 'line',
+    fill: new ol.style.Fill({
+      color: 'white'
+    })
   })
 });
 
-var vectorLayer = new ol.layer.Vector({
-  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;
-    }
-  }
-});
-
 var viewExtent = [1817379, 6139595, 1827851, 6143616];
 var map = new ol.Map({
-  layers: [rasterLayer, vectorLayer],
+  layers: [new ol.layer.Tile({
+    source: new ol.source.BingMaps({
+      key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+      imagerySet: 'Aerial'
+    })
+  }), new ol.layer.Vector({
+    source: new ol.source.Vector({
+      format: new ol.format.GeoJSON(),
+      url: 'data/geojson/vienna-streets.geojson'
+    }),
+    style: function(feature) {
+      style.getText().setText(feature.get('name'));
+      return style;
+    }
+  })],
   target: 'map',
   view: new ol.View({
     extent: viewExtent,
@@ -74,31 +45,3 @@ var map = new ol.Map({
     minZoom: 14
   })
 });
-
-vectorLayer.on('precompose', function() {
-  labelEngine.destroy();
-});
-vectorLayer.on('postcompose', function(e) {
-  context = e.context;
-  pixelRatio = e.frameState.pixelRatio;
-  context.save();
-  context.font = 'normal 11px "Open Sans", "Arial Unicode MS"';
-  context.fillStyle = 'white';
-  context.textBaseline = 'middle';
-  context.textAlign = 'center';
-  var labels = labelEngine.getShown();
-  for (var i = 0, ii = labels.length; i < ii; ++i) {
-    // Render label letter by letter
-    var letters = labels[i].labelObject;
-    for (var j = 0, jj = letters.length; j < jj; ++j) {
-      var labelData = letters[j];
-      context.save();
-      context.translate(labelData[0], labelData[1]);
-      context.rotate(labelData[2]);
-      context.scale(pixelRatio, pixelRatio);
-      context.fillText(labelData[3], 0, 0);
-      context.restore();
-    }
-  }
-  context.restore();
-});