ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make code prettier

Browse Source 
This updates ESLint and our shared eslint-config-openlayers to use Prettier.  Most formatting changes were automatically applied with this:

    npm run lint -- --fix

A few manual changes were required:

 * In `examples/offscreen-canvas.js`, the `//eslint-disable-line` comment needed to be moved to the appropriate line to disable the error about the `'worker-loader!./offscreen-canvas.worker.js'` import.
 * In `examples/webpack/exapmle-builder.js`, spaces could not be added after a couple `function`s for some reason.  While editing this, I reworked `ExampleBuilder` to be a class.
 * In `src/ol/format/WMSGetFeatureInfo.js`, the `// @ts-ignore` comment needed to be moved down one line so it applied to the `parsersNS` argument.
This commit is contained in:
Tim Schaub
2020-04-06 12:25:12 -06:00
parent 53b48baf62
commit 054af09032
790 changed files with 46833 additions and 33765 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/control/Attribution.js
+33 -25
View File
@@ -1,13 +1,12 @@
/**
* @module ol/control/Attribution
*/
import {equals} from '../array.js';
import Control from './Control.js';
import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_COLLAPSED} from '../css.js';
import {removeChildren, replaceNode} from '../dom.js';
import EventType from '../events/EventType.js';
import {CLASS_COLLAPSED, CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
import {equals} from '../array.js';
import {inView} from '../layer/Layer.js';
import {removeChildren, replaceNode} from '../dom.js';
/**
* @typedef {Object} Options
@@ -32,7 +31,6 @@ import {inView} from '../layer/Layer.js';
* callback.
*/
/**
* @classdesc
* Control to show all the attributions associated with the layer sources
@@ -43,18 +41,16 @@ import {inView} from '../layer/Layer.js';
* @api
*/
class Attribution extends Control {
/**
* @param {Options=} opt_options Attribution options.
*/
constructor(opt_options) {
const options = opt_options ? opt_options : {};
super({
element: document.createElement('div'),
render: options.render || render,
target: options.target
target: options.target,
});
/**
@@ -67,7 +63,8 @@ class Attribution extends Control {
* @private
* @type {boolean}
*/
this.collapsed_ = options.collapsed !== undefined ? options.collapsed : true;
this.collapsed_ =
options.collapsed !== undefined ? options.collapsed : true;
/**
* @private
@@ -79,18 +76,21 @@ class Attribution extends Control {
* @private
* @type {boolean}
*/
this.collapsible_ = options.collapsible !== undefined ?
options.collapsible : true;
this.collapsible_ =
options.collapsible !== undefined ? options.collapsible : true;
if (!this.collapsible_) {
this.collapsed_ = false;
}
const className = options.className !== undefined ? options.className : 'ol-attribution';
const className =
options.className !== undefined ? options.className : 'ol-attribution';
const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Attributions';
const tipLabel =
options.tipLabel !== undefined ? options.tipLabel : 'Attributions';
const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
const collapseLabel =
options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
if (typeof collapseLabel === 'string') {
/**
@@ -116,19 +116,27 @@ class Attribution extends Control {
this.label_ = label;
}
const activeLabel = (this.collapsible_ && !this.collapsed_) ?
this.collapseLabel_ : this.label_;
const activeLabel =
this.collapsible_ && !this.collapsed_ ? this.collapseLabel_ : this.label_;
const button = document.createElement('button');
button.setAttribute('type', 'button');
button.title = tipLabel;
button.appendChild(activeLabel);
button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false);
button.addEventListener(
EventType.CLICK,
this.handleClick_.bind(this),
false
);
const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
(this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') +
(this.collapsible_ ? '' : ' ol-uncollapsible');
const cssClasses =
className +
' ' +
CLASS_UNSELECTABLE +
' ' +
CLASS_CONTROL +
(this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') +
(this.collapsible_ ? '' : ' ol-uncollapsible');
const element = this.element;
element.className = cssClasses;
element.appendChild(this.ulElement_);
@@ -146,7 +154,6 @@ class Attribution extends Control {
* @type {boolean}
*/
this.renderedVisible_ = true;
}
/**
@@ -190,7 +197,10 @@ class Attribution extends Control {
continue;
}
if (!this.overrideCollapsible_ && source.getAttributionsCollapsible() === false) {
if (
!this.overrideCollapsible_ &&
source.getAttributionsCollapsible() === false
) {
this.setCollapsible(false);
}
@@ -320,7 +330,6 @@ class Attribution extends Control {
}
}
/**
* Update the attribution element.
* @param {import("../MapEvent.js").default} mapEvent Map event.
@@ -330,5 +339,4 @@ export function render(mapEvent) {
this.updateElement_(mapEvent.frameState);
}
export default Attribution;
src/ol/control/Control.js
+11 -16
View File
@@ -1,12 +1,11 @@
/**
* @module ol/control/Control
*/
import {VOID} from '../functions.js';
import MapEventType from '../MapEventType.js';
import BaseObject from '../Object.js';
import {removeNode} from '../dom.js';
import MapEventType from '../MapEventType.js';
import {VOID} from '../functions.js';
import {listen, unlistenByKey} from '../events.js';
import {removeNode} from '../dom.js';
/**
* @typedef {Object} Options
@@ -20,7 +19,6 @@ import {listen, unlistenByKey} from '../events.js';
* the control to be rendered outside of the map's viewport.
*/
/**
* @classdesc
* A control is a visible widget with a DOM element in a fixed position on the
@@ -46,12 +44,10 @@ import {listen, unlistenByKey} from '../events.js';
* @api
*/
class Control extends BaseObject {
/**
* @param {Options} options Control options.
*/
constructor(options) {
super();
/**
@@ -87,7 +83,6 @@ class Control extends BaseObject {
if (options.target) {
this.setTarget(options.target);
}
}
/**
@@ -124,12 +119,14 @@ class Control extends BaseObject {
this.listenerKeys.length = 0;
this.map_ = map;
if (this.map_) {
const target = this.target_ ?
this.target_ : map.getOverlayContainerStopEvent();
const target = this.target_
? this.target_
: map.getOverlayContainerStopEvent();
target.appendChild(this.element);
if (this.render !== VOID) {
this.listenerKeys.push(listen(map,
MapEventType.POSTRENDER, this.render, this));
this.listenerKeys.push(
listen(map, MapEventType.POSTRENDER, this.render, this)
);
}
map.render();
}
@@ -155,11 +152,9 @@ class Control extends BaseObject {
* @api
*/
setTarget(target) {
this.target_ = typeof target === 'string' ?
document.getElementById(target) :
target;
this.target_ =
typeof target === 'string' ? document.getElementById(target) : target;
}
}
export default Control;
src/ol/control/FullScreen.js
+42 -32
View File
@@ -2,19 +2,21 @@
* @module ol/control/FullScreen
*/
import Control from './Control.js';
import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_UNSUPPORTED} from '../css.js';
import {replaceNode} from '../dom.js';
import {listen} from '../events.js';
import EventType from '../events/EventType.js';
import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_UNSUPPORTED} from '../css.js';
import {listen} from '../events.js';
import {replaceNode} from '../dom.js';
const events = ['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'];
const events = [
'fullscreenchange',
'webkitfullscreenchange',
'MSFullscreenChange',
];
/**
* @enum {string}
*/
const FullScreenEventType = {
/**
* Triggered after the map entered fullscreen.
* @event FullScreenEventType#enterfullscreen
@@ -27,11 +29,9 @@ const FullScreenEventType = {
* @event FullScreenEventType#leavefullscreen
* @api
*/
LEAVEFULLSCREEN: 'leavefullscreen'
LEAVEFULLSCREEN: 'leavefullscreen',
};
/**
* @typedef {Object} Options
* @property {string} [className='ol-full-screen'] CSS class name.
@@ -49,7 +49,6 @@ const FullScreenEventType = {
* be displayed fullscreen.
*/
/**
* @classdesc
* Provides a button that when clicked fills up the full screen with the map.
@@ -66,25 +65,23 @@ const FullScreenEventType = {
* @api
*/
class FullScreen extends Control {
/**
* @param {Options=} opt_options Options.
*/
constructor(opt_options) {
const options = opt_options ? opt_options : {};
super({
element: document.createElement('div'),
target: options.target
target: options.target,
});
/**
* @private
* @type {string}
*/
this.cssClassName_ = options.className !== undefined ? options.className :
'ol-full-screen';
this.cssClassName_ =
options.className !== undefined ? options.className : 'ol-full-screen';
const label = options.label !== undefined ? options.label : '\u2922';
@@ -92,17 +89,20 @@ class FullScreen extends Control {
* @private
* @type {Text}
*/
this.labelNode_ = typeof label === 'string' ?
document.createTextNode(label) : label;
this.labelNode_ =
typeof label === 'string' ? document.createTextNode(label) : label;
const labelActive = options.labelActive !== undefined ? options.labelActive : '\u00d7';
const labelActive =
options.labelActive !== undefined ? options.labelActive : '\u00d7';
/**
* @private
* @type {Text}
*/
this.labelActiveNode_ = typeof labelActive === 'string' ?
document.createTextNode(labelActive) : labelActive;
this.labelActiveNode_ =
typeof labelActive === 'string'
? document.createTextNode(labelActive)
: labelActive;
/**
* @private
@@ -116,11 +116,20 @@ class FullScreen extends Control {
this.button_.title = tipLabel;
this.button_.appendChild(this.labelNode_);
this.button_.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false);
this.button_.addEventListener(
EventType.CLICK,
this.handleClick_.bind(this),
false
);
const cssClasses = this.cssClassName_ + ' ' + CLASS_UNSELECTABLE +
' ' + CLASS_CONTROL + ' ' +
(!isFullScreenSupported() ? CLASS_UNSUPPORTED : '');
const cssClasses =
this.cssClassName_ +
' ' +
CLASS_UNSELECTABLE +
' ' +
CLASS_CONTROL +
' ' +
(!isFullScreenSupported() ? CLASS_UNSUPPORTED : '');
const element = this.element;
element.className = cssClasses;
element.appendChild(this.button_);
@@ -136,7 +145,6 @@ class FullScreen extends Control {
* @type {HTMLElement|string|undefined}
*/
this.source_ = options.source;
}
/**
@@ -164,15 +172,15 @@ class FullScreen extends Control {
} else {
let element;
if (this.source_) {
element = typeof this.source_ === 'string' ?
document.getElementById(this.source_) :
this.source_;
element =
typeof this.source_ === 'string'
? document.getElementById(this.source_)
: this.source_;
} else {
element = map.getTargetElement();
}
if (this.keys_) {
requestFullScreenWithKeys(element);
} else {
requestFullScreen(element);
}
@@ -224,13 +232,13 @@ class FullScreen extends Control {
if (map) {
for (let i = 0, ii = events.length; i < ii; ++i) {
this.listenerKeys.push(
listen(document, events[i], this.handleFullScreenChange_, this));
listen(document, events[i], this.handleFullScreenChange_, this)
);
}
}
}
}
/**
* @return {boolean} Fullscreen is supported by the current platform.
*/
@@ -248,7 +256,9 @@ function isFullScreenSupported() {
*/
function isFullScreen() {
return !!(
document.webkitIsFullScreen || document.msFullscreenElement || document.fullscreenElement
document.webkitIsFullScreen ||
document.msFullscreenElement ||
document.fullscreenElement
);
}
src/ol/control/MousePosition.js
+29 -23
View File
@@ -3,12 +3,16 @@
*/
import 'elm-pep';
import {listen} from '../events.js';
import Control from './Control.js';
import EventType from '../pointer/EventType.js';
import {getChangeEventType} from '../Object.js';
import Control from './Control.js';
import {getTransformFromProjections, identityTransform, get as getProjection, getUserProjection} from '../proj.js';
import {
get as getProjection,
getTransformFromProjections,
getUserProjection,
identityTransform,
} from '../proj.js';
import {listen} from '../events.js';
/**
* @type {string}
@@ -20,7 +24,6 @@ const PROJECTION = 'projection';
*/
const COORDINATE_FORMAT = 'coordinateFormat';
/**
* @typedef {Object} Options
* @property {string} [className='ol-mouse-position'] CSS class name.
@@ -38,7 +41,6 @@ const COORDINATE_FORMAT = 'coordinateFormat';
* string `''`).
*/
/**
* @classdesc
* A control to show the 2D coordinates of the mouse cursor. By default, these
@@ -52,24 +54,26 @@ const COORDINATE_FORMAT = 'coordinateFormat';
* @api
*/
class MousePosition extends Control {
/**
* @param {Options=} opt_options Mouse position options.
*/
constructor(opt_options) {
const options = opt_options ? opt_options : {};
const element = document.createElement('div');
element.className = options.className !== undefined ? options.className : 'ol-mouse-position';
element.className =
options.className !== undefined ? options.className : 'ol-mouse-position';
super({
element: element,
render: options.render || render,
target: options.target
target: options.target,
});
this.addEventListener(getChangeEventType(PROJECTION), this.handleProjectionChanged_);
this.addEventListener(
getChangeEventType(PROJECTION),
this.handleProjectionChanged_
);
if (options.coordinateFormat) {
this.setCoordinateFormat(options.coordinateFormat);
@@ -82,7 +86,8 @@ class MousePosition extends Control {
* @private
* @type {string}
*/
this.undefinedHTML_ = options.undefinedHTML !== undefined ? options.undefinedHTML : '&#160;';
this.undefinedHTML_ =
options.undefinedHTML !== undefined ? options.undefinedHTML : '&#160;';
/**
* @private
@@ -107,7 +112,6 @@ class MousePosition extends Control {
* @type {?import("../proj.js").TransformFunction}
*/
this.transform_ = null;
}
/**
@@ -126,9 +130,9 @@ class MousePosition extends Control {
* @api
*/
getCoordinateFormat() {
return (
/** @type {import("../coordinate.js").CoordinateFormat|undefined} */ (this.get(COORDINATE_FORMAT))
);
return /** @type {import("../coordinate.js").CoordinateFormat|undefined} */ (this.get(
COORDINATE_FORMAT
));
}
/**
@@ -139,9 +143,9 @@ class MousePosition extends Control {
* @api
*/
getProjection() {
return (
/** @type {import("../proj/Projection.js").default|undefined} */ (this.get(PROJECTION))
);
return /** @type {import("../proj/Projection.js").default|undefined} */ (this.get(
PROJECTION
));
}
/**
@@ -216,7 +220,9 @@ class MousePosition extends Control {
const projection = this.getProjection();
if (projection) {
this.transform_ = getTransformFromProjections(
this.mapProjection_, projection);
this.mapProjection_,
projection
);
} else {
this.transform_ = identityTransform;
}
@@ -227,7 +233,9 @@ class MousePosition extends Control {
const userProjection = getUserProjection();
if (userProjection) {
this.transform_ = getTransformFromProjections(
this.mapProjection_, userProjection);
this.mapProjection_,
userProjection
);
}
this.transform_(coordinate, coordinate);
const coordinateFormat = this.getCoordinateFormat();
@@ -245,7 +253,6 @@ class MousePosition extends Control {
}
}
/**
* Update the projection. Rendering of the coordinates is done in
* `handleMouseMove` and `handleMouseUp`.
@@ -264,5 +271,4 @@ export function render(mapEvent) {
}
}
export default MousePosition;
src/ol/control/OverviewMap.js
+93 -66
View File
@@ -1,24 +1,29 @@
/**
* @module ol/control/OverviewMap
*/
import PluggableMap from '../PluggableMap.js';
import CompositeMapRenderer from '../renderer/Composite.js';
import Control from './Control.js';
import EventType from '../events/EventType.js';
import MapEventType from '../MapEventType.js';
import MapProperty from '../MapProperty.js';
import {getChangeEventType} from '../Object.js';
import ObjectEventType from '../ObjectEventType.js';
import Overlay from '../Overlay.js';
import OverlayPositioning from '../OverlayPositioning.js';
import ViewProperty from '../ViewProperty.js';
import Control from './Control.js';
import {fromExtent as polygonFromExtent} from '../geom/Polygon.js';
import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_COLLAPSED} from '../css.js';
import {replaceNode} from '../dom.js';
import {listen, listenOnce} from '../events.js';
import EventType from '../events/EventType.js';
import {containsExtent, equals as equalsExtent, getBottomRight, getTopLeft, scaleFromCenter} from '../extent.js';
import PluggableMap from '../PluggableMap.js';
import View from '../View.js';
import ViewProperty from '../ViewProperty.js';
import {CLASS_COLLAPSED, CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
import {
containsExtent,
equals as equalsExtent,
getBottomRight,
getTopLeft,
scaleFromCenter,
} from '../extent.js';
import {getChangeEventType} from '../Object.js';
import {listen, listenOnce} from '../events.js';
import {fromExtent as polygonFromExtent} from '../geom/Polygon.js';
import {replaceNode} from '../dom.js';
/**
* Maximum width and/or height extent ratio that determines when the overview
@@ -27,7 +32,6 @@ import View from '../View.js';
*/
const MAX_RATIO = 0.75;
/**
* Minimum width and/or height extent ratio that determines when the overview
* map should be zoomed in.
@@ -35,14 +39,12 @@ const MAX_RATIO = 0.75;
*/
const MIN_RATIO = 0.1;
class ControlledMap extends PluggableMap {
createRenderer() {
return new CompositeMapRenderer(this);
}
}
/**
* @typedef {Object} Options
* @property {string} [className='ol-overviewmap'] CSS class name.
@@ -64,7 +66,6 @@ class ControlledMap extends PluggableMap {
* a default view with the same projection as the main map will be used.
*/
/**
* Create a new control with a map acting as an overview map for another
* defined map.
@@ -72,18 +73,16 @@ class ControlledMap extends PluggableMap {
* @api
*/
class OverviewMap extends Control {
/**
* @param {Options=} opt_options OverviewMap options.
*/
constructor(opt_options) {
const options = opt_options ? opt_options : {};
super({
element: document.createElement('div'),
render: options.render || render,
target: options.target
target: options.target,
});
/**
@@ -95,14 +94,15 @@ class OverviewMap extends Control {
* @type {boolean}
* @private
*/
this.collapsed_ = options.collapsed !== undefined ? options.collapsed : true;
this.collapsed_ =
options.collapsed !== undefined ? options.collapsed : true;
/**
* @private
* @type {boolean}
*/
this.collapsible_ = options.collapsible !== undefined ?
options.collapsible : true;
this.collapsible_ =
options.collapsible !== undefined ? options.collapsible : true;
if (!this.collapsible_) {
this.collapsed_ = false;
@@ -112,8 +112,8 @@ class OverviewMap extends Control {
* @private
* @type {boolean}
*/
this.rotateWithView_ = options.rotateWithView !== undefined ?
options.rotateWithView : false;
this.rotateWithView_ =
options.rotateWithView !== undefined ? options.rotateWithView : false;
/**
* @private
@@ -121,11 +121,14 @@ class OverviewMap extends Control {
*/
this.viewExtent_ = undefined;
const className = options.className !== undefined ? options.className : 'ol-overviewmap';
const className =
options.className !== undefined ? options.className : 'ol-overviewmap';
const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Overview map';
const tipLabel =
options.tipLabel !== undefined ? options.tipLabel : 'Overview map';
const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00AB';
const collapseLabel =
options.collapseLabel !== undefined ? options.collapseLabel : '\u00AB';
if (typeof collapseLabel === 'string') {
/**
@@ -140,7 +143,6 @@ class OverviewMap extends Control {
const label = options.label !== undefined ? options.label : '\u00BB';
if (typeof label === 'string') {
/**
* @private
@@ -152,14 +154,18 @@ class OverviewMap extends Control {
this.label_ = label;
}
const activeLabel = (this.collapsible_ && !this.collapsed_) ?
this.collapseLabel_ : this.label_;
const activeLabel =
this.collapsible_ && !this.collapsed_ ? this.collapseLabel_ : this.label_;
const button = document.createElement('button');
button.setAttribute('type', 'button');
button.title = tipLabel;
button.appendChild(activeLabel);
button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false);
button.addEventListener(
EventType.CLICK,
this.handleClick_.bind(this),
false
);
/**
* @type {HTMLElement}
@@ -180,12 +186,12 @@ class OverviewMap extends Control {
* @private
*/
this.ovmap_ = new ControlledMap({
view: options.view
view: options.view,
});
const ovmap = this.ovmap_;
if (options.layers) {
options.layers.forEach(function(layer) {
options.layers.forEach(function (layer) {
ovmap.addLayer(layer);
});
}
@@ -201,13 +207,18 @@ class OverviewMap extends Control {
this.boxOverlay_ = new Overlay({
position: [0, 0],
positioning: OverlayPositioning.CENTER_CENTER,
element: box
element: box,
});
this.ovmap_.addOverlay(this.boxOverlay_);
const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
(this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') +
(this.collapsible_ ? '' : ' ol-uncollapsible');
const cssClasses =
className +
' ' +
CLASS_UNSELECTABLE +
' ' +
CLASS_CONTROL +
(this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') +
(this.collapsible_ ? '' : ' ol-uncollapsible');
const element = this.element;
element.className = cssClasses;
element.appendChild(this.ovmapDiv_);
@@ -222,21 +233,23 @@ class OverviewMap extends Control {
/* Functions definition */
const computeDesiredMousePosition = function(mousePosition) {
const computeDesiredMousePosition = function (mousePosition) {
return {
clientX: mousePosition.clientX,
clientY: mousePosition.clientY
clientY: mousePosition.clientY,
};
};
const move = function(event) {
const move = function (event) {
const position = /** @type {?} */ (computeDesiredMousePosition(event));
const coordinates = ovmap.getEventCoordinateInternal(/** @type {Event} */ (position));
const coordinates = ovmap.getEventCoordinateInternal(
/** @type {Event} */ (position)
);
overlay.setPosition(coordinates);
};
const endMoving = function(event) {
const endMoving = function (event) {
const coordinates = ovmap.getEventCoordinateInternal(event);
scope.getMap().getView().setCenterInternal(coordinates);
@@ -247,11 +260,10 @@ class OverviewMap extends Control {
/* Binding */
overlayBox.addEventListener('mousedown', function() {
overlayBox.addEventListener('mousedown', function () {
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', endMoving);
});
}
/**
@@ -277,9 +289,14 @@ class OverviewMap extends Control {
if (map) {
this.ovmap_.setTarget(this.ovmapDiv_);
this.listenerKeys.push(listen(
map, ObjectEventType.PROPERTYCHANGE,
this.handleMapPropertyChange_, this));
this.listenerKeys.push(
listen(
map,
ObjectEventType.PROPERTYCHANGE,
this.handleMapPropertyChange_,
this
)
);
const view = map.getView();
if (view) {
@@ -317,12 +334,15 @@ class OverviewMap extends Control {
if (!this.view_) {
// Unless an explicit view definition was given, derive default from whatever main map uses.
const newView = new View({
projection: view.getProjection()
projection: view.getProjection(),
});
this.ovmap_.setView(newView);
}
view.addEventListener(getChangeEventType(ViewProperty.ROTATION), this.boundHandleRotationChanged_);
view.addEventListener(
getChangeEventType(ViewProperty.ROTATION),
this.boundHandleRotationChanged_
);
// Sync once with the new view
this.handleRotationChanged_();
}
@@ -333,7 +353,10 @@ class OverviewMap extends Control {
* @private
*/
unbindView_(view) {
view.removeEventListener(getChangeEventType(ViewProperty.ROTATION), this.boundHandleRotationChanged_);
view.removeEventListener(
getChangeEventType(ViewProperty.ROTATION),
this.boundHandleRotationChanged_
);
}
/**
@@ -381,10 +404,12 @@ class OverviewMap extends Control {
const ovview = ovmap.getView();
const ovextent = ovview.calculateExtentInternal(ovmapSize);
const topLeftPixel =
ovmap.getPixelFromCoordinateInternal(getTopLeft(extent));
const bottomRightPixel =
ovmap.getPixelFromCoordinateInternal(getBottomRight(extent));
const topLeftPixel = ovmap.getPixelFromCoordinateInternal(
getTopLeft(extent)
);
const bottomRightPixel = ovmap.getPixelFromCoordinateInternal(
getBottomRight(extent)
);
const boxWidth = Math.abs(topLeftPixel[0] - bottomRightPixel[0]);
const boxHeight = Math.abs(topLeftPixel[1] - bottomRightPixel[1]);
@@ -392,10 +417,12 @@ class OverviewMap extends Control {
const ovmapWidth = ovmapSize[0];
const ovmapHeight = ovmapSize[1];
if (boxWidth < ovmapWidth * MIN_RATIO ||
boxHeight < ovmapHeight * MIN_RATIO ||
boxWidth > ovmapWidth * MAX_RATIO ||
boxHeight > ovmapHeight * MAX_RATIO) {
if (
boxWidth < ovmapWidth * MIN_RATIO ||
boxHeight < ovmapHeight * MIN_RATIO ||
boxWidth > ovmapWidth * MAX_RATIO ||
boxHeight > ovmapHeight * MAX_RATIO
) {
this.resetExtent_();
} else if (!containsExtent(ovextent, extent)) {
this.recenter_();
@@ -425,8 +452,7 @@ class OverviewMap extends Control {
// get how many times the current map overview could hold different
// box sizes using the min and max ratio, pick the step in the middle used
// to calculate the extent from the main map to set it to the overview map,
const steps = Math.log(
MAX_RATIO / MIN_RATIO) / Math.LN2;
const steps = Math.log(MAX_RATIO / MIN_RATIO) / Math.LN2;
const ratio = 1 / (Math.pow(2, steps / 2) * MIN_RATIO);
scaleFromCenter(extent, ratio);
ovview.fitInternal(polygonFromExtent(extent));
@@ -473,8 +499,8 @@ class OverviewMap extends Control {
const center = view.getCenterInternal();
const resolution = view.getResolution();
const ovresolution = ovview.getResolution();
const width = mapSize[0] * resolution / ovresolution;
const height = mapSize[1] * resolution / ovresolution;
const width = (mapSize[0] * resolution) / ovresolution;
const height = (mapSize[1] * resolution) / ovresolution;
// set position using center coordinates
overlay.setPosition(center);
@@ -520,11 +546,14 @@ class OverviewMap extends Control {
}
ovmap.updateSize();
this.resetExtent_();
listenOnce(ovmap, MapEventType.POSTRENDER,
function(event) {
listenOnce(
ovmap,
MapEventType.POSTRENDER,
function (event) {
this.updateBox_();
},
this);
this
);
}
}
@@ -617,7 +646,6 @@ class OverviewMap extends Control {
}
}
/**
* Update the overview map element.
* @param {import("../MapEvent.js").default} mapEvent Map event.
@@ -628,5 +656,4 @@ export function render(mapEvent) {
this.updateBox_();
}
export default OverviewMap;
src/ol/control/Rotate.js
+12 -12
View File
@@ -2,10 +2,9 @@
* @module ol/control/Rotate
*/
import Control from './Control.js';
import EventType from '../events/EventType.js';
import {CLASS_CONTROL, CLASS_HIDDEN, CLASS_UNSELECTABLE} from '../css.js';
import {easeOut} from '../easing.js';
import EventType from '../events/EventType.js';
/**
* @typedef {Object} Options
@@ -23,7 +22,6 @@ import EventType from '../events/EventType.js';
* rendered outside of the map's viewport.
*/
/**
* @classdesc
* A button control to reset rotation to 0.
@@ -33,21 +31,20 @@ import EventType from '../events/EventType.js';
* @api
*/
class Rotate extends Control {
/**
* @param {Options=} opt_options Rotate options.
*/
constructor(opt_options) {
const options = opt_options ? opt_options : {};
super({
element: document.createElement('div'),
render: options.render || render,
target: options.target
target: options.target,
});
const className = options.className !== undefined ? options.className : 'ol-rotate';
const className =
options.className !== undefined ? options.className : 'ol-rotate';
const label = options.label !== undefined ? options.label : '\u21E7';
@@ -74,9 +71,14 @@ class Rotate extends Control {
button.title = tipLabel;
button.appendChild(this.label_);
button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false);
button.addEventListener(
EventType.CLICK,
this.handleClick_.bind(this),
false
);
const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
const cssClasses =
className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
const element = this.element;
element.className = cssClasses;
element.appendChild(button);
@@ -104,7 +106,6 @@ class Rotate extends Control {
if (this.autoHide_) {
this.element.classList.add(CLASS_HIDDEN);
}
}
/**
@@ -137,7 +138,7 @@ class Rotate extends Control {
view.animate({
rotation: 0,
duration: this.duration_,
easing: easeOut
easing: easeOut,
});
} else {
view.setRotation(0);
@@ -146,7 +147,6 @@ class Rotate extends Control {
}
}
/**
* Update the rotate control element.
* @param {import("../MapEvent.js").default} mapEvent Map event.
src/ol/control/ScaleLine.js
+86 -58
View File
@@ -1,13 +1,12 @@
/**
* @module ol/control/ScaleLine
*/
import {getChangeEventType} from '../Object.js';
import {assert} from '../asserts.js';
import Control from './Control.js';
import {CLASS_UNSELECTABLE} from '../css.js';
import {getPointResolution, METERS_PER_UNIT} from '../proj.js';
import ProjUnits from '../proj/Units.js';
import {CLASS_UNSELECTABLE} from '../css.js';
import {METERS_PER_UNIT, getPointResolution} from '../proj.js';
import {assert} from '../asserts.js';
import {getChangeEventType} from '../Object.js';
/**
* @type {string}
@@ -24,10 +23,9 @@ export const Units = {
IMPERIAL: 'imperial',
NAUTICAL: 'nautical',
METRIC: 'metric',
US: 'us'
US: 'us',
};
/**
* @const
* @type {Array<number>}
@@ -40,7 +38,6 @@ const LEADING_DIGITS = [1, 2, 5];
*/
const DEFAULT_DPI = 25.4 / 0.28;
/**
* @typedef {Object} Options
* @property {string} [className='ol-scale-line'] CSS Class name.
@@ -60,7 +57,6 @@ const DEFAULT_DPI = 25.4 / 0.28;
* when `bar` is `true`. If undefined the OGC default screen pixel size of 0.28mm will be assumed.
*/
/**
* @classdesc
* A control displaying rough y-axis distances, calculated for the center of the
@@ -76,21 +72,23 @@ const DEFAULT_DPI = 25.4 / 0.28;
* @api
*/
class ScaleLine extends Control {
/**
* @param {Options=} opt_options Scale line options.
*/
constructor(opt_options) {
const options = opt_options ? opt_options : {};
const className = options.className !== undefined ? options.className :
options.bar ? 'ol-scale-bar' : 'ol-scale-line';
const className =
options.className !== undefined
? options.className
: options.bar
? 'ol-scale-bar'
: 'ol-scale-line';
super({
element: document.createElement('div'),
render: options.render || render,
target: options.target
target: options.target,
});
/**
@@ -133,7 +131,10 @@ class ScaleLine extends Control {
*/
this.renderedHTML_ = '';
this.addEventListener(getChangeEventType(UNITS_PROP), this.handleUnitsChanged_);
this.addEventListener(
getChangeEventType(UNITS_PROP),
this.handleUnitsChanged_
);
this.setUnits(options.units || Units.METRIC);
@@ -160,7 +161,6 @@ class ScaleLine extends Control {
* @type {number|undefined}
*/
this.dpi_ = options.dpi || undefined;
}
/**
@@ -217,13 +217,17 @@ class ScaleLine extends Control {
const center = viewState.center;
const projection = viewState.projection;
const units = this.getUnits();
const pointResolutionUnits = units == Units.DEGREES ?
ProjUnits.DEGREES :
ProjUnits.METERS;
let pointResolution =
getPointResolution(projection, viewState.resolution, center, pointResolutionUnits);
const pointResolutionUnits =
units == Units.DEGREES ? ProjUnits.DEGREES : ProjUnits.METERS;
let pointResolution = getPointResolution(
projection,
viewState.resolution,
center,
pointResolutionUnits
);
const minWidth = this.minWidth_ * (this.dpi_ || DEFAULT_DPI) / DEFAULT_DPI;
const minWidth =
(this.minWidth_ * (this.dpi_ || DEFAULT_DPI)) / DEFAULT_DPI;
let nominalCount = minWidth * pointResolution;
let suffix = '';
@@ -281,8 +285,7 @@ class ScaleLine extends Control {
assert(false, 33); // Invalid units
}
let i = 3 * Math.floor(
Math.log(minWidth * pointResolution) / Math.log(10));
let i = 3 * Math.floor(Math.log(minWidth * pointResolution) / Math.log(10));
let count, width, decimalCount;
while (true) {
decimalCount = Math.floor(i / 3);
@@ -319,7 +322,6 @@ class ScaleLine extends Control {
this.element.style.display = '';
this.renderedVisible_ = true;
}
}
/**
@@ -330,7 +332,8 @@ class ScaleLine extends Control {
* @returns {string} The stringified HTML of the scalebar.
*/
createScaleBar(width, scale, suffix) {
const mapScale = '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString();
const mapScale =
'1 : ' + Math.round(this.getScaleForResolution()).toLocaleString();
const scaleSteps = [];
const stepWidth = width / this.scaleBarSteps_;
let backgroundColor = '#ffffff';
@@ -342,22 +345,27 @@ class ScaleLine extends Control {
scaleSteps.push(
'<div>' +
'<div ' +
'class="ol-scale-singlebar" ' +
'style=' +
'"width: ' + stepWidth + 'px;' +
'background-color: ' + backgroundColor + ';"' +
'class="ol-scale-singlebar" ' +
'style=' +
'"width: ' +
stepWidth +
'px;' +
'background-color: ' +
backgroundColor +
';"' +
'>' +
'</div>' +
this.createMarker('relative', i) +
/*render text every second step, except when only 2 steps */
(i % 2 === 0 || this.scaleBarSteps_ === 2 ?
this.createStepText(i, width, false, scale, suffix) :
''
) +
'</div>'
(i % 2 === 0 || this.scaleBarSteps_ === 2
? this.createStepText(i, width, false, scale, suffix)
: '') +
'</div>'
);
if (i === this.scaleBarSteps_ - 1) {
{/*render text at the end */}
{
/*render text at the end */
}
scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix));
}
// switch colors of steps between black and white
@@ -370,19 +378,23 @@ class ScaleLine extends Control {
let scaleBarText;
if (this.scaleBarText_) {
scaleBarText = '<div ' +
'class="ol-scale-text" ' +
'style="width: ' + width + 'px;">' +
mapScale +
'</div>';
scaleBarText =
'<div ' +
'class="ol-scale-text" ' +
'style="width: ' +
width +
'px;">' +
mapScale +
'</div>';
} else {
scaleBarText = '';
}
const container = '<div ' +
const container =
'<div ' +
'style="display: flex;">' +
scaleBarText +
scaleSteps.join('') +
'</div>';
'</div>';
return container;
}
@@ -394,11 +406,17 @@ class ScaleLine extends Control {
*/
createMarker(position, i) {
const top = position === 'absolute' ? 3 : -10;
return '<div ' +
'class="ol-scale-step-marker" ' +
'style="position: ' + position + ';' +
'top: ' + top + 'px;"' +
'></div>';
return (
'<div ' +
'class="ol-scale-step-marker" ' +
'style="position: ' +
position +
';' +
'top: ' +
top +
'px;"' +
'></div>'
);
}
/**
@@ -411,20 +429,31 @@ class ScaleLine extends Control {
* @returns {string} The stringified div containing the step text
*/
createStepText(i, width, isLast, scale, suffix) {
const length = i === 0 ? 0 : Math.round((scale / this.scaleBarSteps_ * i) * 100) / 100;
const length =
i === 0 ? 0 : Math.round((scale / this.scaleBarSteps_) * i * 100) / 100;
const lengthString = length + (i === 0 ? '' : ' ' + suffix);
const margin = i === 0 ? -3 : width / this.scaleBarSteps_ * -1;
const minWidth = i === 0 ? 0 : width / this.scaleBarSteps_ * 2;
return '<div ' +
const margin = i === 0 ? -3 : (width / this.scaleBarSteps_) * -1;
const minWidth = i === 0 ? 0 : (width / this.scaleBarSteps_) * 2;
return (
'<div ' +
'class="ol-scale-step-text" ' +
'style="' +
'margin-left: ' + margin + 'px;' +
'text-align: ' + (i === 0 ? 'left' : 'center') + '; ' +
'min-width: ' + minWidth + 'px;' +
'left: ' + (isLast ? width + 'px' : 'unset') + ';"' +
'margin-left: ' +
margin +
'px;' +
'text-align: ' +
(i === 0 ? 'left' : 'center') +
'; ' +
'min-width: ' +
minWidth +
'px;' +
'left: ' +
(isLast ? width + 'px' : 'unset') +
';"' +
'>' +
lengthString +
'</div>';
'</div>'
);
}
/**
@@ -459,5 +488,4 @@ export function render(mapEvent) {
this.updateElement_();
}
export default ScaleLine;
src/ol/control/Zoom.js
+33 -21
View File
@@ -1,12 +1,11 @@
/**
* @module ol/control/Zoom
*/
import EventType from '../events/EventType.js';
import Control from './Control.js';
import EventType from '../events/EventType.js';
import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
import {easeOut} from '../easing.js';
/**
* @typedef {Object} Options
* @property {number} [duration=250] Animation duration in milliseconds.
@@ -22,7 +21,6 @@ import {easeOut} from '../easing.js';
* rendered outside of the map's viewport.
*/
/**
* @classdesc
* A control with 2 buttons, one for zoom in and one for zoom out.
@@ -32,52 +30,68 @@ import {easeOut} from '../easing.js';
* @api
*/
class Zoom extends Control {
/**
* @param {Options=} opt_options Zoom options.
*/
constructor(opt_options) {
const options = opt_options ? opt_options : {};
super({
element: document.createElement('div'),
target: options.target
target: options.target,
});
const className = options.className !== undefined ? options.className : 'ol-zoom';
const className =
options.className !== undefined ? options.className : 'ol-zoom';
const delta = options.delta !== undefined ? options.delta : 1;
const zoomInLabel = options.zoomInLabel !== undefined ? options.zoomInLabel : '+';
const zoomOutLabel = options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2212';
const zoomInLabel =
options.zoomInLabel !== undefined ? options.zoomInLabel : '+';
const zoomOutLabel =
options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2212';
const zoomInTipLabel = options.zoomInTipLabel !== undefined ?
options.zoomInTipLabel : 'Zoom in';
const zoomOutTipLabel = options.zoomOutTipLabel !== undefined ?
options.zoomOutTipLabel : 'Zoom out';
const zoomInTipLabel =
options.zoomInTipLabel !== undefined ? options.zoomInTipLabel : 'Zoom in';
const zoomOutTipLabel =
options.zoomOutTipLabel !== undefined
? options.zoomOutTipLabel
: 'Zoom out';
const inElement = document.createElement('button');
inElement.className = className + '-in';
inElement.setAttribute('type', 'button');
inElement.title = zoomInTipLabel;
inElement.appendChild(
typeof zoomInLabel === 'string' ? document.createTextNode(zoomInLabel) : zoomInLabel
typeof zoomInLabel === 'string'
? document.createTextNode(zoomInLabel)
: zoomInLabel
);
inElement.addEventListener(EventType.CLICK, this.handleClick_.bind(this, delta), false);
inElement.addEventListener(
EventType.CLICK,
this.handleClick_.bind(this, delta),
false
);
const outElement = document.createElement('button');
outElement.className = className + '-out';
outElement.setAttribute('type', 'button');
outElement.title = zoomOutTipLabel;
outElement.appendChild(
typeof zoomOutLabel === 'string' ? document.createTextNode(zoomOutLabel) : zoomOutLabel
typeof zoomOutLabel === 'string'
? document.createTextNode(zoomOutLabel)
: zoomOutLabel
);
outElement.addEventListener(EventType.CLICK, this.handleClick_.bind(this, -delta), false);
outElement.addEventListener(
EventType.CLICK,
this.handleClick_.bind(this, -delta),
false
);
const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
const cssClasses =
className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
const element = this.element;
element.className = cssClasses;
element.appendChild(inElement);
@@ -88,7 +102,6 @@ class Zoom extends Control {
* @private
*/
this.duration_ = options.duration !== undefined ? options.duration : 250;
}
/**
@@ -123,7 +136,7 @@ class Zoom extends Control {
view.animate({
zoom: newZoom,
duration: this.duration_,
easing: easeOut
easing: easeOut,
});
} else {
view.setZoom(newZoom);
@@ -132,5 +145,4 @@ class Zoom extends Control {
}
}
export default Zoom;
src/ol/control/ZoomSlider.js
+50 -32
View File
@@ -4,14 +4,13 @@
import 'elm-pep';
import Control from './Control.js';
import EventType from '../events/EventType.js';
import PointerEventType from '../pointer/EventType.js';
import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
import {clamp} from '../math.js';
import {easeOut} from '../easing.js';
import {listen, unlistenByKey} from '../events.js';
import {stopPropagation} from '../events/Event.js';
import EventType from '../events/EventType.js';
import {clamp} from '../math.js';
import PointerEventType from '../pointer/EventType.js';
/**
* The enum for available directions.
@@ -20,10 +19,9 @@ import PointerEventType from '../pointer/EventType.js';
*/
const Direction = {
VERTICAL: 0,
HORIZONTAL: 1
HORIZONTAL: 1,
};
/**
* @typedef {Object} Options
* @property {string} [className='ol-zoomslider'] CSS class name.
@@ -32,7 +30,6 @@ const Direction = {
* should be re-rendered. This is called in a `requestAnimationFrame` callback.
*/
/**
* @classdesc
* A slider type of control for zooming.
@@ -44,23 +41,21 @@ const Direction = {
* @api
*/
class ZoomSlider extends Control {
/**
* @param {Options=} opt_options Zoom slider options.
*/
constructor(opt_options) {
const options = opt_options ? opt_options : {};
super({
element: document.createElement('div'),
render: options.render || render
render: options.render || render,
});
/**
* @type {!Array.<import("../events.js").EventsKey>}
* @private
*/
* @type {!Array.<import("../events.js").EventsKey>}
* @private
*/
this.dragListenerKeys_ = [];
/**
@@ -131,19 +126,37 @@ class ZoomSlider extends Control {
*/
this.duration_ = options.duration !== undefined ? options.duration : 200;
const className = options.className !== undefined ? options.className : 'ol-zoomslider';
const className =
options.className !== undefined ? options.className : 'ol-zoomslider';
const thumbElement = document.createElement('button');
thumbElement.setAttribute('type', 'button');
thumbElement.className = className + '-thumb ' + CLASS_UNSELECTABLE;
const containerElement = this.element;
containerElement.className = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
containerElement.className =
className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
containerElement.appendChild(thumbElement);
containerElement.addEventListener(PointerEventType.POINTERDOWN, this.handleDraggerStart_.bind(this), false);
containerElement.addEventListener(PointerEventType.POINTERMOVE, this.handleDraggerDrag_.bind(this), false);
containerElement.addEventListener(PointerEventType.POINTERUP, this.handleDraggerEnd_.bind(this), false);
containerElement.addEventListener(
PointerEventType.POINTERDOWN,
this.handleDraggerStart_.bind(this),
false
);
containerElement.addEventListener(
PointerEventType.POINTERMOVE,
this.handleDraggerDrag_.bind(this),
false
);
containerElement.addEventListener(
PointerEventType.POINTERUP,
this.handleDraggerEnd_.bind(this),
false
);
containerElement.addEventListener(EventType.CLICK, this.handleContainerClick_.bind(this), false);
containerElement.addEventListener(
EventType.CLICK,
this.handleContainerClick_.bind(this),
false
);
thumbElement.addEventListener(EventType.CLICK, stopPropagation, false);
}
@@ -171,17 +184,20 @@ class ZoomSlider extends Control {
initSlider_() {
const container = this.element;
const containerSize = {
width: container.offsetWidth, height: container.offsetHeight
width: container.offsetWidth,
height: container.offsetHeight,
};
const thumb = /** @type {HTMLElement} */ (container.firstElementChild);
const computedStyle = getComputedStyle(thumb);
const thumbWidth = thumb.offsetWidth +
parseFloat(computedStyle['marginRight']) +
parseFloat(computedStyle['marginLeft']);
const thumbHeight = thumb.offsetHeight +
parseFloat(computedStyle['marginTop']) +
parseFloat(computedStyle['marginBottom']);
const thumbWidth =
thumb.offsetWidth +
parseFloat(computedStyle['marginRight']) +
parseFloat(computedStyle['marginLeft']);
const thumbHeight =
thumb.offsetHeight +
parseFloat(computedStyle['marginTop']) +
parseFloat(computedStyle['marginBottom']);
this.thumbSize_ = [thumbWidth, thumbHeight];
if (containerSize.width > containerSize.height) {
@@ -203,7 +219,8 @@ class ZoomSlider extends Control {
const relativePosition = this.getRelativePosition_(
event.offsetX - this.thumbSize_[0] / 2,
event.offsetY - this.thumbSize_[1] / 2);
event.offsetY - this.thumbSize_[1] / 2
);
const resolution = this.getResolutionForPosition_(relativePosition);
const zoom = view.getConstrainedZoom(view.getZoomForResolution(resolution));
@@ -211,7 +228,7 @@ class ZoomSlider extends Control {
view.animateInternal({
zoom: zoom,
duration: this.duration_,
easing: easeOut
easing: easeOut,
});
}
@@ -222,7 +239,8 @@ class ZoomSlider extends Control {
*/
handleDraggerStart_(event) {
if (!this.dragging_ && event.target === this.element.firstElementChild) {
const element = /** @type {HTMLElement} */ (this.element.firstElementChild);
const element = /** @type {HTMLElement} */ (this.element
.firstElementChild);
this.getMap().getView().beginInteraction();
this.startX_ = event.clientX - parseFloat(element.style.left);
this.startY_ = event.clientY - parseFloat(element.style.top);
@@ -250,7 +268,9 @@ class ZoomSlider extends Control {
const deltaX = event.clientX - this.startX_;
const deltaY = event.clientY - this.startY_;
const relativePosition = this.getRelativePosition_(deltaX, deltaY);
this.currentResolution_ = this.getResolutionForPosition_(relativePosition);
this.currentResolution_ = this.getResolutionForPosition_(
relativePosition
);
this.getMap().getView().setResolution(this.currentResolution_);
}
}
@@ -338,7 +358,6 @@ class ZoomSlider extends Control {
}
}
/**
* Update the zoomslider element.
* @param {import("../MapEvent.js").default} mapEvent Map event.
@@ -356,5 +375,4 @@ export function render(mapEvent) {
this.setThumbPosition_(res);
}
export default ZoomSlider;
src/ol/control/ZoomToExtent.js
+17 -11
View File
@@ -1,11 +1,10 @@
/**
* @module ol/control/ZoomToExtent
*/
import EventType from '../events/EventType.js';
import {fromExtent as polygonFromExtent} from '../geom/Polygon.js';
import Control from './Control.js';
import EventType from '../events/EventType.js';
import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
import {fromExtent as polygonFromExtent} from '../geom/Polygon.js';
/**
* @typedef {Object} Options
@@ -19,7 +18,6 @@ import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
* extent of the view projection is used.
*/
/**
* @classdesc
* A button control which, when pressed, changes the map view to a specific
@@ -28,7 +26,6 @@ import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
* @api
*/
class ZoomToExtent extends Control {
/**
* @param {Options=} opt_options Options.
*/
@@ -37,7 +34,7 @@ class ZoomToExtent extends Control {
super({
element: document.createElement('div'),
target: options.target
target: options.target,
});
/**
@@ -46,10 +43,12 @@ class ZoomToExtent extends Control {
*/
this.extent = options.extent ? options.extent : null;
const className = options.className !== undefined ? options.className : 'ol-zoom-extent';
const className =
options.className !== undefined ? options.className : 'ol-zoom-extent';
const label = options.label !== undefined ? options.label : 'E';
const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Fit to extent';
const tipLabel =
options.tipLabel !== undefined ? options.tipLabel : 'Fit to extent';
const button = document.createElement('button');
button.setAttribute('type', 'button');
button.title = tipLabel;
@@ -57,9 +56,14 @@ class ZoomToExtent extends Control {
typeof label === 'string' ? document.createTextNode(label) : label
);
button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false);
button.addEventListener(
EventType.CLICK,
this.handleClick_.bind(this),
false
);
const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
const cssClasses =
className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
const element = this.element;
element.className = cssClasses;
element.appendChild(button);
@@ -80,7 +84,9 @@ class ZoomToExtent extends Control {
handleZoomToExtent() {
const map = this.getMap();
const view = map.getView();
const extent = !this.extent ? view.getProjection().getExtent() : this.extent;
const extent = !this.extent
? view.getProjection().getExtent()
: this.extent;
view.fitInternal(polygonFromExtent(extent));
}
}