@oiz/stzh-components 2.0.0 → 2.1.0-beta

package/dist/collection/components/stzh-olmap/stzh-olmap.js

@@ -0,0 +1,1042 @@
+import { Host, h } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
+// map dependencies
+import Proj4 from "proj4";
+window.proj4 = Proj4;
+window.proj4.defs("EPSG:2056", "+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs");
+import OlGeolocation from "ol/geolocation.js";
+import OlMap from "ol/map.js";
+// import OlOverlay from "ol/overlay.js";
+import OlExtent from "ol/extent.js";
+import OlView from "ol/view.js";
+// import OlAttribution from "ol/attribution.js";
+import OlFeature from "ol/feature";
+// import OlProj from "ol/proj";
+import OlProjProjection from "ol/proj/projection";
+import OlSourceWmts from "ol/source/wmts.js";
+import OlSourceVector from "ol/source/vector.js";
+import OlGeomPoint from "ol/geom/point.js";
+import OlLayerTile from "ol/layer/tile.js";
+import OlLayerVector from "ol/layer/vector.js";
+import OlControl from "ol/control";
+import OlControlScaleLine from "ol/control/scaleline";
+import OlControlControl from "ol/control/control";
+import OlTilegridWmts from "ol/tilegrid/wmts";
+import OlInteraction from "ol/interaction";
+import OlStyleStyle from "ol/style/style";
+import OlStyleIcon from "ol/style/icon";
+const STYLES_MARKER_ICON = {
+  anchor: [0.5, 1],
+  anchorXUnits: "fraction",
+  anchorYUnits: "fraction",
+  scale: .5,
+  src: `${window.stzhComponents.pathMedia}/olmap/marker.png`
+};
+const STYLES_ACTIVE_MARKER_ICON = Object.assign(Object.assign({}, STYLES_MARKER_ICON), { src: `${window.stzhComponents.pathMedia}/olmap/marker-active.png` });
+const STYLES_POSITION_MARKER_ICON_STYLES = Object.assign(Object.assign({}, STYLES_MARKER_ICON), { anchor: [0.5, 0.5], src: `${window.stzhComponents.pathMedia}/olmap/marker-position.png` });
+/**
+ *
+ */
+export class StzhOlmap {
+  constructor() {
+    this.handlePostRender = () => {
+      this.stzhPostRender.emit({
+        component: "stzh-olmap"
+      });
+    };
+    this.handleMoveStart = () => {
+      this.stzhMoveStart.emit({
+        component: "stzh-olmap"
+      });
+    };
+    this.handleMoveEnd = () => {
+      this.stzhMoveEnd.emit({
+        component: "stzh-olmap"
+      });
+    };
+    this.handleInsideModalOpen = () => {
+      if (this.map) {
+        requestAnimationFrame(() => {
+          this.map.updateSize();
+        });
+      }
+    };
+    this.handlePrintButtonClick = () => {
+      // TODO: check with client if print is still needed and if related contact component needs to be printed too
+      if (!this.printIframe) {
+        this.printIframe = document.createElement("iframe");
+        Object.assign(this.printIframe.style, {
+          "height": "0px",
+          "width": "0px",
+          "position": "absolute",
+          "border": "none"
+        });
+        this.element.append(this.printIframe);
+      }
+      // empty iframe
+      this.printIframe.innerHTML = "";
+      const printWindow = this.printIframe.contentWindow;
+      const componentCss = this.constructor.style.replace('@charset "UTF-8";', "");
+      const globalCssLinks = Array.from(document.querySelectorAll("link")).map((node) => node.outerHTML);
+      let img;
+      this.map.once("postcompose", function (event) {
+        const canvas = event.context.canvas;
+        img = canvas.toDataURL("image/png");
+      });
+      this.map.renderSync();
+      printWindow.document.body.innerHTML = `
+      ${globalCssLinks.join("")}
+
+      <style type="text/css">
+        ${componentCss}
+      </style>
+
+      <div class="stzh-olmap__map stzh-olmap__map--print">
+        <img class="stzh-olmap__print-image" src="${img}" alt="">
+        ${this.element.querySelector(".ol-scale-line.ol-unselectable").outerHTML}
+      </div>
+    `;
+      // printWindow.document.write('<div class="mod_contact">');
+      // const contact = this.element.closest('.mod_contact');
+      // if (contact) {
+      //   const contactCard = contact.querySelector('.mod_contactcard');
+      //   printWindow.document.write('<div class="mod_contactcard">');
+      //   printWindow.document.write(contactCard.innerHTML);
+      //   printWindow.document.write('</div>');
+      // }
+      // printWindow.document.write('<div class="stzh-olmap__map stzh-olmap__map--print">');
+      // printWindow.document.write('<img class="stzh-olmap__print-image" src="' + img + '" alt="">');
+      // printWindow.document.write(this.element.querySelector('.ol-scale-line.ol-unselectable').outerHTML);
+      // printWindow.document.write('</div>');
+      // printWindow.document.write('</div>');
+      // printWindow.document.close();
+      setTimeout(() => {
+        // acts as a bugfix for IE 11
+        // https://stackoverflow.com/questions/24673024/unable-to-print-iframe-content-from-parent-page-in-ie-11
+        try {
+          printWindow.document.execCommand("print", false, null);
+        }
+        catch (e) {
+          printWindow.print();
+        }
+      }, 1000);
+    };
+    this.localization = undefined;
+    this.hostname = "www.ogc.stadt-zuerich.ch";
+    this.scaleControl = true;
+    this.layerControl = true;
+    this.printControl = true;
+    this.locationControl = false;
+    this.layer = "streets";
+    this.zoom = 7;
+    this.center = [2683311, 1247082];
+    this.centerMarker = true;
+    this.resolutions = [
+      67.73333333333,
+      33.8666666667,
+      16.9333333333,
+      8.4666666667,
+      4.2333333333,
+      2.1166666667,
+      1.0583333333,
+      0.5291666667,
+      0.2645833333,
+      0.1322916667,
+      0.0661458333
+    ];
+    this.layers = {
+      streets: {
+        thumbnailUrl: `${window.stzhComponents.pathMedia}/olmap/thumb-streets.jpg`,
+        options: {
+          url: "https://{Hostname}/mapproxy/wmts/1.0.0/{Layer}/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
+          layer: "basiskarte_zuerich_gebaeudeschraegansicht",
+          matrixSet: "ktzh",
+          origin: [2480237.0, 1315832.0],
+          extent: [2666867.00, 1220962.00, 2719695.50, 1285537.00]
+        }
+      },
+      satellite: {
+        thumbnailUrl: `${window.stzhComponents.pathMedia}/olmap/thumb-satellite.jpg`,
+        options: {
+          url: "https://{Hostname}/mapproxy/wmts/1.0.0/{Layer}/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
+          layer: "orthofoto",
+          matrixSet: "ktzh",
+          origin: [2480237.0, 1315832.0],
+          extent: [2666867.0, 1220962.0, 2719695.5, 1285537.0]
+        }
+      }
+    };
+  }
+  zoomWatcher(newValue) {
+    if (this.map) {
+      this.map.getView().setZoom(newValue);
+    }
+  }
+  scaleControlWatcher(newValue) {
+    if (!this.map) {
+      return;
+    }
+    if (newValue) {
+      this.scaleControlOl = new OlControlScaleLine({
+        units: "metric"
+      });
+      this.map.addControl(this.scaleControlOl);
+    }
+    else {
+      if (this.scaleControl) {
+        this.map.removeControl(this.scaleControlOl);
+      }
+      this.scaleControlOl = null;
+    }
+  }
+  printControlWatcher(newValue) {
+    if (!this.map) {
+      return;
+    }
+    if (newValue) {
+      this.printControlElement = document.createElement("button");
+      this.printControlElement.className = "ol-print";
+      this.printControlElement.ariaLabel = this.localization.printLabel;
+      this.printControlElement.addEventListener("click", this.handlePrintButtonClick);
+      this.printControlElement.innerHTML = '<stzh-icon name="print" class="ol-print__icon"></stzh-icon>';
+      this.printControlOl = new OlControlControl({
+        element: this.printControlElement
+      });
+      this.map.addControl(this.printControlOl);
+    }
+    else {
+      if (this.printControlOl) {
+        this.map.removeControl(this.printControlOl);
+      }
+      this.printControlOl = null;
+      this.printControlElement = null;
+    }
+  }
+  layerControlWatcher(newValue) {
+    if (!this.map || this.layersArray.length === 1) {
+      return;
+    }
+    if (newValue) {
+      this.layerControlElement = document.createElement("button");
+      this.layerControlElement.className = "ol-layer";
+      this.layerControlElement.addEventListener("click", () => {
+        this.layer = this.layer === "streets" ? "satellite" : "streets";
+      });
+      this.layerControlImageElement = document.createElement("img");
+      this.layerControlImageElement.className = "ol-layer__thumbnail";
+      this.layerControlImageElement.setAttribute("role", "presentation");
+      this.layerControlImageElement.setAttribute("alt", "");
+      this.layerControlTextElement = document.createElement("span");
+      this.layerControlTextElement.className = "ol-layer__text";
+      this.layerControlElement.appendChild(this.layerControlImageElement);
+      this.layerControlElement.appendChild(this.layerControlTextElement);
+      this.layerControlOl = new OlControlControl({
+        element: this.layerControlElement
+      });
+      this.map.addControl(this.layerControlOl);
+    }
+    else {
+      if (this.layerControlOl) {
+        this.map.removeControl(this.layerControlOl);
+      }
+      this.layerControlOl = null;
+      this.layerControlElement = null;
+      this.layerControlImageElement = null;
+      this.layerControlTextElement = null;
+    }
+  }
+  locationControlWatcher(newValue) {
+    if (!this.map) {
+      return;
+    }
+    if (newValue) {
+      this.locationControlElement = document.createElement("button");
+      this.locationControlElement.className = "ol-location";
+      this.locationControlElement.innerHTML = '<stzh-icon name="target-bullet" class="ol-location__icon"></stzh-icon>';
+      this.locationControlElement.addEventListener("click", () => {
+        const isTracking = this.geolocation.getTracking();
+        if (isTracking) {
+          this.disableLocationTracking();
+        }
+        else {
+          this.enableLocationTracking();
+        }
+      });
+      this.locationControlOl = new OlControlControl({
+        element: this.locationControlElement
+      });
+      this.geolocation = new OlGeolocation({
+        // take the projection to use from the map's view
+        projection: this.map.getView().getProjection()
+      });
+      this.positionMarkerOl = new OlFeature();
+      this.positionMarkerOl.setId("position");
+      const iconStyle = new OlStyleStyle({
+        image: new OlStyleIcon(STYLES_POSITION_MARKER_ICON_STYLES)
+      });
+      this.positionMarkerOl.setStyle(iconStyle);
+      this.positionLayer.getSource().addFeature(this.positionMarkerOl);
+      // listen to changes in position
+      this.geolocation.on("change:position", () => {
+        const position = this.geolocation.getPosition();
+        this.positionMarkerOl.setGeometry(new OlGeomPoint(position));
+        // if position is within map, we center to it
+        if (OlExtent.containsExtent(this.layers[this.layer].options.extent, this.positionMarkerOl.getGeometry().getExtent())) {
+          this.map.getView().setCenter(position);
+        }
+      });
+      this.geolocation.on("change:tracking", () => {
+        const isTracking = this.geolocation.getTracking();
+        // reset position
+        this.positionMarkerOl.setGeometry(null);
+        this.setLocationControlState(isTracking);
+      });
+      this.geolocation.on("error", () => {
+        this.setLocationControlState(false);
+      });
+      this.map.addControl(this.locationControlOl);
+    }
+    else {
+      this.disableLocationTracking();
+      if (this.locationControlOl) {
+        this.map.removeControl(this.locationControlOl);
+      }
+      if (this.positionMarkerOl) {
+        this.positionLayer.getSource().removeFeature(this.positionMarkerOl);
+      }
+      this.locationControlOl = null;
+      this.locationControlElement = null;
+      this.geolocation = null;
+      this.positionMarkerOl = null;
+    }
+  }
+  layerWatcher(newValue) {
+    if (!this.map) {
+      return;
+    }
+    Object.entries(this.rasterLayers).forEach(([key, layer]) => {
+      if (key === newValue) {
+        layer.setVisible(true);
+        this.map.getView().set("projection", this.projections[newValue]);
+        const inactiveLayer = this.layersArray.find(([key]) => key !== this.layer);
+        if (inactiveLayer) {
+          if (this.layerControlImageElement) {
+            this.layerControlImageElement.src = inactiveLayer[1].thumbnailUrl;
+          }
+          if (this.layerControlTextElement) {
+            let defaultTitle = "";
+            if (key === "streets") {
+              defaultTitle = this.localization.streetsLayerTitle;
+            }
+            else if (key === "satellite") {
+              defaultTitle = this.localization.satelliteLayerTitle;
+            }
+            this.layerControlTextElement.textContent = inactiveLayer[1].title || defaultTitle;
+          }
+        }
+      }
+      else {
+        layer.setVisible(false);
+      }
+    });
+  }
+  centerWatcher(newValue) {
+    this.map.getView().setCenter(newValue);
+    if (this.centerMarkerOl) {
+      this.centerMarkerOl.setGeometry(new OlGeomPoint(newValue));
+    }
+  }
+  async centerMarkerWatcher(newValue) {
+    if (newValue) {
+      // add marker in the center position
+      this.centerMarkerOl = await this.addIconMarker(this.center);
+    }
+    else if (this.centerMarkerOl) {
+      this.removeIconMarker(this.centerMarkerOl);
+    }
+  }
+  /** Get map */
+  async getMap() {
+    return this.map;
+  }
+  /** Add a icon marker to the icon layer. */
+  async addIconMarker(coordinates) {
+    const marker = new OlFeature({
+      geometry: new OlGeomPoint(coordinates)
+    });
+    const iconStyle = new OlStyleStyle({
+      image: new OlStyleIcon(STYLES_MARKER_ICON)
+    });
+    marker.setStyle(iconStyle);
+    this.iconLayer.getSource().addFeature(marker);
+    return marker;
+  }
+  /** Remove icon marker from icon layer. */
+  async removeIconMarker(marker) {
+    return this.iconLayer.getSource().removeFeature(marker);
+  }
+  /** Set icon marker as active. */
+  async setIconMarkerActive(marker) {
+    marker.setStyle(new OlStyleStyle({
+      image: new OlStyleIcon(STYLES_ACTIVE_MARKER_ICON)
+    }));
+  }
+  /** Set icon marker as inactive. */
+  async setIconMarkerInactive(marker) {
+    marker.setStyle(new OlStyleStyle({
+      image: new OlStyleIcon(STYLES_MARKER_ICON)
+    }));
+  }
+  /** Enable user location tracking */
+  async enableLocationTracking() {
+    this.setLocationControlState(true);
+    if (this.geolocation) {
+      this.geolocation.setTracking(true);
+    }
+  }
+  /** Disable user location tracking */
+  async disableLocationTracking() {
+    this.setLocationControlState(false);
+    if (this.geolocation) {
+      this.geolocation.setTracking(false);
+    }
+  }
+  setLocationControlState(active) {
+    if (this.positionLayer) {
+      this.positionLayer.setVisible(active);
+    }
+    if (this.locationControlElement) {
+      this.locationControlElement.classList.toggle("active", active);
+    }
+  }
+  createMap() {
+    const zoomIn = document.createElement("stzh-icon");
+    zoomIn.ariaLabel = this.localization.zoomInLabel;
+    zoomIn.name = "plus";
+    const zoomOut = document.createElement("stzh-icon");
+    zoomOut.ariaLabel = this.localization.zoomOutLabel;
+    zoomOut.name = "minus";
+    const map = new OlMap({
+      controls: OlControl.defaults({
+        zoomOptions: {
+          zoomInLabel: zoomIn,
+          zoomOutLabel: zoomOut,
+          zoomInTipLabel: "",
+          zoomOutTipLabel: ""
+        }
+      }),
+      interactions: OlInteraction.defaults({
+        mouseWheelZoom: false
+      }),
+      loadTilesWhileAnimating: true,
+      loadTilesWhileInteracting: true,
+      target: this.mapElement,
+      logo: false
+    });
+    return map;
+  }
+  createRasterLayer(key, options) {
+    return new OlLayerTile({
+      title: "wmts",
+      type: "base",
+      extent: options.extent,
+      source: this.createLayerSource(key, options)
+    });
+  }
+  createLayerSource(key, options) {
+    if (!this.projections) {
+      this.projections = {};
+    }
+    this.projections[key] = new OlProjProjection({
+      code: "EPSG:2056",
+      extent: options.extent
+    });
+    return this.creatRasterSource(key, options);
+  }
+  creatRasterSource(key, options) {
+    const { url, layer, matrixSet, origin } = options;
+    const matrixIds = [];
+    for (let i = 0; i < this.resolutions.length; i++) {
+      matrixIds.push(i);
+    }
+    const tileGrid = new OlTilegridWmts({
+      origin,
+      resolutions: this.resolutions,
+      matrixIds,
+      tileSize: [512, 512]
+    });
+    return new OlSourceWmts(({
+      url,
+      tileGrid: tileGrid,
+      style: "default",
+      projection: this.projections[key],
+      crossOrigin: "anonymous",
+      layer,
+      matrixSet,
+      requestEncoding: "REST"
+    }));
+  }
+  createIconLayer() {
+    return new OlLayerVector({
+      source: new OlSourceVector({})
+    });
+  }
+  initMap() {
+    this.map = this.createMap();
+    // events from https://openlayers.org/en/v4.6.5/apidoc/ol.Map.html
+    this.map.on("postrender", this.handlePostRender);
+    this.map.on("movestart", this.handleMoveStart);
+    this.map.on("moveend", this.handleMoveEnd);
+    this.layersArray = Object.entries(this.layers);
+    if (this.layersArray.length > 2) {
+      throw new Error("There are only two different layers allowed.");
+    }
+    this.rasterLayers = {};
+    this.layersArray.forEach(([key, layer]) => {
+      layer.options.url = layer.options.url.replace(/{hostname}/gi, this.hostname);
+      this.rasterLayers[key] = this.createRasterLayer(key, layer.options);
+      this.map.addLayer(this.rasterLayers[key]);
+    });
+    // add the VectorLayer which is used for adding the position marker to the map
+    // (above raster layers)
+    this.positionLayer = this.createIconLayer();
+    this.positionLayer.setVisible(false);
+    this.map.addLayer(this.positionLayer);
+    // add the VectorLayer which is used for adding icon markers to the map
+    // (above raster and position marker layer)
+    this.iconLayer = this.createIconLayer();
+    this.map.addLayer(this.iconLayer);
+    const view = new OlView({
+      center: this.center,
+      projection: this.projections[this.layer],
+      zoom: this.zoom,
+      resolutions: this.resolutions
+    });
+    this.map.setView(view);
+    this.scaleControlWatcher(this.scaleControl);
+    this.printControlWatcher(this.printControl);
+    this.locationControlWatcher(this.locationControl);
+    this.layerControlWatcher(this.layerControl);
+    this.layerWatcher(this.layer);
+    this.centerWatcher(this.center);
+    this.centerMarkerWatcher(this.centerMarker);
+    this.stzhInitialized.emit({
+      component: "stzh-olmap"
+    });
+  }
+  componentShouldUpdate(_newValue, _oldValue, prop) {
+    return ["hostname", "localization", "layers", "resolutions"].includes(prop);
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "olmap");
+    }
+  }
+  componentWillUpdate() {
+    if (this.map) {
+      this.map.setTarget(null);
+      this.map = null;
+    }
+  }
+  componentDidRender() {
+    if (this.map) {
+      return;
+    }
+    this.initMap();
+  }
+  connectedCallback() {
+    const dialog = this.element.closest("stzh-dialog");
+    if (dialog) {
+      dialog.addEventListener("stzhOpen", this.handleInsideModalOpen);
+    }
+  }
+  disconnectedCallback() {
+    if (this.map) {
+      this.map.setTarget(null);
+      this.map = null;
+    }
+    const dialog = this.element.closest("stzh-dialog");
+    if (dialog) {
+      dialog.removeEventListener("stzhOpen", this.handleInsideModalOpen);
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-olmap": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { ref: (el) => (this.mapElement = el), class: "stzh-olmap__map" }))));
+  }
+  static get is() { return "stzh-olmap"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-olmap.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-olmap.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhOlmapLocalizedText",
+          "resolved": "StzhLocaleComponent & { streetsLayerTitle: string; satelliteLayerTitle: string; printLabel: string; zoomInLabel: string; zoomOutLabel: string; locationEnableLabel: string; locationDisableLabel: string; }",
+          "references": {
+            "StzhOlmapLocalizedText": {
+              "location": "import",
+              "path": "./stzh-olmap.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "hostname": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hostname"
+        },
+        "attribute": "hostname",
+        "reflect": false,
+        "defaultValue": "\"www.ogc.stadt-zuerich.ch\""
+      },
+      "scaleControl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether map scale should be shown"
+        },
+        "attribute": "scale-control",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "layerControl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether map layer switch control is shown"
+        },
+        "attribute": "layer-control",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "printControl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether map should be printable"
+        },
+        "attribute": "print-control",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "locationControl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether map should have a location control"
+        },
+        "attribute": "location-control",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "layer": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active layer (`streets` or `satellite` can be used with default `layers` prop value)"
+        },
+        "attribute": "layer",
+        "reflect": false,
+        "defaultValue": "\"streets\""
+      },
+      "zoom": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Zoom"
+        },
+        "attribute": "zoom",
+        "reflect": false,
+        "defaultValue": "7"
+      },
+      "center": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "[number, number]",
+          "resolved": "[number, number]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Initial center position"
+        },
+        "defaultValue": "[2683311, 1247082]"
+      },
+      "centerMarker": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to display an icon marker in the center"
+        },
+        "attribute": "center-marker",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "resolutions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Resolutions"
+        },
+        "defaultValue": "[\n    67.73333333333,\n    33.8666666667,\n    16.9333333333,\n    8.4666666667,\n    4.2333333333,\n    2.1166666667,\n    1.0583333333,\n    0.5291666667,\n    0.2645833333,\n    0.1322916667,\n    0.0661458333\n  ]"
+      },
+      "layers": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | { [key: string]: OlmapLayer }",
+          "resolved": "string | { [key: string]: OlmapLayer; }",
+          "references": {
+            "OlmapLayer": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Layers (maximum of two).\n\nDefault layers `streets` and `satellite` are defined.\nIf `streets` or `satellite` is used as key, they will have a default filled `title`."
+        },
+        "attribute": "layers",
+        "reflect": false,
+        "defaultValue": "{\n    streets: {\n      thumbnailUrl: `${window.stzhComponents.pathMedia}/olmap/thumb-streets.jpg`,\n      options: {\n        url: \"https://{Hostname}/mapproxy/wmts/1.0.0/{Layer}/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png\",\n        layer: \"basiskarte_zuerich_gebaeudeschraegansicht\",\n        matrixSet: \"ktzh\",\n        origin: [2480237.0, 1315832.0],\n        extent: [2666867.00, 1220962.00, 2719695.50, 1285537.00]\n      }\n    },\n    satellite: {\n      thumbnailUrl: `${window.stzhComponents.pathMedia}/olmap/thumb-satellite.jpg`,\n      options: {\n        url: \"https://{Hostname}/mapproxy/wmts/1.0.0/{Layer}/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png\",\n        layer: \"orthofoto\",\n        matrixSet: \"ktzh\",\n        origin: [2480237.0, 1315832.0],\n        extent: [2666867.0, 1220962.0, 2719695.5, 1285537.0]\n      }\n    }\n  }"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhInitialized",
+        "name": "stzhInitialized",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Olmap initialized event"
+        },
+        "complexType": {
+          "original": "StzhOlmapInitializedEvent",
+          "resolved": "{ component: \"stzh-olmap\"; }",
+          "references": {
+            "StzhOlmapInitializedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhPostRender",
+        "name": "stzhPostRender",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Olmap postrender event"
+        },
+        "complexType": {
+          "original": "StzhOlmapPostRenderEvent",
+          "resolved": "{ component: \"stzh-olmap\"; }",
+          "references": {
+            "StzhOlmapPostRenderEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhMoveStart",
+        "name": "stzhMoveStart",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Olmap movestart event"
+        },
+        "complexType": {
+          "original": "StzhOlmapMoveStartEvent",
+          "resolved": "{ component: \"stzh-olmap\"; }",
+          "references": {
+            "StzhOlmapMoveStartEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhMoveEnd",
+        "name": "stzhMoveEnd",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Olmap moveend event"
+        },
+        "complexType": {
+          "original": "StzhOlmapMoveEndEvent",
+          "resolved": "{ component: \"stzh-olmap\"; }",
+          "references": {
+            "StzhOlmapMoveEndEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getMap": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "Get map",
+          "tags": []
+        }
+      },
+      "addIconMarker": {
+        "complexType": {
+          "signature": "(coordinates: number[]) => Promise<any>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "Add a icon marker to the icon layer.",
+          "tags": []
+        }
+      },
+      "removeIconMarker": {
+        "complexType": {
+          "signature": "(marker: any) => Promise<any>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "Remove icon marker from icon layer.",
+          "tags": []
+        }
+      },
+      "setIconMarkerActive": {
+        "complexType": {
+          "signature": "(marker: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Set icon marker as active.",
+          "tags": []
+        }
+      },
+      "setIconMarkerInactive": {
+        "complexType": {
+          "signature": "(marker: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Set icon marker as inactive.",
+          "tags": []
+        }
+      },
+      "enableLocationTracking": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Enable user location tracking",
+          "tags": []
+        }
+      },
+      "disableLocationTracking": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Disable user location tracking",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "zoom",
+        "methodName": "zoomWatcher"
+      }, {
+        "propName": "scaleControl",
+        "methodName": "scaleControlWatcher"
+      }, {
+        "propName": "printControl",
+        "methodName": "printControlWatcher"
+      }, {
+        "propName": "layerControl",
+        "methodName": "layerControlWatcher"
+      }, {
+        "propName": "locationControl",
+        "methodName": "locationControlWatcher"
+      }, {
+        "propName": "layer",
+        "methodName": "layerWatcher"
+      }, {
+        "propName": "center",
+        "methodName": "centerWatcher"
+      }, {
+        "propName": "centerMarker",
+        "methodName": "centerMarkerWatcher"
+      }];
+  }
+}