@open-pioneer/map 0.0.0-dev-20241120114910

package/model/layers/WMSLayerImpl.js

@@ -0,0 +1,297 @@
+import { computed, watch, batch, reactive } from '@conterra/reactivity-core';
+import { createLogger, destroyResource, isAbortError } from '@open-pioneer/core';
+import WMSCapabilities from 'ol/format/WMSCapabilities.js';
+import ImageLayer from 'ol/layer/Image.js';
+import ImageWMS from 'ol/source/ImageWMS.js';
+import { fetchCapabilities } from '../../util/capabilities-utils.js';
+import { AbstractLayer } from '../AbstractLayer.js';
+import { AbstractLayerBase } from '../AbstractLayerBase.js';
+import { SublayersCollectionImpl } from '../SublayersCollectionImpl.js';
+
+const LOG = createLogger("map:WMSLayer");
+class WMSLayerImpl extends AbstractLayer {
+  #url;
+  #sublayers;
+  #layer;
+  #source;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  #capabilities;
+  #abortController = new AbortController();
+  #visibleSublayers;
+  #sublayersWatch;
+  constructor(config) {
+    const layer = new ImageLayer();
+    super({
+      ...config,
+      olLayer: layer
+    });
+    const source = new ImageWMS({
+      ...config.sourceOptions,
+      url: config.url,
+      params: {
+        ...config.sourceOptions?.params
+      },
+      // Use http service to load tiles; needed for authentication etc.
+      imageLoadFunction: (wrapper, url) => {
+        return this.#loadImage(wrapper, url).catch((error) => {
+          LOG.error(`Failed to load tile at '${url}'`, error);
+        });
+      }
+    });
+    this.#url = config.url;
+    this.#source = source;
+    this.#layer = layer;
+    this.#sublayers = new SublayersCollectionImpl(constructSublayers(config.sublayers));
+    this.#visibleSublayers = computed(() => this.#getVisibleLayerNames(), {
+      equal(a, b) {
+        return a.length === b.length && a.every((v, i) => v === b[i]);
+      }
+    });
+    this.#sublayersWatch = watch(
+      () => [this.#visibleSublayers.value],
+      ([layers]) => {
+        this.#updateLayersParam(layers);
+      },
+      {
+        immediate: true
+      }
+    );
+  }
+  destroy() {
+    this.#abortController.abort();
+    this.#sublayersWatch = destroyResource(this.#sublayersWatch);
+    super.destroy();
+  }
+  get type() {
+    return "wms";
+  }
+  get legend() {
+    return void 0;
+  }
+  get url() {
+    return this.#url;
+  }
+  get layers() {
+    return void 0;
+  }
+  get sublayers() {
+    return this.#sublayers;
+  }
+  get capabilities() {
+    return this.#capabilities;
+  }
+  __attachToMap(map) {
+    super.__attachToMap(map);
+    for (const sublayer of this.#sublayers.getSublayers()) {
+      sublayer.__attach(map, this, this);
+    }
+    const getNestedSublayer = (sublayers, layers) => {
+      for (const sublayer of sublayers) {
+        const nested = sublayer.sublayers.getSublayers();
+        if (nested.length) {
+          getNestedSublayer(nested, layers);
+        } else {
+          if (sublayer.name) {
+            layers.push(sublayer);
+          }
+        }
+      }
+    };
+    this.#fetchWMSCapabilities().then((result) => {
+      batch(() => {
+        const parser = new WMSCapabilities();
+        const capabilities = parser.read(result);
+        this.#capabilities = capabilities;
+        const layers = [];
+        getNestedSublayer(this.#sublayers.getSublayers(), layers);
+        for (const layer of layers) {
+          const legendUrl = getWMSLegendUrl(capabilities, layer.name);
+          layer.__setLegend(legendUrl);
+        }
+      });
+    }).catch((error) => {
+      if (isAbortError(error)) {
+        LOG.debug(`Layer ${this.id} has been destroyed before fetching capabilities`);
+        return;
+      }
+      LOG.error(`Failed to fetch WMS capabilities for layer ${this.id}`, error);
+    });
+  }
+  /**
+   * Gathers the visibility of _all_ sublayers and assembles the 'layers' WMS parameter.
+   * The parameters are then applied to the WMS source.
+   */
+  #updateLayersParam(layers) {
+    this.#source.updateParams({
+      "LAYERS": layers
+    });
+    const source = layers.length === 0 ? null : this.#source;
+    if (this.#layer.getSource() !== source) {
+      this.#layer.setSource(source);
+    }
+  }
+  #getVisibleLayerNames() {
+    const layers = [];
+    const visitSublayer = (sublayer) => {
+      if (!sublayer.visible) {
+        return;
+      }
+      const nestedSublayers = sublayer.sublayers.__getRawSublayers();
+      if (nestedSublayers.length) {
+        for (const nestedSublayer of nestedSublayers) {
+          visitSublayer(nestedSublayer);
+        }
+      } else {
+        if (sublayer.name) {
+          layers.push(sublayer.name);
+        }
+      }
+    };
+    for (const sublayer of this.sublayers.__getRawSublayers()) {
+      visitSublayer(sublayer);
+    }
+    return layers;
+  }
+  async #fetchWMSCapabilities() {
+    const httpService = this.map.__sharedDependencies.httpService;
+    const url = `${this.#url}?LANGUAGE=ger&SERVICE=WMS&REQUEST=GetCapabilities`;
+    return fetchCapabilities(url, httpService, this.#abortController.signal);
+  }
+  async #loadImage(imageWrapper, imageUrl) {
+    const httpService = this.map.__sharedDependencies.httpService;
+    const image = imageWrapper.getImage();
+    const response = await httpService.fetch(imageUrl);
+    if (!response.ok) {
+      throw new Error(`Request failed with status ${response.status}.`);
+    }
+    const blob = await response.blob();
+    const objectUrl = URL.createObjectURL(blob);
+    const finish = () => {
+      URL.revokeObjectURL(objectUrl);
+      image.removeEventListener("load", finish);
+      image.removeEventListener("error", finish);
+    };
+    image.addEventListener("load", finish);
+    image.addEventListener("error", finish);
+    image.src = objectUrl;
+  }
+}
+class WMSSublayerImpl extends AbstractLayerBase {
+  #parent;
+  #parentLayer;
+  #name;
+  #legend = reactive();
+  #sublayers;
+  #visible;
+  constructor(config) {
+    super(config);
+    this.#name = config.name;
+    this.#visible = reactive(config.visible ?? true);
+    this.#sublayers = new SublayersCollectionImpl(constructSublayers(config.sublayers));
+  }
+  get type() {
+    return "wms-sublayer";
+  }
+  get name() {
+    return this.#name;
+  }
+  get layers() {
+    return void 0;
+  }
+  get sublayers() {
+    return this.#sublayers;
+  }
+  get parent() {
+    const parent = this.#parent;
+    if (!parent) {
+      throw new Error(`WMS sublayer ${this.id} has not been attached to its parent yet.`);
+    }
+    return parent;
+  }
+  get parentLayer() {
+    const parentLayer = this.#parentLayer;
+    if (!parentLayer) {
+      throw new Error(`WMS sublayer ${this.id} has not been attached to its parent yet.`);
+    }
+    return parentLayer;
+  }
+  get legend() {
+    return this.#legend.value;
+  }
+  get visible() {
+    return this.#visible.value;
+  }
+  /**
+   * Called by the parent layer when it is attached to the map to attach all sublayers.
+   */
+  __attach(map, parentLayer, parent) {
+    super.__attachToMap(map);
+    if (this.#parent) {
+      throw new Error(
+        `WMS sublayer '${this.id}' has already been attached to parent '${this.#parent.id}'`
+      );
+    }
+    this.#parent = parent;
+    if (this.#parentLayer) {
+      throw new Error(
+        `WMS sublayer '${this.id}' has already been attached to parent layer '${this.#parentLayer.id}'`
+      );
+    }
+    this.#parentLayer = parentLayer;
+    for (const sublayer of this.sublayers.__getRawSublayers()) {
+      sublayer.__attach(map, parentLayer, this);
+    }
+  }
+  /**
+   * Called by the parent layer to update the legend on load.
+   */
+  __setLegend(legendUrl) {
+    this.#legend.value = legendUrl;
+  }
+  setVisible(newVisibility) {
+    this.#visible.value = newVisibility;
+  }
+}
+function constructSublayers(sublayerConfigs = []) {
+  const sublayers = [];
+  try {
+    for (const sublayerConfig of sublayerConfigs) {
+      sublayers.push(new WMSSublayerImpl(sublayerConfig));
+    }
+    return sublayers;
+  } catch (e) {
+    while (sublayers.length) {
+      const layer = sublayers.pop();
+      layer?.destroy();
+    }
+    throw new Error("Failed to construct sublayers.", { cause: e });
+  }
+}
+function getWMSLegendUrl(capabilities, layerName) {
+  const capabilitiesContent = capabilities?.Capability;
+  const rootLayerCapabilities = capabilitiesContent?.Layer;
+  let url = void 0;
+  const searchNestedLayer = (layer) => {
+    for (const currentLayer of layer) {
+      if (currentLayer?.Name === layerName) {
+        const activeLayer = currentLayer;
+        const styles = activeLayer.Style;
+        if (!styles || !styles.length) {
+          LOG.debug("No style in WMS layer capabilities - giving up.");
+          return;
+        }
+        const activeStyle = styles[0];
+        url = activeStyle.LegendURL?.[0]?.OnlineResource;
+      } else if (currentLayer.Layer) {
+        searchNestedLayer(currentLayer.Layer);
+      }
+    }
+  };
+  if (rootLayerCapabilities) {
+    searchNestedLayer(rootLayerCapabilities.Layer);
+  }
+  return url;
+}
+
+export { WMSLayerImpl, getWMSLegendUrl };
+//# sourceMappingURL=WMSLayerImpl.js.map

