Add an example showing Chaikins smoothing algorithm

examples/chaikin.html

@@ -0,0 +1,26 @@
+---
+layout: example.html
+title: Smoothing lines using Chaikins algorithm
+shortdesc: This uses Chaikins algorithm to smooth drawn lines.
+docs: >
+  This example uses the npm package [`chaikin-smooth`](https://www.npmjs.com/package/chaikin-smooth) which 
+  implements [Chaikins algorithm](http://graphics.cs.ucdavis.edu/education/CAGDNotes/Chaikins-Algorithm/Chaikins-Algorithm.html)
+  to smooth drawn lines.
+
+  Start by drawing on the map. Once you finish a drawing, the feature's geometry will be smoothed
+  as configured via the form elements.
+tags: "smooth, smoothing, chaikin"
+---
+<div id="map" class="map"></div>
+<form class="form-inline">
+  <label for="type">Geometry type &nbsp;</label>
+  <select id="type">
+    <option value="LineString">LineString</option>
+    <!-- Right now the package only supports lines, not closed rings -->
+    <!-- <option value="Polygon">Polygon</option> -->
+  </select><br>
+  <label for="shall-smoothen">Smooth drawn geometry?</label>
+  <input id="shall-smoothen" type="checkbox" checked><br>
+  <label for="iterations">Number of smoothings</label>
+  <input style="width: 250px;" type="range" id="iterations" min="2" max="10" step="1" value="5">
+</form>

examples/chaikin.js

@@ -0,0 +1,74 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import Draw from '../src/ol/interaction/Draw.js';
+
+import smooth from 'chaikin-smooth';
+
+function makeSmooth(path, numIterations) {
+  numIterations = Math.min(Math.max(numIterations, 1), 10);
+  while (numIterations > 0) {
+    path = smooth(path);
+    numIterations--;
+  }
+  return path;
+}
+
+const vectorSource = new VectorSource({});
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+      opacity: 0.5
+    }),
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [1078373.5950, 6871994.5910],
+    zoom: 5
+  })
+});
+
+const typeSelect = document.getElementById('type');
+const shallSmoothen = document.getElementById('shall-smoothen');
+const numIterations = document.getElementById('iterations');
+
+let draw; // global so we can remove it later
+function addInteraction() {
+  const value = typeSelect.value;
+  if (value !== 'None') {
+    draw = new Draw({
+      source: vectorSource,
+      type: typeSelect.value
+    });
+    map.addInteraction(draw);
+    draw.on('drawend', function(event) {
+      const feat = event.feature;
+      const geometry = feat.getGeometry();
+      const isPoly = geometry.getType() === 'Polygon';
+      const isLine = geometry.getType() === 'LineString';
+      if (shallSmoothen.checked && (isPoly || isLine)) {
+        const coords = geometry.getCoordinates();
+        const smoothened = makeSmooth(isPoly ? coords[0] : coords, parseInt(numIterations.value, 10) || 5);
+        geometry.setCoordinates(isPoly ? [smoothened] : smoothened);
+      }
+    });
+  }
+}
+
+/**
+ * Handle change event.
+ */
+typeSelect.onchange = function() {
+  map.removeInteraction(draw);
+  addInteraction();
+};
+
+addInteraction();

package.json

@@ -47,6 +47,7 @@
     "babel-cli": "6.26.0",
     "babel-minify-webpack-plugin": "^0.3.0",
     "babel-plugin-jsdoc-closure": "1.3.2",
+    "chaikin-smooth": "1.0.4",
     "clean-css-cli": "4.1.11",
     "copy-webpack-plugin": "^4.0.1",
     "coveralls": "3.0.0",