diff --git a/examples/custom-controls.js b/examples/custom-controls.js index 587e1fd944..5596b6b36e 100644 --- a/examples/custom-controls.js +++ b/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 { - const options = opt_options || {}; + constructor(opt_options) { + const options = opt_options || {}; - const button = document.createElement('button'); - button.innerHTML = 'N'; + const button = document.createElement('button'); + button.innerHTML = 'N'; - const this_ = this; - const handleRotateNorth = function() { - this_.getMap().getView().setRotation(0); - }; + const element = document.createElement('div'); + element.className = 'rotate-north ol-unselectable ol-control'; + element.appendChild(button); - button.addEventListener('click', handleRotateNorth, false); - button.addEventListener('touchstart', handleRotateNorth, false); + super({ + element: element, + target: options.target + }); - const element = document.createElement('div'); - element.className = 'rotate-north ol-unselectable ol-control'; - element.appendChild(button); + button.addEventListener('click', this.handleRotateNorth.bind(this), false); + } - Control.call(this, { - element: element, - target: options.target - }); + handleRotateNorth() { + this.getMap().getView().setRotation(0); + } -}; -inherits(app.RotateNorthControl, Control); +} // @@ -62,7 +53,7 @@ const map = new Map({ collapsible: false } }).extend([ - new app.RotateNorthControl() + new RotateNorthControl() ]), layers: [ new TileLayer({ diff --git a/examples/custom-interactions.js b/examples/custom-interactions.js index 40a0f1ed51..7f146d6823 100644 --- a/examples/custom-interactions.js +++ b/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,58 +8,51 @@ 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() { + super({ + handleDownEvent: handleDownEvent, + handleDragEvent: handleDragEvent, + handleMoveEvent: handleMoveEvent, + handleUpEvent: handleUpEvent + }); - PointerInteraction.call(this, { - handleDownEvent: app.Drag.prototype.handleDownEvent, - handleDragEvent: app.Drag.prototype.handleDragEvent, - handleMoveEvent: app.Drag.prototype.handleMoveEvent, - handleUpEvent: app.Drag.prototype.handleUpEvent - }); + /** + * @type {module:ol/pixel~Pixel} + * @private + */ + this.coordinate_ = null; - /** - * @type {module:ol/pixel~Pixel} - * @private - */ - this.coordinate_ = null; + /** + * @type {string|undefined} + * @private + */ + this.cursor_ = 'pointer'; - /** - * @type {string|undefined} - * @private - */ - this.cursor_ = 'pointer'; + /** + * @type {module:ol/Feature~Feature} + * @private + */ + this.feature_ = null; - /** - * @type {module:ol/Feature~Feature} - * @private - */ - this.feature_ = null; - - /** - * @type {string|undefined} - * @private - */ - this.previousCursor_ = undefined; - -}; -inherits(app.Drag, PointerInteraction); + /** + * @type {string|undefined} + * @private + */ + this.previousCursor_ = undefined; + } +} /** * @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({