package/model/layers/WMSLayerImpl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WMSLayerImpl.js","sources":["WMSLayerImpl.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    batch,\n    computed,\n    Reactive,\n    reactive,\n    ReadonlyReactive,\n    watch\n} from \"@conterra/reactivity-core\";\nimport { createLogger, destroyResource, isAbortError, Resource } from \"@open-pioneer/core\";\nimport { ImageWrapper } from \"ol\";\nimport WMSCapabilities from \"ol/format/WMSCapabilities\";\nimport ImageLayer from \"ol/layer/Image\";\nimport type ImageSource from \"ol/source/Image\";\nimport ImageWMS from \"ol/source/ImageWMS\";\nimport { WMSLayer, WMSLayerConfig, WMSSublayer, WMSSublayerConfig } from \"../../api\";\nimport { fetchCapabilities } from \"../../util/capabilities-utils\";\nimport { AbstractLayer } from \"../AbstractLayer\";\nimport { AbstractLayerBase } from \"../AbstractLayerBase\";\nimport { MapModelImpl } from \"../MapModelImpl\";\nimport { SublayersCollectionImpl } from \"../SublayersCollectionImpl\";\n\nconst LOG = createLogger(\"map:WMSLayer\");\n\nexport class WMSLayerImpl extends AbstractLayer implements WMSLayer {\n    #url: string;\n    #sublayers: SublayersCollectionImpl<WMSSublayerImpl>;\n    #layer: ImageLayer<ImageSource>;\n    #source: ImageWMS;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    #capabilities: Record<string, any> | undefined;\n    readonly #abortController = new AbortController();\n\n    #visibleSublayers: ReadonlyReactive<string[]>;\n    #sublayersWatch: Resource | undefined;\n\n    constructor(config: WMSLayerConfig) {\n        const layer = new ImageLayer();\n        super({\n            ...config,\n            olLayer: layer\n        });\n        const source = new ImageWMS({\n            ...config.sourceOptions,\n            url: config.url,\n            params: {\n                ...config.sourceOptions?.params\n            },\n            // Use http service to load tiles; needed for authentication etc.\n            imageLoadFunction: (wrapper, url) => {\n                return this.#loadImage(wrapper, url).catch((error) => {\n                    LOG.error(`Failed to load tile at '${url}'`, error);\n                });\n            }\n        });\n        this.#url = config.url;\n        this.#source = source;\n        this.#layer = layer;\n        this.#sublayers = new SublayersCollectionImpl(constructSublayers(config.sublayers));\n        this.#visibleSublayers = computed(() => this.#getVisibleLayerNames(), {\n            equal(a, b) {\n                return a.length === b.length && a.every((v, i) => v === b[i]);\n            }\n        });\n\n        this.#sublayersWatch = watch(\n            () => [this.#visibleSublayers.value],\n            ([layers]) => {\n                this.#updateLayersParam(layers);\n            },\n            {\n                immediate: true\n            }\n        );\n    }\n\n    destroy() {\n        this.#abortController.abort();\n        this.#sublayersWatch = destroyResource(this.#sublayersWatch);\n        super.destroy();\n    }\n\n    get type() {\n        return \"wms\" as const;\n    }\n\n    get legend() {\n        return undefined;\n    }\n\n    get url(): string {\n        return this.#url;\n    }\n\n    get layers(): undefined {\n        return undefined;\n    }\n\n    get sublayers(): SublayersCollectionImpl<WMSSublayerImpl> {\n        return this.#sublayers;\n    }\n\n    get capabilities() {\n        return this.#capabilities;\n    }\n\n    __attachToMap(map: MapModelImpl): void {\n        super.__attachToMap(map);\n        for (const sublayer of this.#sublayers.getSublayers()) {\n            sublayer.__attach(map, this, this);\n        }\n\n        /** Find all leaf nodes representing a layer in the structure */\n        const getNestedSublayer = (sublayers: WMSSublayerImpl[], layers: WMSSublayerImpl[]) => {\n            for (const sublayer of sublayers) {\n                const nested = sublayer.sublayers.getSublayers();\n                if (nested.length) {\n                    getNestedSublayer(nested, layers);\n                } else {\n                    if (sublayer.name) {\n                        layers.push(sublayer);\n                    }\n                }\n            }\n        };\n\n        this.#fetchWMSCapabilities()\n            .then((result: string) => {\n                batch(() => {\n                    const parser = new WMSCapabilities();\n                    const capabilities = parser.read(result);\n                    this.#capabilities = capabilities;\n\n                    const layers: WMSSublayerImpl[] = [];\n                    getNestedSublayer(this.#sublayers.getSublayers(), layers);\n\n                    for (const layer of layers) {\n                        const legendUrl = getWMSLegendUrl(capabilities, layer.name!);\n                        layer.__setLegend(legendUrl);\n                    }\n                });\n            })\n            .catch((error) => {\n                if (isAbortError(error)) {\n                    LOG.debug(`Layer ${this.id} has been destroyed before fetching capabilities`);\n                    return;\n                }\n                LOG.error(`Failed to fetch WMS capabilities for layer ${this.id}`, error);\n            });\n    }\n\n    /**\n     * Gathers the visibility of _all_ sublayers and assembles the 'layers' WMS parameter.\n     * The parameters are then applied to the WMS source.\n     */\n    #updateLayersParam(layers: string[]) {\n        this.#source.updateParams({\n            \"LAYERS\": layers\n        });\n\n        // only set source if there are visible sublayers, otherwise\n        // we send an invalid http request\n        const source = layers.length === 0 ? null : this.#source;\n        if (this.#layer.getSource() !== source) {\n            this.#layer.setSource(source);\n        }\n    }\n\n    #getVisibleLayerNames() {\n        const layers: string[] = [];\n        const visitSublayer = (sublayer: WMSSublayerImpl) => {\n            if (!sublayer.visible) {\n                return;\n            }\n\n            const nestedSublayers = sublayer.sublayers.__getRawSublayers();\n            if (nestedSublayers.length) {\n                for (const nestedSublayer of nestedSublayers) {\n                    visitSublayer(nestedSublayer);\n                }\n            } else {\n                /**\n                 * Push sublayer only, if layer name is not an empty string | undefined | ...\n                 */\n                if (sublayer.name) {\n                    layers.push(sublayer.name);\n                }\n            }\n        };\n\n        for (const sublayer of this.sublayers.__getRawSublayers()) {\n            visitSublayer(sublayer);\n        }\n        return layers;\n    }\n\n    async #fetchWMSCapabilities(): Promise<string> {\n        const httpService = this.map.__sharedDependencies.httpService;\n        const url = `${this.#url}?LANGUAGE=ger&SERVICE=WMS&REQUEST=GetCapabilities`;\n        return fetchCapabilities(url, httpService, this.#abortController.signal);\n    }\n\n    async #loadImage(imageWrapper: ImageWrapper, imageUrl: string): Promise<void> {\n        const httpService = this.map.__sharedDependencies.httpService;\n        const image = imageWrapper.getImage() as HTMLImageElement;\n\n        const response = await httpService.fetch(imageUrl);\n        if (!response.ok) {\n            throw new Error(`Request failed with status ${response.status}.`);\n        }\n\n        const blob = await response.blob();\n        const objectUrl = URL.createObjectURL(blob);\n        const finish = () => {\n            // Cleanup object URL after load to prevent memory leaks.\n            // https://stackoverflow.com/questions/62473876/openlayers-6-settileloadfunction-documented-example-uses-url-createobjecturld\n            URL.revokeObjectURL(objectUrl);\n            image.removeEventListener(\"load\", finish);\n            image.removeEventListener(\"error\", finish);\n        };\n\n        image.addEventListener(\"load\", finish);\n        image.addEventListener(\"error\", finish);\n        image.src = objectUrl;\n    }\n}\n\nclass WMSSublayerImpl extends AbstractLayerBase implements WMSSublayer {\n    #parent: WMSSublayerImpl | WMSLayerImpl | undefined;\n    #parentLayer: WMSLayerImpl | undefined;\n    #name: string | undefined;\n    #legend = reactive<string | undefined>();\n    #sublayers: SublayersCollectionImpl<WMSSublayerImpl>;\n    #visible: Reactive<boolean>;\n\n    constructor(config: WMSSublayerConfig) {\n        super(config);\n        this.#name = config.name;\n        this.#visible = reactive(config.visible ?? true);\n        this.#sublayers = new SublayersCollectionImpl(constructSublayers(config.sublayers));\n    }\n\n    get type() {\n        return \"wms-sublayer\" as const;\n    }\n\n    get name(): string | undefined {\n        return this.#name;\n    }\n\n    get layers(): undefined {\n        return undefined;\n    }\n\n    get sublayers(): SublayersCollectionImpl<WMSSublayerImpl> {\n        return this.#sublayers;\n    }\n\n    get parent(): WMSSublayerImpl | WMSLayerImpl {\n        const parent = this.#parent;\n        if (!parent) {\n            throw new Error(`WMS sublayer ${this.id} has not been attached to its parent yet.`);\n        }\n        return parent;\n    }\n\n    get parentLayer(): WMSLayerImpl {\n        const parentLayer = this.#parentLayer;\n        if (!parentLayer) {\n            throw new Error(`WMS sublayer ${this.id} has not been attached to its parent yet.`);\n        }\n        return parentLayer;\n    }\n\n    get legend(): string | undefined {\n        return this.#legend.value;\n    }\n\n    get visible(): boolean {\n        return this.#visible.value;\n    }\n\n    /**\n     * Called by the parent layer when it is attached to the map to attach all sublayers.\n     */\n    __attach(\n        map: MapModelImpl,\n        parentLayer: WMSLayerImpl,\n        parent: WMSLayerImpl | WMSSublayerImpl\n    ): void {\n        super.__attachToMap(map);\n        if (this.#parent) {\n            throw new Error(\n                `WMS sublayer '${this.id}' has already been attached to parent '${this.#parent.id}'`\n            );\n        }\n        this.#parent = parent;\n        if (this.#parentLayer) {\n            throw new Error(\n                `WMS sublayer '${this.id}' has already been attached to parent layer '${this.#parentLayer.id}'`\n            );\n        }\n        this.#parentLayer = parentLayer;\n\n        // Recurse into nested sublayers\n        for (const sublayer of this.sublayers.__getRawSublayers()) {\n            sublayer.__attach(map, parentLayer, this);\n        }\n    }\n\n    /**\n     * Called by the parent layer to update the legend on load.\n     */\n    __setLegend(legendUrl: string | undefined) {\n        this.#legend.value = legendUrl;\n    }\n\n    setVisible(newVisibility: boolean): void {\n        this.#visible.value = newVisibility;\n    }\n}\n\nfunction constructSublayers(sublayerConfigs: WMSSublayerConfig[] = []): WMSSublayerImpl[] {\n    const sublayers: WMSSublayerImpl[] = [];\n    try {\n        for (const sublayerConfig of sublayerConfigs) {\n            sublayers.push(new WMSSublayerImpl(sublayerConfig));\n        }\n        return sublayers;\n    } catch (e) {\n        // Ensure previous sublayers are destroyed if a single constructor throws\n        while (sublayers.length) {\n            const layer = sublayers.pop()!;\n            layer?.destroy();\n        }\n        throw new Error(\"Failed to construct sublayers.\", { cause: e });\n    }\n}\n\n/** extract the legend url from the service capabilities */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getWMSLegendUrl(capabilities: Record<string, any>, layerName: string) {\n    const capabilitiesContent = capabilities?.Capability;\n    const rootLayerCapabilities = capabilitiesContent?.Layer;\n    let url: string | undefined = undefined;\n\n    /** Recurse search for the currrent layer within the parsed capabilities service*/\n    //eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const searchNestedLayer = (layer: Record<string, any>[]) => {\n        for (const currentLayer of layer) {\n            // spec. if, a layer has a <Name>, then it is a map layer\n            if (currentLayer?.Name === layerName) {\n                const activeLayer = currentLayer;\n                const styles = activeLayer.Style;\n                if (!styles || !styles.length) {\n                    LOG.debug(\"No style in WMS layer capabilities - giving up.\");\n                    return;\n                }\n                // by parsing of the service capabilities, every child inherits the parent's legend\n                // theorfore, extract the legendURL from the first style object in the array (its own legend)\n                const activeStyle = styles[0];\n                url = activeStyle.LegendURL?.[0]?.OnlineResource;\n            } else if (currentLayer.Layer) {\n                searchNestedLayer(currentLayer.Layer);\n            }\n        }\n    };\n    if (rootLayerCapabilities) {\n        searchNestedLayer(rootLayerCapabilities.Layer);\n    }\n    return url;\n}\n"],"names":[],"mappings":"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"}

