itowns 2.45.1-next.0 → 2.45.1-next.1

package/lib/Utils/gui/C3DTilesStyle.js

@@ -0,0 +1,218 @@
+import { C3DTILES_LAYER_EVENTS } from 'itowns';
+import Widget from "./Widget.js";
+const DEFAULT_OPTIONS = {
+  width: 200,
+  position: 'top-right'
+};
+
+/**
+ * A widget for dynamic 3DTiles styling
+ *
+ * To use it, you need to link the widgets' stylesheet to your html webpage. This stylesheet is included in
+ * [itowns bundles](https://github.com/iTowns/itowns/releases) if you downloaded them, or it can be found in
+ * `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it can be found at
+ * [this link](https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css). See
+ * [this example](http://www.itowns-project.org/itowns/examples/#widgets_3dtiles_style) for more details.
+ *
+ * @extends Widget
+ *
+ * @property    {HTMLElement}   domElement      An html div containing the minimap.
+ * @property    {HTMLElement}   parentElement   The parent HTML container of `this.domElement`.
+ */
+class C3DTilesStyle extends Widget {
+  /**
+     *
+     * @param {View} view view
+     * @param {*} options options
+     */
+  constructor(view, options) {
+    super(view, options, DEFAULT_OPTIONS);
+    this.domElement.onclick = event => event.stopImmediatePropagation();
+
+    // create select of the C3DTilesLayers
+    const selectC3DTilesLayer = document.createElement('select');
+    this.domElement.appendChild(selectC3DTilesLayer);
+
+    /** @type {Map<HTMLElement, HTMLElement>} */
+    const selectOptionLayerContent = new Map();
+    const updateSelectedLayer = () => {
+      for (const [sO, lC] of selectOptionLayerContent) {
+        lC.hidden = sO !== selectC3DTilesLayer.selectedOptions[0];
+      }
+    };
+    selectC3DTilesLayer.onchange = updateSelectedLayer;
+    view.getLayers().filter(el => el.isC3DTilesLayer === true).forEach(c3DTilesLayer => {
+      const selectC3DTilesLayerOption = document.createElement('option');
+      selectC3DTilesLayerOption.innerText = c3DTilesLayer.name;
+      selectC3DTilesLayer.add(selectC3DTilesLayerOption);
+      const layerContent = document.createElement('div');
+      this.domElement.appendChild(layerContent);
+
+      // link select option to layer content
+      selectOptionLayerContent.set(selectC3DTilesLayerOption, layerContent);
+
+      // wait for C3DTileFeatures to load
+      c3DTilesLayer.addEventListener(C3DTILES_LAYER_EVENTS.ON_TILE_CONTENT_LOADED, () => {
+        // reset
+        while (layerContent.firstChild) {
+          layerContent.firstChild.remove();
+        }
+
+        /** @type {Map<string,Array>} */
+        const buffer = new Map(); // record what are the possible values for a key in batchTable
+        for (const [, tileC3DTileFeatures] of c3DTilesLayer.tilesC3DTileFeatures) {
+          for (const [, c3DTileFeature] of tileC3DTileFeatures) {
+            // eslint-disable-next-line guard-for-in
+            for (const key in c3DTileFeature.getInfo().batchTable) {
+              if (!buffer.has(key)) {
+                buffer.set(key, []);
+              }
+
+              // check possible value for this key
+              const value = c3DTileFeature.getInfo().batchTable[key];
+              if (!buffer.get(key).includes(value)) {
+                buffer.get(key).push(value);
+              }
+            }
+          }
+        }
+
+        /** @type {Map<HTMLElement, Function>} */
+        const colorFunctions = new Map();
+        const fillColorFunction = c3DTileFeature => {
+          let result = null;
+          for (const [, colorFunction] of colorFunctions) {
+            result = colorFunction(c3DTileFeature) || result;
+          }
+          return result;
+        };
+
+        /** @type {Map<HTMLElement, Function>} */
+        const opacityFunctions = new Map();
+        const fillOpacityFunction = c3DTileFeature => {
+          let result = 1;
+          for (const [, opacityFunction] of opacityFunctions) {
+            result = opacityFunction(c3DTileFeature) || result;
+          }
+          return result;
+        };
+        const appendInputColorAndOpacity = (getKeyValue, key, possibleValues) => {
+          const inputColor = document.createElement('input');
+          inputColor.setAttribute('type', 'color');
+          layerContent.appendChild(inputColor);
+          inputColor.onchange = () => {
+            const keyValue = getKeyValue();
+            if (!possibleValues.includes(keyValue)) {
+              return;
+            }
+            const colorSelected = inputColor.value; // copy
+            colorFunctions.set(keyValue, c3DTileFeature => {
+              if (c3DTileFeature.getInfo().batchTable[key] == keyValue) {
+                return colorSelected;
+              }
+              return null;
+            });
+            c3DTilesLayer.updateStyle();
+            view.notifyChange();
+          };
+          const opacityElement = document.createElement('input');
+          opacityElement.setAttribute('type', 'range');
+          opacityElement.min = 0;
+          opacityElement.max = 1;
+          opacityElement.step = 0.1;
+          opacityElement.value = 1;
+          layerContent.appendChild(opacityElement);
+          opacityElement.onchange = () => {
+            const keyValue = getKeyValue();
+            if (!possibleValues.includes(keyValue)) {
+              return;
+            }
+            const opacitySelected = opacityElement.value; // copy
+            opacityFunctions.set(keyValue, c3DTileFeature => {
+              if (c3DTileFeature.getInfo().batchTable[key] == keyValue) {
+                return opacitySelected;
+              }
+              return null;
+            });
+            c3DTilesLayer.updateStyle();
+            view.notifyChange();
+          };
+          return {
+            inputColor,
+            opacityElement
+          };
+        };
+        const appendFilterSelect = (key, values) => {
+          const label = document.createElement('label');
+          label.innerText = key;
+          layerContent.appendChild(label);
+          const selectKey = document.createElement('select');
+          layerContent.appendChild(selectKey);
+          values.forEach(value => {
+            const selectKeyOption = document.createElement('option');
+            selectKeyOption.value = value;
+            selectKeyOption.text = value;
+            selectKey.add(selectKeyOption);
+          });
+          appendInputColorAndOpacity(() => selectKey.selectedOptions[0].value, key, values);
+        };
+        const appendFilterInputText = (key, values) => {
+          const label = document.createElement('label');
+          label.innerText = key;
+          layerContent.appendChild(label);
+          const inputText = document.createElement('input');
+          inputText.setAttribute('type', 'text');
+          layerContent.appendChild(inputText);
+          const {
+            inputColor,
+            opacityElement
+          } = appendInputColorAndOpacity(() => inputText.value, key, values);
+          inputText.onchange = () => {
+            if (!values.includes(inputText.value)) {
+              return;
+            }
+            const colorSelected = inputColor.value; // copy
+            const textSelected = inputText.value; // copy
+            colorFunctions.set(textSelected, c3DTileFeature => {
+              if (c3DTileFeature.getInfo().batchTable[key] == textSelected) {
+                return colorSelected;
+              }
+              return null;
+            });
+            const opacitySelected = opacityElement.value; // copy
+            opacityFunctions.set(textSelected, c3DTileFeature => {
+              if (c3DTileFeature.getInfo().batchTable[key] == textSelected) {
+                return opacitySelected;
+              }
+              return null;
+            });
+            c3DTilesLayer.updateStyle();
+            view.notifyChange();
+          };
+        };
+
+        // create ui from buffer
+        for (const [key, values] of buffer) {
+          if (values.length < C3DTilesStyle.MAX_SELECT_VALUE) {
+            appendFilterSelect(key, values);
+          } else {
+            appendFilterInputText(key, values);
+          }
+        }
+
+        // set style
+        c3DTilesLayer.style = {
+          fill: {
+            color: fillColorFunction,
+            opacity: fillOpacityFunction
+          }
+        };
+      });
+    });
+    updateSelectedLayer();
+  }
+  static get MAX_SELECT_VALUE() {
+    return 10;
+  }
+}
+export default C3DTilesStyle;

