@geospatial-sdk/legend 0.0.5-dev.31

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2023, Camptocamp
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,35 @@
+# `legend`
+
+> A library to get legend graphics from the map-context.
+
+## Installation
+
+To install the package, use npm:
+
+```sh
+npm install @geospatial-sdk/legend
+```
+
+## Usage
+
+```typescript
+import { createLegendFromLayer } from "@geospatial-sdk/legend";
+
+const layer = {
+  type: "wms",
+  url: "https://example.com/wms",
+  name: "test-layer",
+};
+
+createLegendFromLayer(layer).then((legendDiv) => {
+  document.body.appendChild(legendDiv);
+});
+```
+
+## Documentation
+
+For more detailed API documentation, see the [documentation website](https://camptocamp.github.io/geospatial-sdk/docs/).
+
+## Examples
+
+For examples and demos, see the [examples website](https://camptocamp.github.io/geospatial-sdk/).

package/dist/create-legend/from-layer.d.ts

@@ -0,0 +1,19 @@
+import { MapContextLayer } from "@geospatial-sdk/core";
+/**
+ * Configuration options for legend generation
+ */
+interface LegendOptions {
+    format?: string;
+    widthPxHint?: number;
+    heightPxHint?: number;
+}
+/**
+ * Creates a legend from a layer.
+ *
+ * @param {MapContextLayer} layer - The layer to create the legend from.
+ * @param {LegendOptions} [options] - The options to create the legend.
+ * @returns {Promise<HTMLElement | null>} A promise that resolves to the legend element or `null` if the legend could not be created.
+ */
+export declare function createLegendFromLayer(layer: MapContextLayer, options?: LegendOptions): Promise<HTMLElement | null>;
+export {};
+//# sourceMappingURL=from-layer.d.ts.map

package/dist/create-legend/from-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"from-layer.d.ts","sourceRoot":"","sources":["../../lib/create-legend/from-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAIhB,MAAM,sBAAsB,CAAC;AAG9B;;GAEG;AACH,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAoED;;;;;;GAMG;AACH,wBAAsB,qBAAqB,CACzC,KAAK,EAAE,eAAe,EACtB,OAAO,GAAE,aAAkB,GAC1B,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAiE7B"}

package/dist/create-legend/from-layer.js

@@ -0,0 +1,129 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { removeSearchParams, } from "@geospatial-sdk/core";
+import { WmtsEndpoint } from "@camptocamp/ogc-client";
+/**
+ * Create a legend URL for a WMS layer
+ *
+ * @param layer - The MapContextLayer to create a legend URL for
+ * @param options - Optional configuration for legend generation
+ * @returns A URL for the WMS legend graphic
+ */
+function createWmsLegendUrl(layer, options = {}) {
+    const { format = "image/png", widthPxHint, heightPxHint } = options;
+    const legendUrl = new URL(removeSearchParams(layer.url, [
+        "SERVICE",
+        "REQUEST",
+        "FORMAT",
+        "LAYER",
+        "LAYERTITLE",
+        "WIDTH",
+        "HEIGHT",
+    ]));
+    legendUrl.searchParams.set("SERVICE", "WMS");
+    legendUrl.searchParams.set("REQUEST", "GetLegendGraphic");
+    legendUrl.searchParams.set("FORMAT", format);
+    legendUrl.searchParams.set("LAYER", layer.name);
+    legendUrl.searchParams.set("LAYERTITLE", false.toString()); // Disable layer title for QGIS Server
+    if (widthPxHint) {
+        legendUrl.searchParams.set("WIDTH", widthPxHint.toString());
+    }
+    if (heightPxHint) {
+        legendUrl.searchParams.set("HEIGHT", heightPxHint.toString());
+    }
+    return legendUrl;
+}
+/**
+ * Create a legend URL for a WMTS layer
+ *
+ * @param layer - The MapContextLayer to create a legend URL for
+ * @returns A URL for the WMTS legend graphic or null if not available
+ */
+function createWmtsLegendUrl(layer) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const endpoint = yield new WmtsEndpoint(layer.url).isReady();
+        const layerByName = endpoint.getLayerByName(layer.name);
+        console.log("layerByName");
+        console.log(layerByName);
+        if (layerByName.styles &&
+            layerByName.styles.length > 0 &&
+            layerByName.styles[0].legendUrl) {
+            return layerByName.styles[0].legendUrl;
+        }
+        return null;
+    });
+}
+/**
+ * Creates a legend from a layer.
+ *
+ * @param {MapContextLayer} layer - The layer to create the legend from.
+ * @param {LegendOptions} [options] - The options to create the legend.
+ * @returns {Promise<HTMLElement | null>} A promise that resolves to the legend element or `null` if the legend could not be created.
+ */
+export function createLegendFromLayer(layer, options = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if ((layer.type !== "wms" && layer.type !== "wmts") ||
+            !layer.url ||
+            !layer.name) {
+            console.error("Invalid layer for legend creation");
+            return null;
+        }
+        // Create a container for the legend
+        const legendDiv = document.createElement("div");
+        legendDiv.id = "legend";
+        legendDiv.setAttribute("role", "region");
+        legendDiv.setAttribute("aria-label", "Map Layer Legend");
+        legendDiv.classList.add("geosdk--legend-container");
+        const layerDiv = document.createElement("div");
+        layerDiv.classList.add("geosdk--legend-layer");
+        const layerTitle = document.createElement("h4");
+        layerTitle.textContent = layer.name;
+        layerTitle.classList.add("geosdk--legend-layer-label");
+        layerDiv.appendChild(layerTitle);
+        const img = document.createElement("img");
+        img.alt = `Legend for ${layer.name}`;
+        img.classList.add("geosdk--legend-layer-image");
+        // Error handling for failed image loading
+        img.onerror = (e) => {
+            console.warn(`Failed to load legend for layer: ${layer.name}`, e);
+            const errorMessage = document.createElement("span");
+            errorMessage.textContent = `Legend not available for ${layer.name}`;
+            layerDiv.replaceChild(errorMessage, img);
+        };
+        try {
+            let legendUrl = null;
+            // Determine legend URL based on layer type
+            if (layer.type === "wms") {
+                legendUrl = createWmsLegendUrl(layer, options).toString();
+            }
+            else if (layer.type === "wmts") {
+                legendUrl = yield createWmtsLegendUrl(layer);
+            }
+            // If legend URL is available, set the image source
+            if (legendUrl) {
+                img.src = legendUrl;
+                layerDiv.appendChild(img);
+            }
+            else {
+                const errorMessage = document.createElement("span");
+                errorMessage.textContent = `Legend not available for ${layer.name}`;
+                layerDiv.appendChild(errorMessage);
+            }
+        }
+        catch (error) {
+            console.error(`Error creating legend for layer ${layer.name}:`, error);
+            const errorMessage = document.createElement("span");
+            errorMessage.textContent = `Error loading legend for ${layer.name}`;
+            layerDiv.appendChild(errorMessage);
+        }
+        legendDiv.appendChild(layerDiv);
+        return legendDiv;
+    });
+}

