From d42de41af33a4b9b13a7f69121eb3e31dc59819e Mon Sep 17 00:00:00 2001
From: Marc Jansen <jansen@terrestris.de>
Date: Tue, 20 Mar 2018 15:06:28 +0100
Subject: [PATCH 1/2] Add an example showing Chaikins smoothing algorithm

---
 examples/chaikin.html | 26 +++++++++++++++
 examples/chaikin.js   | 74 +++++++++++++++++++++++++++++++++++++++++++
 package.json          |  1 +
 3 files changed, 101 insertions(+)
 create mode 100644 examples/chaikin.html
 create mode 100644 examples/chaikin.js

diff --git a/examples/chaikin.html b/examples/chaikin.html
new file mode 100644
index 0000000000..cdcc94b60e
--- /dev/null
+++ b/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>
diff --git a/examples/chaikin.js b/examples/chaikin.js
new file mode 100644
index 0000000000..4d5f49f528
--- /dev/null
+++ b/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();
diff --git a/package.json b/package.json
index 0cc4b0e0a0..29fcfc5ab9 100644
--- a/package.json
+++ b/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",

From 1f0e9abfdd9fc2a10e8de1ffb166a7cb9c3ed424 Mon Sep 17 00:00:00 2001
From: Marc Jansen <jansen@terrestris.de>
Date: Thu, 29 Mar 2018 08:34:29 +0200
Subject: [PATCH 2/2] Simplify example

---
 examples/chaikin.html |  8 +-------
 examples/chaikin.js   | 46 +++++++++++++------------------------------
 2 files changed, 15 insertions(+), 39 deletions(-)

diff --git a/examples/chaikin.html b/examples/chaikin.html
index cdcc94b60e..1a07bb2bd0 100644
--- a/examples/chaikin.html
+++ b/examples/chaikin.html
@@ -3,7 +3,7 @@ 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 
+  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.
 
@@ -13,12 +13,6 @@ 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>
diff --git a/examples/chaikin.js b/examples/chaikin.js
index 4d5f49f528..e155020356 100644
--- a/examples/chaikin.js
+++ b/examples/chaikin.js
@@ -36,39 +36,21 @@ const map = new Map({
   })
 });
 
-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);
-      }
-    });
+const draw = new Draw({
+  source: vectorSource,
+  type: 'LineString'
+});
+map.addInteraction(draw);
+draw.on('drawend', function(event) {
+  if (!shallSmoothen.checked) {
+    return;
   }
-}
-
-/**
- * Handle change event.
- */
-typeSelect.onchange = function() {
-  map.removeInteraction(draw);
-  addInteraction();
-};
-
-addInteraction();
+  const feat = event.feature;
+  const geometry = feat.getGeometry();
+  const coords = geometry.getCoordinates();
+  const smoothened = makeSmooth(coords, parseInt(numIterations.value, 10) || 5);
+  geometry.setCoordinates(smoothened);
+});