package/lib/Utils/gui/Main.js

@@ -0,0 +1,7 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Navigation } from "./Navigation.js";
+export { default as Minimap } from "./Minimap.js";
+export { default as Scale } from "./Scale.js";
+export { default as Searchbar } from "./Searchbar.js";
+export { default as Widget } from "./Widget.js";
+export { default as C3DTilesStyle } from "./C3DTilesStyle.js";

package/lib/Utils/gui/Minimap.js

@@ -0,0 +1,152 @@
+import { Coordinates } from '@itowns/geographic';
+import { MAIN_LOOP_EVENTS, PlanarView, CAMERA_TYPE } from 'itowns';
+import Widget from "./Widget.js";
+const DEFAULT_OPTIONS = {
+  minScale: 1 / 500000,
+  maxScale: 1 / 5E8,
+  zoomRatio: 1 / 30,
+  width: 150,
+  height: 150,
+  position: 'bottom-left'
+};
+
+/**
+ * A widget for minimap
+ *
+ * To use it, you need to link the widgets' stylesheet to your html webpage. This stylesheet is included in
+ * [itowns bundles](https://github.com/iTowns/itowns/releases) if you downloaded them, or it can be found in
+ * `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it can be found at
+ * [this link](https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css). See
+ * [this example](http://www.itowns-project.org/itowns/examples/#widgets_minimap) for more details.
+ *
+ * @extends Widget
+ *
+ * @property    {HTMLElement}   domElement      An html div containing the minimap.
+ * @property    {HTMLElement}   parentElement   The parent HTML container of `this.domElement`.
+ */
+class Minimap extends Widget {
+  /**
+   * @param   {GlobeView}             view                                    The iTowns view the minimap should be
+                                                                              * linked to. Only {@link GlobeView} is
+                                                                              * supported at the moment.
+   * @param   {ColorLayer}            layer                                   The {@link ColorLayer} that should be
+                                                                              * displayed on the minimap.
+   * @param   {Object}                [options]                               The minimap optional configuration.
+   * @param   {HTMLElement}           [options.parentElement=view.domElement] The parent HTML container of the div
+                                                                              * which contains minimap widgets.
+   * @param   {number}                [options.size]                          The size of the minimap. It is a number
+                                                                              * that describes both width and height
+                                                                              * in pixels of the minimap.
+   * @param   {number}                [options.width=150]                     The width in pixels of the minimap.
+   * @param   {number}                [options.height=150]                    The height in pixels of the minimap.
+   * @param   {string}                [options.position='bottom-left']        Defines which position within the
+                                                                              * `parentElement` the minimap should be
+                                                                              * displayed to. Possible values are
+                                                                              * `top`, `bottom`, `left`, `right`,
+                                                                              * `top-left`, `top-right`, `bottom-left`
+                                                                              * and `bottom-right`. If the input value
+                                                                              * does not match one of these, it will
+                                                                              * be defaulted to `bottom-left`.
+   * @param   {Object}                [options.translate]                     An optional translation of the minimap.
+   * @param   {number}                [options.translate.x=0]                 The minimap translation along the page
+                                                                              * x-axis.
+   * @param   {number}                [options.translate.y=0]                 The minimap translation along the page
+                                                                              * y-axis.
+   * @param   {HTMLElement|string}    [options.cursor]                        An html element or an HTML string
+                                                                              * describing a cursor showing minimap
+                                                                              * view camera target position at the
+                                                                              * center of the minimap.
+   * @param   {number}                [options.minScale=1/2000]               The minimal scale the minimap can reach.
+   * @param   {number}                [options.maxScale=1/1_250_000]          The maximal scale the minimap can reach.
+   * @param   {number}                [options.zoomRatio=1/30]                The ratio between minimap camera zoom
+                                                                              * and view camera zoom.
+   * @param   {number}                [options.pitch=0.28]                    The screen pixel pitch, used to compute
+                                                                              * view and minimap scale.
+   */
+  constructor(view, layer) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    // ---------- BUILD PROPERTIES ACCORDING TO DEFAULT OPTIONS AND OPTIONS PASSED IN PARAMETERS : ----------
+
+    if (!view.isGlobeView) {
+      throw new Error('\'Minimap\' plugin only supports \'GlobeView\'. Therefore, the \'view\' parameter must be a ' + '\'GlobeView\'.');
+    }
+    if (!layer.isColorLayer) {
+      throw new Error('\'layer\' parameter form \'Minimap\' constructor should be a \'ColorLayer\'.');
+    }
+    super(view, options, DEFAULT_OPTIONS);
+    this.minScale = options.minScale || DEFAULT_OPTIONS.minScale;
+    this.maxScale = options.maxScale || DEFAULT_OPTIONS.maxScale;
+
+    // TODO : it could be interesting to be able to specify a method as zoomRatio parameter. This method could
+    //  return a zoom ratio from the scale of the minimap.
+    this.zoomRatio = options.zoomRatio || DEFAULT_OPTIONS.zoomRatio;
+
+    // ---------- this.domElement SETTINGS SPECIFIC TO MINIMAP : ----------
+
+    this.domElement.id = 'widgets-minimap';
+
+    // Display a cursor at the center of the minimap, if requested.
+    if (options.cursor) {
+      // Wrap cursor domElement inside a div to center it in minimap.
+      const cursorWrapper = document.createElement('div');
+      cursorWrapper.id = 'cursor-wrapper';
+      this.domElement.appendChild(cursorWrapper);
+
+      // Add specified cursor to its wrapper.
+      if (typeof options.cursor === 'string') {
+        cursorWrapper.innerHTML = options.cursor;
+      } else if (options.cursor instanceof HTMLElement) {
+        cursorWrapper.appendChild(options.cursor);
+      }
+    }
+
+    // ---------- CREATE A MINIMAP View AND DISPLAY DATA PASSED IN Layer PARAMETER : ----------
+
+    this.view = new PlanarView(this.domElement, layer.source.extent, {
+      camera: {
+        type: CAMERA_TYPE.ORTHOGRAPHIC
+      },
+      placement: layer.source.extent,
+      // TODO : the default placement should be the view extent for ortho camera
+      noControls: true,
+      maxSubdivisionLevel: view.tileLayer.maxSubdivisionLevel,
+      disableFocusOnStart: true
+    });
+    this.view.addLayer(layer); // TODO : should this promise be returned by constructor so that user can use it ?
+
+    // Prevent the minimap domElement to get focus when clicked, and prevent click event to be propagated to the
+    // main view controls.
+    this.domElement.addEventListener('pointerdown', event => {
+      event.preventDefault();
+    });
+
+    // ---------- UPDATE MINIMAP VIEW WHEN UPDATING THE MAIN VIEW : ----------
+
+    // The minimal and maximal value the minimap camera3D zoom can reach in order to stay in the scale limits.
+    const initialScale = this.view.getScale(options.pitch);
+    const minZoom = this.view.camera3D.zoom * this.maxScale / initialScale;
+    const maxZoom = this.view.camera3D.zoom * this.minScale / initialScale;
+
+    // Coordinates used to transform position vectors from the main view CRS to the minimap view CRS.
+    const mainViewCoordinates = new Coordinates(view.referenceCrs);
+    const viewCoordinates = new Coordinates(this.view.referenceCrs);
+    const targetPosition = view.controls.getCameraTargetPosition();
+    view.addFrameRequester(MAIN_LOOP_EVENTS.AFTER_RENDER, () => {
+      // Update minimap camera zoom
+      const distance = view.camera3D.position.distanceTo(targetPosition);
+      const scale = view.getScaleFromDistance(options.pitch, distance);
+      this.view.camera3D.zoom = this.zoomRatio * maxZoom * scale / this.minScale;
+      this.view.camera3D.zoom = Math.min(Math.max(this.view.camera3D.zoom, minZoom), maxZoom);
+      this.view.camera3D.updateProjectionMatrix();
+
+      // Update minimap camera position.
+      mainViewCoordinates.setFromVector3(view.controls.getCameraTargetPosition());
+      mainViewCoordinates.as(this.view.referenceCrs, viewCoordinates);
+      this.view.camera3D.position.x = viewCoordinates.x;
+      this.view.camera3D.position.y = viewCoordinates.y;
+      this.view.camera3D.updateMatrixWorld(true);
+      this.view.notifyChange(this.view.camera3D);
+    });
+  }
+}
+export default Minimap;