package/dist/create-legend/index.d.ts

@@ -0,0 +1,2 @@
+export { createLegendFromLayer } from "./from-layer";
+//# sourceMappingURL=index.d.ts.map

package/dist/create-legend/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/create-legend/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC"}

package/dist/create-legend/index.js

@@ -0,0 +1 @@
+export { createLegendFromLayer } from "./from-layer";

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./create-legend";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./create-legend";

package/lib/create-legend/from-layer.test.ts

@@ -0,0 +1,148 @@
+import { createLegendFromLayer } from "./from-layer";
+import {
+  MapContextLayer,
+  MapContextLayerWms,
+  MapContextLayerWmts,
+} from "@geospatial-sdk/core";
+import { WmtsEndpoint } from "@camptocamp/ogc-client";
+
+// Mock dependencies
+vi.mock("@camptocamp/ogc-client", () => ({
+  WmtsEndpoint: vi.fn(),
+}));
+
+describe("createLegendFromLayer", () => {
+  const baseWmsLayer: MapContextLayerWms = {
+    type: "wms",
+    url: "https://example.com/wms",
+    name: "test-layer",
+  };
+
+  const baseWmtsLayer: MapContextLayerWmts = {
+    type: "wmts",
+    url: "https://example.com/wmts",
+    name: "test-wmts-layer",
+  };
+
+  beforeEach(() => {
+    // Clear all mocks before each test
+    vi.clearAllMocks();
+  });
+
+  it("creates a legend for a valid WMS layer", async () => {
+    const result = await createLegendFromLayer(baseWmsLayer);
+
+    expect(result).toBeInstanceOf(HTMLElement);
+
+    const legendDiv = result as HTMLElement;
+    const img = legendDiv.querySelector("img");
+    const title = legendDiv.querySelector("h4");
+
+    expect(title?.textContent).toBe("test-layer");
+    expect(img).toBeTruthy();
+    expect(img?.src).toContain("REQUEST=GetLegendGraphic");
+    expect(img?.alt).toBe("Legend for test-layer");
+  });
+
+  it("creates a legend for a valid WMS layer with custom options", async () => {
+    const result = await createLegendFromLayer(baseWmsLayer, {
+      format: "image/jpeg",
+      widthPxHint: 200,
+      heightPxHint: 100,
+    });
+
+    const img = (result as HTMLElement).querySelector("img");
+
+    expect(img?.src).toContain("FORMAT=image%2Fjpeg");
+    expect(img?.src).toContain("WIDTH=200");
+    expect(img?.src).toContain("HEIGHT=100");
+  });
+
+  it("creates a legend for a valid WMTS layer with legend URL", async () => {
+    const mockLegendUrl = "https://example.com/legend.png";
+    const mockIsReady = {
+      getLayerByName: () => ({
+        styles: [{ legendUrl: mockLegendUrl }],
+      }),
+    };
+
+    // Mock WmtsEndpoint
+    (WmtsEndpoint as any).mockImplementation(() => ({
+      isReady: () => Promise.resolve(mockIsReady),
+    }));
+
+    const result = await createLegendFromLayer(baseWmtsLayer);
+
+    const img = (result as HTMLElement).querySelector("img");
+
+    expect(img?.src).toBe(mockLegendUrl);
+  });
+
+  it("handles WMTS layer without legend URL", async () => {
+    const mockIsReady = {
+      getLayerByName: () => ({
+        styles: [],
+      }),
+    };
+
+    // Mock WmtsEndpoint
+    (WmtsEndpoint as any).mockImplementation(() => ({
+      isReady: () => Promise.resolve(mockIsReady),
+    }));
+
+    const result = await createLegendFromLayer(baseWmtsLayer);
+
+    const errorSpan = (result as HTMLElement).querySelector("span");
+
+    expect(result).toBeInstanceOf(HTMLElement);
+    expect(errorSpan?.textContent).toBe(
+      "Legend not available for test-wmts-layer",
+    );
+  });
+
+  it("returns null for invalid layer type", async () => {
+    const invalidLayer = { ...baseWmsLayer, type: "invalid" as any };
+
+    const result = await createLegendFromLayer(invalidLayer);
+
+    expect(result).toBe(null);
+  });
+
+  it("returns null for layer without URL", async () => {
+    const layerWithoutUrl = { ...baseWmsLayer, url: "" };
+
+    const result = await createLegendFromLayer(layerWithoutUrl);
+
+    expect(result).toBe(null);
+  });
+
+  it("returns null for layer without name", async () => {
+    const layerWithoutName = { ...baseWmsLayer, name: "" };
+
+    const result = await createLegendFromLayer(layerWithoutName);
+
+    expect(result).toBe(null);
+  });
+
+  it("handles image load error", async () => {
+    const result = await createLegendFromLayer(baseWmsLayer);
+    const img = (result as HTMLElement).querySelector("img");
+
+    if (img) {
+      const errorEvent = new Event("error");
+      img.dispatchEvent(errorEvent);
+
+      const errorSpan = (result as HTMLElement).querySelector("span");
+      expect(errorSpan?.textContent).toBe(
+        "Legend not available for test-layer",
+      );
+    }
+  });
+
+  it("adds accessibility attributes", async () => {
+    const result = await createLegendFromLayer(baseWmsLayer);
+
+    expect(result.getAttribute("role")).toBe("region");
+    expect(result.getAttribute("aria-label")).toBe("Map Layer Legend");
+  });
+});

