Use es6 class inheritance in examples

Instead of using the deprecated `inherits` function.

examples/custom-controls.js

@@ -1,4 +1,3 @@
-import {inherits} from '../src/ol/util.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls, Control} from '../src/ol/control.js';
@@ -6,13 +5,6 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
 
-/**
- * Define a namespace for the application.
- */
-window.app = {};
-const app = window.app;
-
-
 //
 // Define rotate to north control.
 //
@@ -23,32 +15,31 @@ const app = window.app;
  * @extends {module:ol/control/Control~Control}
  * @param {Object=} opt_options Control options.
  */
-app.RotateNorthControl = function(opt_options) {
+class RotateNorthControl extends Control {
 
+  constructor(opt_options) {
     const options = opt_options || {};
 
     const button = document.createElement('button');
     button.innerHTML = 'N';
 
-  const this_ = this;
-  const handleRotateNorth = function() {
-    this_.getMap().getView().setRotation(0);
-  };
-
-  button.addEventListener('click', handleRotateNorth, false);
-  button.addEventListener('touchstart', handleRotateNorth, false);
-
     const element = document.createElement('div');
     element.className = 'rotate-north ol-unselectable ol-control';
     element.appendChild(button);
 
-  Control.call(this, {
+    super({
       element: element,
       target: options.target
     });
 
-};
+    button.addEventListener('click', this.handleRotateNorth.bind(this), false);
-inherits(app.RotateNorthControl, Control);
+  }
+
+  handleRotateNorth() {
+    this.getMap().getView().setRotation(0);
+  }
+
+}
 
 
 //
@@ -62,7 +53,7 @@ const map = new Map({
       collapsible: false
     }
   }).extend([
-    new app.RotateNorthControl()
+    new RotateNorthControl()
   ]),
   layers: [
     new TileLayer({

examples/custom-interactions.js

@@ -1,4 +1,3 @@
-import {inherits} from '../src/ol/util.js';
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
@@ -9,23 +8,17 @@ import {TileJSON, Vector as VectorSource} from '../src/ol/source.js';
 import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 
 
-/**
- * Define a namespace for the application.
- */
-const app = {};
-
-
 /**
  * @constructor
  * @extends {module:ol/interaction/Pointer}
  */
-app.Drag = function() {
+class Drag extends PointerInteraction {
-
+  constructor() {
-  PointerInteraction.call(this, {
+    super({
-    handleDownEvent: app.Drag.prototype.handleDownEvent,
+      handleDownEvent: handleDownEvent,
-    handleDragEvent: app.Drag.prototype.handleDragEvent,
+      handleDragEvent: handleDragEvent,
-    handleMoveEvent: app.Drag.prototype.handleMoveEvent,
+      handleMoveEvent: handleMoveEvent,
-    handleUpEvent: app.Drag.prototype.handleUpEvent
+      handleUpEvent: handleUpEvent
     });
 
     /**
@@ -51,16 +44,15 @@ app.Drag = function() {
      * @private
      */
     this.previousCursor_ = undefined;
-
+  }
-};
+}
-inherits(app.Drag, PointerInteraction);
 
 
 /**
  * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Map browser event.
  * @return {boolean} `true` to start the drag sequence.
  */
-app.Drag.prototype.handleDownEvent = function(evt) {
+function handleDownEvent(evt) {
   const map = evt.map;
 
   const feature = map.forEachFeatureAtPixel(evt.pixel,
@@ -74,13 +66,13 @@ app.Drag.prototype.handleDownEvent = function(evt) {
   }
 
   return !!feature;
-};
+}
 
 
 /**
  * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Map browser event.
  */
-app.Drag.prototype.handleDragEvent = function(evt) {
+function handleDragEvent(evt) {
   const deltaX = evt.coordinate[0] - this.coordinate_[0];
   const deltaY = evt.coordinate[1] - this.coordinate_[1];
 
@@ -89,13 +81,13 @@ app.Drag.prototype.handleDragEvent = function(evt) {
 
   this.coordinate_[0] = evt.coordinate[0];
   this.coordinate_[1] = evt.coordinate[1];
-};
+}
 
 
 /**
  * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Event.
  */
-app.Drag.prototype.handleMoveEvent = function(evt) {
+function handleMoveEvent(evt) {
   if (this.cursor_) {
     const map = evt.map;
     const feature = map.forEachFeatureAtPixel(evt.pixel,
@@ -113,17 +105,17 @@ app.Drag.prototype.handleMoveEvent = function(evt) {
       this.previousCursor_ = undefined;
     }
   }
-};
+}
 
 
 /**
  * @return {boolean} `false` to stop the drag sequence.
  */
-app.Drag.prototype.handleUpEvent = function() {
+function handleUpEvent() {
   this.coordinate_ = null;
   this.feature_ = null;
   return false;
-};
+}
 
 
 const pointFeature = new Feature(new Point([0, 0]));
@@ -137,7 +129,7 @@ const polygonFeature = new Feature(
 
 
 const map = new Map({
-  interactions: defaultInteractions().extend([new app.Drag()]),
+  interactions: defaultInteractions().extend([new Drag()]),
   layers: [
     new TileLayer({
       source: new TileJSON({