package/lib/Utils/gui/Navigation.js

@@ -0,0 +1,245 @@
+import { VIEW_EVENTS } from 'itowns';
+import Widget from "./Widget.js";
+const DEFAULT_OPTIONS = {
+  displayCompass: true,
+  display3DToggle: true,
+  displayZoomIn: true,
+  displayZoomOut: true,
+  animationDuration: 500,
+  position: 'bottom-left',
+  direction: 'column'
+};
+const DEFAULT_BUTTONS = {
+  compass: {
+    id: 'compass',
+    content: '',
+    info: 'Rotate the camera to face North',
+    parentId: 'widgets'
+  },
+  toggle3D: {
+    id: '3d-button',
+    content: '3D',
+    info: 'Tilt the camera'
+  },
+  zoomIn: {
+    id: 'zoom-in-button',
+    content: '<span class="widget-zoom-button-logo"></span>',
+    info: 'Zoom in',
+    parentId: 'zoom-button-bar'
+  },
+  zoomOut: {
+    id: 'zoom-out-button',
+    content: '<span id="zoom-out-logo" class="widget-zoom-button-logo"></span>',
+    info: 'Zoom out',
+    parentId: 'zoom-button-bar'
+  }
+};
+
+/**
+ * A widget menu manager for navigation.
+ *
+ * To use it, you need to link the widgets' stylesheet to your html webpage. This stylesheet is included in
+ * [itowns bundles](https://github.com/iTowns/itowns/releases) if you downloaded them, or it can be found in
+ * `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it can be found at
+ * [this link](https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css). See
+ * [this example](http://www.itowns-project.org/itowns/examples/#widgets_navigation) for more details.
+ *
+ * @extends Widget
+ *
+ * @property {HTMLElement}          domElement      An html div containing all navigation widgets.
+ * @property {HTMLElement}          parentElement   The parent HTML container of `this.domElement`.
+ * @property {HTMLButtonElement}    compass         The HTML button for the compass.
+ * @property {HTMLButtonElement}    toggle3D        The HTML button for the 3D/2D toggle button.
+ * @property {HTMLButtonElement}    zoomIn          The HTML button for the zoom-in button.
+ * @property {HTMLButtonElement}    zoomOut         The HTML button for the zoom-out button.
+ *
+ * @example
+ * // Create a Navigation widget in the bottom-right corner of an iTowns view domElement
+ * const navigation = new Navigation(view, { position: 'bottom-right' };
+ *
+ * // Change the tooltip for the compass :
+ * navigation.compass.title = 'new tooltip';
+ *
+ * // Change the method ran when clicking zoom-in button :
+ * function newMethod() {
+ *     // do something
+ * }
+ * navigation.zoomIn.onclick = newMethod;
+ */
+class Navigation extends Widget {
+  #_view;
+  #_action(params) {
+    params.time = this.animationDuration;
+    return this.#_view.controls.lookAtCoordinate(params);
+  }
+  #_addDefaultButton(settings, onclick) {
+    return this.addButton(settings.id, settings.content, settings.info, onclick, settings.parentId);
+  }
+
+  /**
+   * @param   {GlobeView}     view                                    The iTowns view the navigation should be linked
+                                                                      * to. For the moment, only `{@link GlobeView}`
+                                                                      * is supported.
+   * @param   {Object}        options                                 The navigation menu optional configuration.
+   * @param   {HTMLElement}   [options.parentElement=view.domElement] The parent HTML container of the div which
+                                                                      * contains navigation widgets.
+   * @param   {boolean}       [options.displayCompass=true]           Whether the compass widget should be displayed.
+   * @param   {boolean}       [options.display3DToggle=true]          Whether the navigation should include a widget
+                                                                      * to toggle between top and oblique view.
+   * @param   {boolean}       [options.displayZoomIn=true]            Whether the zoom-in widget should be displayed.
+   * @param   {boolean}       [options.displayZoomOut=true]           Whether the zoom-out widget should be displayed.
+   * @param   {number}        [options.animationDuration=500]         The duration of travel animations, when clicking
+                                                                      * navigation widgets.
+   * @param   {string}        [options.position='bottom-left']        Defines which corner of the `parentElement` the
+                                                                      * navigation menu should be displayed to.
+                                                                      * Possible values are `top-left`, `top-right`,
+                                                                      * `bottom-left` and `bottom-right`. If the input
+                                                                      * value does not match one of these, it will be
+                                                                      * defaulted to `bottom-left`.
+   * @param   {string}        [options.direction='column']            Whether the navigation menu should expand
+                                                                      * horizontally or vertically. Possible values
+                                                                      * are `column` and `row`. If the input value
+                                                                      * does not match one of these, it will be
+                                                                      * defaulted to `column`.
+   * @param   {Object}        [options.translate]                     An optional translation of the navigation menu.
+   * @param   {number}        [options.translate.x=0]                 The navigation menu translation along the page
+                                                                      * x-axis.
+   * @param   {number}        [options.translate.y=0]                 The navigation menu translation along the page
+                                                                      * y-axis.
+   */
+  constructor(view) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    // ---------- BUILD PROPERTIES ACCORDING TO DEFAULT OPTIONS AND OPTIONS PASSED IN PARAMETERS : ----------
+
+    // Check if the view is supported.
+    if (!view.isGlobeView) {
+      throw new Error('\'Navigation\' plugin only supports \'GlobeView\'. Therefore, the \'view\' parameter must be a ' + '\'GlobeView\'.');
+    }
+
+    // `top`, `bottom`, `left` and `right` values for `position` option are not relevant for navigation widget.
+    if (['top', 'bottom', 'left', 'right'].includes(options.position)) {
+      console.warn('\'position\' optional parameter for \'Navigation\' is not a valid option. ' + `It will be set to '${DEFAULT_OPTIONS.position}'.`);
+      options.position = DEFAULT_OPTIONS.position;
+    }
+    super(view, options, DEFAULT_OPTIONS);
+    this.#_view = view;
+    this.direction = options.direction || DEFAULT_OPTIONS.direction;
+    if (!['column', 'row'].includes(this.direction)) {
+      console.warn('\'direction\' optional parameter for \'Navigation\' constructor is not a valid option. ' + `It will be set to '${DEFAULT_OPTIONS.direction}'.`);
+      this.direction = DEFAULT_OPTIONS.direction;
+    }
+    this.animationDuration = options.animationDuration === undefined ? DEFAULT_OPTIONS.animationDuration : options.animationDuration;
+
+    // ---------- CREATE A DomElement WITH id AND classes RELEVANT TO THE WIDGET PROPERTIES : ----------
+
+    // Create a div containing all widgets and add it to its specified parent.
+    this.domElement.id = 'widgets-navigation';
+
+    // Position widget div according to options.
+    this.domElement.classList.add(`${this.direction}-widget`);
+
+    // ---------- CREATE THE DEFAULT WIDGETS IF NOT HIDDEN (COMPASS, 3D AND ZOOM BUTTONS) : ----------
+
+    // Add a compass widget if requested.
+    if (options.displayCompass ?? DEFAULT_OPTIONS.displayCompass) {
+      this.compass = this.#_addDefaultButton(DEFAULT_BUTTONS.compass, () => {
+        this.#_action({
+          heading: 0,
+          tilt: 89.5
+        });
+      });
+
+      // Manage compass rotation when the view's camera is moved.
+      view.addEventListener(VIEW_EVENTS.CAMERA_MOVED, event => {
+        this.compass.style.transform = `rotate(${-event.heading}deg)`;
+      });
+    }
+
+    // Add a 3D toggle button if requested.
+    if (options.display3DToggle ?? DEFAULT_OPTIONS.display3DToggle) {
+      this.toggle3D = this.#_addDefaultButton(DEFAULT_BUTTONS.toggle3D, () => {
+        this.#_action({
+          tilt: this.#_view.controls.getTilt() < 89 ? 89.5 : 40
+        });
+      });
+
+      // Manage button content toggle when the view's camera is moved.
+      view.addEventListener(VIEW_EVENTS.CAMERA_MOVED, event => {
+        this.toggle3D.innerHTML = event.tilt < 89 ? '2D' : '3D';
+      });
+    }
+
+    // Add a zoom-in button if requested.
+    if (options.displayZoomIn ?? DEFAULT_OPTIONS.displayZoomIn) {
+      this.zoomIn = this.#_addDefaultButton(DEFAULT_BUTTONS.zoomIn, () => {
+        this.#_action({
+          zoom: Math.min(20, this.#_view.controls.getZoom() + 1)
+        });
+      });
+    }
+
+    // Add a zoom-out button if requested.
+    if (options.displayZoomOut ?? DEFAULT_OPTIONS.displayZoomOut) {
+      this.zoomOut = this.#_addDefaultButton(DEFAULT_BUTTONS.zoomOut, () => {
+        this.#_action({
+          zoom: Math.max(3, this.#_view.controls.getZoom() - 1)
+        });
+      });
+    }
+  }
+
+  /**
+   *
+   * @param   {string}    id              The unique id the created button should be given.
+   * @param   {string}    [content='']    An HTML string defining the content of the button.
+   * @param   {string}    [title='']      An HTML string defining information on the button. This string will be
+                                          * displayed in a tooltip when hovering the button.
+   * @param   {function}  [onclick] The method that should be executed when the button is clicked on.
+   * @param   {string}    [parentId]      The unique id of a button bar in which the created button should be added.
+                                          * A button bar is a group which contains one or several buttons. All
+                                          * buttons created with Navigation are in a button bar. If the given id does
+                                          * not match an already existing button bar, a new button bar will be created
+                                          * with this id. If no id is given, a button bar will be created with no id.
+                                          * The later case can be useful for creating isolated buttons.
+   *
+   * @returns {HTMLButtonElement}     The created button.
+   */
+  addButton(id) {
+    let content = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    let title = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    let onclick = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
+    let parentId = arguments.length > 4 ? arguments[4] : undefined;
+    let buttonBar = document.getElementById(parentId);
+    if (!buttonBar) {
+      buttonBar = this.addButtonBar(parentId);
+    }
+    const button = document.createElement('button');
+    button.className = 'widget-button';
+    button.id = id;
+    button.innerHTML = content;
+    button.title = title;
+    button.onclick = onclick;
+    buttonBar.appendChild(button);
+
+    // The buttons must not be focused using tab key.
+    button.tabIndex = -1;
+    // When releasing the mouse after clicking the button, we give the focus back to the view. Therefore, we can use
+    // key events on the view without having to click the view to grant it focus.
+    window.addEventListener('pointerup', () => {
+      if (document.activeElement === button) {
+        this.#_view.domElement.focus();
+      }
+    });
+    return button;
+  }
+  addButtonBar(id) {
+    const buttonBar = document.createElement('div');
+    buttonBar.className = 'widget-button-bar';
+    if (id) {
+      buttonBar.id = id;
+    }
+    this.domElement.appendChild(buttonBar);
+    return buttonBar;
+  }
+}
+export default Navigation;