package/model/layers/WMTSLayerImpl.d.ts

@@ -0,0 +1,17 @@
+import { WMTSLayer, WMTSLayerConfig } from "../../api";
+import { AbstractLayer } from "../AbstractLayer";
+import { MapModelImpl } from "../MapModelImpl";
+export declare class WMTSLayerImpl extends AbstractLayer implements WMTSLayer {
+    #private;
+    constructor(config: WMTSLayerConfig);
+    get type(): "wmts";
+    destroy(): void;
+    get legend(): string | undefined;
+    get sublayers(): undefined;
+    get layers(): undefined;
+    __attachToMap(map: MapModelImpl): void;
+    get url(): string;
+    get name(): string;
+    get matrixSet(): string;
+}
+export declare function getWMTSLegendUrl(capabilities: Record<string, any>, activeLayerId: string | undefined, activeStyleId: string | undefined): string | undefined;

package/model/layers/WMTSLayerImpl.js

@@ -0,0 +1,156 @@
+import { createLogger, isAbortError } from '@open-pioneer/core';
+import TileState from 'ol/TileState.js';
+import WMTSCapabilities from 'ol/format/WMTSCapabilities.js';
+import TileLayer from 'ol/layer/Tile.js';
+import WMTS, { optionsFromCapabilities } from 'ol/source/WMTS.js';
+import { fetchCapabilities } from '../../util/capabilities-utils.js';
+import { AbstractLayer } from '../AbstractLayer.js';
+import { ImageTile } from 'ol';
+import { reactive } from '@conterra/reactivity-core';
+
+const LOG = createLogger("map:WMTSLayer");
+class WMTSLayerImpl extends AbstractLayer {
+  #url;
+  #name;
+  #matrixSet;
+  #layer;
+  #source;
+  #sourceOptions;
+  #legend = reactive();
+  #abortController = new AbortController();
+  constructor(config) {
+    const layer = new TileLayer();
+    super({
+      ...config,
+      olLayer: layer
+    });
+    this.#url = config.url;
+    this.#name = config.name;
+    this.#layer = layer;
+    this.#matrixSet = config.matrixSet;
+    this.#sourceOptions = config.sourceOptions;
+  }
+  get type() {
+    return "wmts";
+  }
+  destroy() {
+    this.#abortController.abort();
+    super.destroy();
+  }
+  get legend() {
+    return this.#legend.value;
+  }
+  get sublayers() {
+    return void 0;
+  }
+  get layers() {
+    return void 0;
+  }
+  __attachToMap(map) {
+    super.__attachToMap(map);
+    this.#fetchWMTSCapabilities().then((result) => {
+      const parser = new WMTSCapabilities();
+      const capabilities = parser.read(result);
+      const options = optionsFromCapabilities(capabilities, {
+        layer: this.#name,
+        matrixSet: this.#matrixSet
+      });
+      if (!options) {
+        throw new Error("Layer was not found in capabilities");
+      }
+      const source = new WMTS({
+        ...options,
+        ...this.#sourceOptions,
+        tileLoadFunction: (tile, tileUrl) => {
+          this.#loadTile(tile, tileUrl);
+        }
+      });
+      this.#source = source;
+      this.#layer.setSource(this.#source);
+      const activeStyleId = source.getStyle();
+      const legendUrl = getWMTSLegendUrl(capabilities, this.name, activeStyleId);
+      this.#legend.value = legendUrl;
+    }).catch((error) => {
+      if (isAbortError(error)) {
+        LOG.error(`Layer ${this.name} has been destroyed before fetching the data`);
+        return;
+      }
+      LOG.error(`Failed fetching WMTS capabilities for Layer ${this.name}`, error);
+    });
+  }
+  get url() {
+    return this.#url;
+  }
+  get name() {
+    return this.#name;
+  }
+  get matrixSet() {
+    return this.#matrixSet;
+  }
+  async #fetchWMTSCapabilities() {
+    const httpService = this.map.__sharedDependencies.httpService;
+    return fetchCapabilities(this.#url, httpService, this.#abortController.signal);
+  }
+  async #loadTile(tile, tileUrl) {
+    const httpService = this.map.__sharedDependencies.httpService;
+    try {
+      if (!(tile instanceof ImageTile)) {
+        throw new Error("Only 'ImageTile' is supported for now.");
+      }
+      const image = tile.getImage();
+      if (!isHtmlImage(image)) {
+        throw new Error("Only <img> tags are supported as tiles for now.");
+      }
+      const response = await httpService.fetch(tileUrl);
+      if (!response.ok) {
+        throw new Error(`Tile request failed with status ${response.status}.`);
+      }
+      const blob = await response.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const finish = () => {
+        URL.revokeObjectURL(objectUrl);
+        image.removeEventListener("load", finish);
+        image.removeEventListener("error", finish);
+      };
+      image.addEventListener("load", finish);
+      image.addEventListener("error", finish);
+      image.src = objectUrl;
+    } catch (e) {
+      tile.setState(TileState.ERROR);
+      if (!isAbortError(e)) {
+        LOG.error("Failed to load tile", e);
+      }
+    }
+  }
+}
+function isHtmlImage(htmlElement) {
+  return htmlElement.tagName === "IMG";
+}
+function getWMTSLegendUrl(capabilities, activeLayerId, activeStyleId) {
+  const content = capabilities?.Contents;
+  const layers = content?.Layer;
+  let activeLayer = layers?.find((layer) => layer?.Identifier === activeLayerId);
+  if (!activeLayer) {
+    LOG.debug("Failed to find the active layer in WMTS layer capabilities.");
+    activeLayer = layers?.[0];
+    if (!activeLayer) {
+      LOG.debug("No layer in WMTS capabilities - giving up.");
+      return void 0;
+    }
+  }
+  const styles = activeLayer.Style;
+  let activeStyle = styles?.find((style) => style?.Identifier === activeStyleId);
+  if (!activeStyle) {
+    LOG.debug("Failed to find active style in WMTS layer.");
+    activeStyle = styles?.[0];
+    if (!activeStyle) {
+      LOG.debug("No style in WMTS layer capabilities - giving up.");
+      return void 0;
+    }
+  }
+  const legendUrl = activeStyle.LegendURL?.[0]?.href;
+  return legendUrl;
+}
+
+export { WMTSLayerImpl, getWMTSLegendUrl };
+//# sourceMappingURL=WMTSLayerImpl.js.map