package/lib/create-legend/from-layer.ts

@@ -0,0 +1,159 @@
+import {
+  MapContextLayer,
+  MapContextLayerWms,
+  MapContextLayerWmts,
+  removeSearchParams,
+} from "@geospatial-sdk/core";
+import { WmtsEndpoint } from "@camptocamp/ogc-client";
+
+/**
+ * Configuration options for legend generation
+ */
+interface LegendOptions {
+  format?: string;
+  widthPxHint?: number;
+  heightPxHint?: number;
+}
+
+/**
+ * Create a legend URL for a WMS layer
+ *
+ * @param layer - The MapContextLayer to create a legend URL for
+ * @param options - Optional configuration for legend generation
+ * @returns A URL for the WMS legend graphic
+ */
+function createWmsLegendUrl(
+  layer: MapContextLayerWms,
+  options: LegendOptions = {},
+): URL {
+  const { format = "image/png", widthPxHint, heightPxHint } = options;
+
+  const legendUrl = new URL(
+    removeSearchParams(layer.url, [
+      "SERVICE",
+      "REQUEST",
+      "FORMAT",
+      "LAYER",
+      "LAYERTITLE",
+      "WIDTH",
+      "HEIGHT",
+    ]),
+  );
+  legendUrl.searchParams.set("SERVICE", "WMS");
+  legendUrl.searchParams.set("REQUEST", "GetLegendGraphic");
+  legendUrl.searchParams.set("FORMAT", format);
+  legendUrl.searchParams.set("LAYER", layer.name);
+  legendUrl.searchParams.set("LAYERTITLE", false.toString()); // Disable layer title for QGIS Server
+
+  if (widthPxHint) {
+    legendUrl.searchParams.set("WIDTH", widthPxHint.toString());
+  }
+  if (heightPxHint) {
+    legendUrl.searchParams.set("HEIGHT", heightPxHint.toString());
+  }
+
+  return legendUrl;
+}
+
+/**
+ * Create a legend URL for a WMTS layer
+ *
+ * @param layer - The MapContextLayer to create a legend URL for
+ * @returns A URL for the WMTS legend graphic or null if not available
+ */
+async function createWmtsLegendUrl(
+  layer: MapContextLayerWmts,
+): Promise<string | null> {
+  const endpoint = await new WmtsEndpoint(layer.url).isReady();
+
+  const layerByName = endpoint.getLayerByName(layer.name);
+  console.log("layerByName");
+  console.log(layerByName);
+
+  if (
+    layerByName.styles &&
+    layerByName.styles.length > 0 &&
+    layerByName.styles[0].legendUrl
+  ) {
+    return layerByName.styles[0].legendUrl;
+  }
+
+  return null;
+}
+
+/**
+ * Creates a legend from a layer.
+ *
+ * @param {MapContextLayer} layer - The layer to create the legend from.
+ * @param {LegendOptions} [options] - The options to create the legend.
+ * @returns {Promise<HTMLElement | null>} A promise that resolves to the legend element or `null` if the legend could not be created.
+ */
+export async function createLegendFromLayer(
+  layer: MapContextLayer,
+  options: LegendOptions = {},
+): Promise<HTMLElement | null> {
+  if (
+    (layer.type !== "wms" && layer.type !== "wmts") ||
+    !layer.url ||
+    !layer.name
+  ) {
+    console.error("Invalid layer for legend creation");
+    return null;
+  }
+
+  // Create a container for the legend
+  const legendDiv = document.createElement("div");
+  legendDiv.id = "legend";
+  legendDiv.setAttribute("role", "region");
+  legendDiv.setAttribute("aria-label", "Map Layer Legend");
+  legendDiv.classList.add("geosdk--legend-container");
+
+  const layerDiv = document.createElement("div");
+  layerDiv.classList.add("geosdk--legend-layer");
+
+  const layerTitle = document.createElement("h4");
+  layerTitle.textContent = layer.name;
+  layerTitle.classList.add("geosdk--legend-layer-label");
+  layerDiv.appendChild(layerTitle);
+
+  const img = document.createElement("img");
+  img.alt = `Legend for ${layer.name}`;
+  img.classList.add("geosdk--legend-layer-image");
+
+  // Error handling for failed image loading
+  img.onerror = (e) => {
+    console.warn(`Failed to load legend for layer: ${layer.name}`, e);
+    const errorMessage = document.createElement("span");
+    errorMessage.textContent = `Legend not available for ${layer.name}`;
+    layerDiv.replaceChild(errorMessage, img);
+  };
+
+  try {
+    let legendUrl: string | null = null;
+
+    // Determine legend URL based on layer type
+    if (layer.type === "wms") {
+      legendUrl = createWmsLegendUrl(layer, options).toString();
+    } else if (layer.type === "wmts") {
+      legendUrl = await createWmtsLegendUrl(layer);
+    }
+
+    // If legend URL is available, set the image source
+    if (legendUrl) {
+      img.src = legendUrl;
+      layerDiv.appendChild(img);
+    } else {
+      const errorMessage = document.createElement("span");
+      errorMessage.textContent = `Legend not available for ${layer.name}`;
+      layerDiv.appendChild(errorMessage);
+    }
+  } catch (error) {
+    console.error(`Error creating legend for layer ${layer.name}:`, error);
+    const errorMessage = document.createElement("span");
+    errorMessage.textContent = `Error loading legend for ${layer.name}`;
+    layerDiv.appendChild(errorMessage);
+  }
+
+  legendDiv.appendChild(layerDiv);
+  return legendDiv;
+}

package/lib/create-legend/index.ts

@@ -0,0 +1 @@
+export { createLegendFromLayer } from "./from-layer";

package/lib/index.ts

@@ -0,0 +1 @@
+export * from "./create-legend";

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@geospatial-sdk/legend",
+  "version": "0.0.5-dev.31+6f70b18",
+  "description": "Get legend graphic from the map-context",
+  "keywords": [
+    "legend"
+  ],
+  "author": "ronitjadhav <ronit.jadhav@camptocamp.com>",
+  "homepage": "https://github.com/camptocamp/geospatial-sdk#readme",
+  "license": "BSD-3-Clause",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "files": [
+    "lib",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/camptocamp/geospatial-sdk.git"
+  },
+  "scripts": {
+    "test": "vitest",
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "@geospatial-sdk/core": "^0.0.5-dev.31+6f70b18"
+  },
+  "bugs": {
+    "url": "https://github.com/camptocamp/geospatial-sdk/issues"
+  },
+  "gitHead": "6f70b189e8ec6200579da5266000f4840e1bd430"
+}