package/model/layers/WMTSLayerImpl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WMTSLayerImpl.js","sources":["WMTSLayerImpl.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { createLogger, isAbortError } from \"@open-pioneer/core\";\nimport Tile from \"ol/Tile\";\nimport TileState from \"ol/TileState\";\nimport WMTSCapabilities from \"ol/format/WMTSCapabilities\";\nimport TileLayer from \"ol/layer/Tile\";\nimport type TileSourceType from \"ol/source/Tile\";\nimport WMTS, { optionsFromCapabilities } from \"ol/source/WMTS\";\nimport { WMTSLayer, WMTSLayerConfig } from \"../../api\";\nimport { fetchCapabilities } from \"../../util/capabilities-utils\";\nimport { AbstractLayer } from \"../AbstractLayer\";\nimport { MapModelImpl } from \"../MapModelImpl\";\nimport { ImageTile } from \"ol\";\nimport type { Options as WMSSourceOptions } from \"ol/source/ImageWMS\";\nimport { reactive } from \"@conterra/reactivity-core\";\n\nconst LOG = createLogger(\"map:WMTSLayer\");\n\nexport class WMTSLayerImpl extends AbstractLayer implements WMTSLayer {\n    #url: string;\n    #name: string;\n    #matrixSet: string;\n    #layer: TileLayer<TileSourceType>;\n    #source: WMTS | undefined;\n    #sourceOptions?: Partial<WMSSourceOptions>;\n    #legend = reactive<string | undefined>();\n    readonly #abortController = new AbortController();\n\n    constructor(config: WMTSLayerConfig) {\n        const layer = new TileLayer();\n        super({\n            ...config,\n            olLayer: layer\n        });\n        this.#url = config.url;\n        this.#name = config.name;\n        this.#layer = layer;\n        this.#matrixSet = config.matrixSet;\n        this.#sourceOptions = config.sourceOptions;\n    }\n\n    get type() {\n        return \"wmts\" as const;\n    }\n\n    destroy(): void {\n        this.#abortController.abort();\n        super.destroy();\n    }\n\n    get legend(): string | undefined {\n        return this.#legend.value;\n    }\n\n    get sublayers(): undefined {\n        return undefined;\n    }\n\n    get layers(): undefined {\n        return undefined;\n    }\n\n    __attachToMap(map: MapModelImpl): void {\n        super.__attachToMap(map);\n        this.#fetchWMTSCapabilities()\n            .then((result: string) => {\n                const parser = new WMTSCapabilities();\n                const capabilities = parser.read(result);\n                const options = optionsFromCapabilities(capabilities, {\n                    layer: this.#name,\n                    matrixSet: this.#matrixSet\n                });\n                if (!options) {\n                    throw new Error(\"Layer was not found in capabilities\");\n                }\n                const source = new WMTS({\n                    ...options,\n                    ...this.#sourceOptions,\n                    tileLoadFunction: (tile, tileUrl) => {\n                        this.#loadTile(tile, tileUrl);\n                    }\n                });\n                this.#source = source;\n                this.#layer.setSource(this.#source);\n                const activeStyleId = source.getStyle();\n                const legendUrl = getWMTSLegendUrl(capabilities, this.name, activeStyleId);\n                this.#legend.value = legendUrl;\n            })\n            .catch((error) => {\n                if (isAbortError(error)) {\n                    LOG.error(`Layer ${this.name} has been destroyed before fetching the data`);\n                    return;\n                }\n                LOG.error(`Failed fetching WMTS capabilities for Layer ${this.name}`, error);\n            });\n    }\n\n    get url() {\n        return this.#url;\n    }\n\n    get name() {\n        return this.#name;\n    }\n\n    get matrixSet() {\n        return this.#matrixSet;\n    }\n\n    async #fetchWMTSCapabilities(): Promise<string> {\n        const httpService = this.map.__sharedDependencies.httpService;\n        return fetchCapabilities(this.#url, httpService, this.#abortController.signal);\n    }\n\n    async #loadTile(tile: Tile, tileUrl: string): Promise<void> {\n        const httpService = this.map.__sharedDependencies.httpService;\n        try {\n            if (!(tile instanceof ImageTile)) {\n                throw new Error(\"Only 'ImageTile' is supported for now.\");\n            }\n\n            const image = tile.getImage();\n            if (!isHtmlImage(image)) {\n                // Could also be canvas or video\n                throw new Error(\"Only <img> tags are supported as tiles for now.\");\n            }\n\n            const response = await httpService.fetch(tileUrl);\n            if (!response.ok) {\n                throw new Error(`Tile request failed with status ${response.status}.`);\n            }\n\n            const blob = await response.blob();\n            const objectUrl = URL.createObjectURL(blob);\n            const finish = () => {\n                // Cleanup object URL after load to prevent memory leaks.\n                // https://stackoverflow.com/questions/62473876/openlayers-6-settileloadfunction-documented-example-uses-url-createobjecturld\n                URL.revokeObjectURL(objectUrl);\n                image.removeEventListener(\"load\", finish);\n                image.removeEventListener(\"error\", finish);\n            };\n            image.addEventListener(\"load\", finish);\n            image.addEventListener(\"error\", finish);\n            image.src = objectUrl;\n        } catch (e) {\n            tile.setState(TileState.ERROR);\n            if (!isAbortError(e)) {\n                LOG.error(\"Failed to load tile\", e);\n            }\n        }\n    }\n}\n\nfunction isHtmlImage(htmlElement: HTMLElement): htmlElement is HTMLImageElement {\n    return htmlElement.tagName === \"IMG\";\n}\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport function getWMTSLegendUrl(\n    capabilities: Record<string, any>,\n    activeLayerId: string | undefined,\n    activeStyleId: string | undefined\n): string | undefined {\n    const content = capabilities?.Contents;\n    const layers = content?.Layer;\n\n    let activeLayer = layers?.find((layer: any) => layer?.Identifier === activeLayerId);\n    if (!activeLayer) {\n        LOG.debug(\"Failed to find the active layer in WMTS layer capabilities.\");\n        activeLayer = layers?.[0];\n        if (!activeLayer) {\n            LOG.debug(\"No layer in WMTS capabilities - giving up.\");\n            return undefined;\n        }\n    }\n\n    const styles = activeLayer.Style;\n    let activeStyle = styles?.find((style: any) => style?.Identifier === activeStyleId);\n    if (!activeStyle) {\n        LOG.debug(\"Failed to find active style in WMTS layer.\");\n        activeStyle = styles?.[0];\n        if (!activeStyle) {\n            LOG.debug(\"No style in WMTS layer capabilities - giving up.\");\n            return undefined;\n        }\n    }\n\n    const legendUrl = activeStyle.LegendURL?.[0]?.href;\n    return legendUrl as string | undefined;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "type": "module",
+  "name": "@open-pioneer/map",
+  "version": "0.0.0-dev-20241120114910",
+  "description": "This package integrates OpenLayers maps into an open pioneer trails application.",
+  "keywords": [
+    "open-pioneer-trails"
+  ],
+  "homepage": "https://github.com/open-pioneer",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/open-pioneer/trails-openlayers-base-packages",
+    "directory": "src/packages/map"
+  },
+  "dependencies": {
+    "@open-pioneer/chakra-integration": "^2.4.0-dev.20241120092632",
+    "@open-pioneer/core": "^2.4.0-dev.20241120092632",
+    "@open-pioneer/http": "^2.4.0-dev.20241120092632",
+    "@open-pioneer/react-utils": "^2.4.0-dev.20241120092632",
+    "@open-pioneer/runtime": "^2.4.0-dev.20241120092632",
+    "@types/proj4": "^2.5.2",
+    "ol": "^10.2.1",
+    "proj4": "^2.12.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-use": "^17.5.1",
+    "uuid": "^10.0.0",
+    "@conterra/reactivity-core": "^0.4.3"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./internalTestSupport": {
+      "import": "./internalTestSupport.js",
+      "types": "./internalTestSupport.d.ts"
+    },
+    "./services": {
+      "import": "./services.js",
+      "types": "./services.d.ts"
+    },
+    "./ui/styles.css": "./ui/styles.css"
+  },
+  "openPioneerFramework": {
+    "styles": "./ui/styles.css",
+    "services": [
+      {
+        "serviceName": "MapRegistryImpl",
+        "provides": [
+          {
+            "interfaceName": "map.MapRegistry"
+          }
+        ],
+        "references": [
+          {
+            "referenceName": "providers",
+            "type": "all",
+            "interfaceName": "map.MapConfigProvider"
+          },
+          {
+            "referenceName": "httpService",
+            "type": "unique",
+            "interfaceName": "http.HttpService"
+          }
+        ]
+      }
+    ],
+    "servicesModule": "./services",
+    "i18n": {
+      "languages": []
+    },
+    "ui": {
+      "references": [
+        {
+          "type": "unique",
+          "interfaceName": "map.MapRegistry"
+        }
+      ]
+    },
+    "properties": [],
+    "packageFormatVersion": "1.0.0"
+  }
+}

package/projections.d.ts

@@ -0,0 +1,27 @@
+import { ProjectionDefinition as Proj4ProjectionDefinition } from "proj4";
+export type ProjectionDefinition = string | Proj4ProjectionDefinition;
+/**
+ * Adds new registrations to the global [proj4js](https://github.com/proj4js/proj4js) definition set.
+ *
+ * See the proj4js documentation for more details.
+ *
+ * Example:
+ *
+ * ```ts
+ * import { registerProjections } from "@open-pioneer/map";
+ *
+ * registerProjections({
+ *   "EPSG:25832": "+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs",
+ *   // ... more projections
+ * });
+ * ```
+ *
+ * @param projections
+ *      An object containing (key, definition) pairs. The key must be projection name (such as `"EPSG:4326"`).
+ *      The value can be a string defining the projection or an existing proj4 definition object.
+ */
+export declare function registerProjections(projections: Record<string, ProjectionDefinition>): void;
+/**
+ * Searches the global [proj4js](https://github.com/proj4js/proj4js) definition set for a definition with the given name.
+ */
+export declare function getProjection(name: string): Proj4ProjectionDefinition;

package/projections.js

@@ -0,0 +1,15 @@
+import { register } from 'ol/proj/proj4.js';
+import proj4 from 'proj4';
+
+function registerProjections(projections) {
+  for (const [name, definition] of Object.entries(projections)) {
+    proj4.defs(name, definition);
+  }
+  register(proj4);
+}
+function getProjection(name) {
+  return proj4.defs(name);
+}
+
+export { getProjection, registerProjections };
+//# sourceMappingURL=projections.js.map