mapicgc-gl-js 1.0.7 → 1.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mapicgc-gl-js",
   "homepage": "https://openicgc.github.io/mapicgc-doc/",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "mapicgc-gl-js library",
   "author": "Institut Cartogràfic i Geològic de Catalunya",
   "license": "BSD-3-Clause",
@@ -33,44 +33,49 @@
       "require": "./dist/mapicgc-gl.mjs"
     }
   },
+  "overrides": {
+    "maplibre-gl": "^6.10.0"
+  },
   "scripts": {
     "dev": "vite",
     "build-all": "npm-run-all build && node nodeDeploy.js",
     "build": "vite build",
     "preview": "vite preview",
-    "publish": "npm publish --access public",
+    "publish": "npm publish --access public --tag latest",
     "setConfig": "node nodeSetConfig.js",
+    "publishBeta": "npm publish --tag beta --access public",
     "test": "vitest"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
+    "@babel/core": "^7.29.7",
     "@babel/preset-env": "^7.29.2",
-    "@rollup/plugin-babel": "^7.0.0",
-    "axios": "^1.15.0",
+    "@rollup/plugin-babel": "^7.1.0",
+    "axios": "^1.20.0",
     "dotenv": "^17.4.2",
-    "jest": "30.3.0",
+    "jest": "30.5.1",
     "jsdoc": "^4.0.5",
-    "jsdom": "^29.0.2",
+    "jsdom": "^30.1.0",
     "npm-run-all": "^4.1.5",
     "package-json-versionify": "^1.0.4",
     "path": "^0.12.7",
     "rollup-plugin-polyfill": "^4.2.0",
     "ssh2-sftp-client": "^12.1.1",
-    "vite": "^8.0.8",
+    "vite": "^8.3.0",
     "vite-plugin-node-polyfills": "^0.2.0",
-    "vitest": "^4.1.4",
+    "vitest": "^5.0.1",
     "xml2js": "^0.6.2"
   },
   "dependencies": {
-    "@deck.gl/core": "^9.3.0",
-    "@deck.gl/geo-layers": "^9.3.0",
-    "@deck.gl/mapbox": "^9.3.0",
-    "@loaders.gl/3d-tiles": "~4.4.1",
+    "@deck.gl/core": "^9.4.0",
+    "@deck.gl/geo-layers": "^9.3.7",
+    "@deck.gl/maplibre": "^9.4.0",
+    "@loaders.gl/3d-tiles": "^4.1.4",
     "@maplibre/maplibre-gl-compare": "^0.5.0",
     "@maplibre/maplibre-gl-geocoder": "^1.9.4",
-    "@watergis/maplibre-gl-export": "^4.1.2",
+    "@watergis/maplibre-gl-export": "^5.0.0",
     "flatgeobuf": "^4.4.0",
-    "maplibre-gl": "^5.23.0",
+    "maplibre-gl": "^6.10.0",
+    "proj4": "^2.20.9",
     "utm-latlng": "^1.0.8"
   }
 }

package/public/mapicgc-gl.css

@@ -234,6 +234,205 @@
 .maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%2333b5e5' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E");
 }
+.mapicgc-api-territorial-control-button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: inherit;
+  display: flex;
+  font-size: 0;
+  font-weight: 700;
+  justify-content: center;
+  line-height: 1;
+  width: 45px;
+  height: 45px;
+  padding: 0;
+  position: relative;
+  transition: transform 0.15s ease;
+}
+.mapicgc-api-territorial-control {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+.mapicgc-api-territorial-control.maplibregl-ctrl-group:not(:empty) {
+  box-shadow: none;
+}
+.mapicgc-api-territorial-control-button svg {
+  display: block;
+  width: 45px;
+  height: 45px;
+}
+.mapicgc-api-territorial-control-icon-image {
+  display: block;
+  height: 45px;
+  object-fit: contain;
+  pointer-events: none;
+  width: 45px;
+}
+.mapicgc-api-territorial-control-button.is-active {
+  background: transparent;
+  box-shadow: none;
+}
+.mapicgc-api-territorial-control-button.is-active::after {
+  align-items: center;
+  background: #3bb273;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  color: #ffffff;
+  content: "✓";
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 700;
+  height: 18px;
+  justify-content: center;
+  line-height: 1;
+  pointer-events: none;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 18px;
+}
+.mapicgc-api-territorial-control.mapicgc-api-territorial-control-floating {
+  margin: 0;
+  position: absolute;
+  z-index: 4;
+}
+.mapicgc-api-territorial-control-hidden {
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+  width: 0;
+}
+.mapicgc-api-territorial-panel {
+  background: #fffaf4;
+  border: 1px solid rgba(211, 124, 29, 0.25);
+  border-radius: 14px;
+  bottom: 12px;
+  box-shadow: 0 18px 48px rgba(34, 17, 6, 0.24);
+  color: #2e261d;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100% - 24px);
+  min-height: 260px;
+  overflow: hidden;
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  width: min(380px, calc(100vw - 24px));
+  z-index: 3;
+}
+.mapicgc-api-territorial-panel.is-hidden {
+  display: none;
+}
+.mapicgc-api-territorial-panel-header {
+  align-items: center;
+  background: linear-gradient(180deg, #ff9c2f 0%, #f57c00 100%);
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 14px;
+}
+.mapicgc-api-territorial-panel-title-wrap {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+.mapicgc-api-territorial-panel-title-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+.mapicgc-api-territorial-panel-title {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+.mapicgc-api-territorial-panel-close {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.18);
+  border: 0;
+  border-radius: 999px;
+  color: #fff;
+  cursor: pointer;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  width: 28px;
+}
+.mapicgc-api-territorial-panel-close:hover {
+  background: rgba(255, 255, 255, 0.28);
+}
+.mapicgc-api-territorial-panel-content {
+  display: grid;
+  gap: 10px;
+  overflow: auto;
+  padding: 14px;
+}
+.mapicgc-api-territorial-panel-row {
+  background: #fff;
+  border: 1px solid #ead9c6;
+  border-radius: 12px;
+  display: grid;
+  gap: 6px;
+  padding: 11px 12px;
+}
+.mapicgc-api-territorial-panel-row-parcela {
+  gap: 8px;
+}
+.mapicgc-api-territorial-panel-label {
+  color: #86502a;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.mapicgc-api-territorial-panel-value {
+  color: #241d15;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+  word-break: break-word;
+}
+.mapicgc-api-territorial-panel-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.mapicgc-api-territorial-panel-copy,
+.mapicgc-api-territorial-panel-link {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 700;
+  justify-content: center;
+  line-height: 1;
+  padding: 8px 11px;
+  text-decoration: none;
+}
+.mapicgc-api-territorial-panel-copy {
+  background: #fff1dd;
+  border: 1px solid #f0c79b;
+  color: #9c4d00;
+  cursor: pointer;
+}
+.mapicgc-api-territorial-panel-copy:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.mapicgc-api-territorial-panel-link {
+  background: #fff7ef;
+  border: 1px solid #efc6a5;
+  color: #8a4300;
+}
+@media (max-width: 720px) {
+  .mapicgc-api-territorial-panel {
+    left: 12px;
+    width: auto;
+  }
+}
 .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
 }

package/src/controls/ApiTerritorialControl.js

@@ -0,0 +1,222 @@
+import { searchApiTerritorialICGC } from "../territorial/searchApiTerritorialICGC";
+
+const DEFAULT_ICON_SVG = `
+<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false">
+  <circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="1.8"></circle>
+  <path d="M12 3v3M12 18v3M3 12h3M18 12h3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path>
+  <circle cx="12" cy="12" r="1.9" fill="currentColor"></circle>
+</svg>`;
+
+export default class ApiTerritorialControl {
+  constructor(options = {}) {
+    this.options = {
+      position: "top-right",
+      collections: undefined,
+      onResult: undefined,
+      skipGeometry: true,
+      title: "Informació territorial",
+      icon: DEFAULT_ICON_SVG,
+      customPosition: undefined,
+      iconClassName: "",
+      IconButton: true,
+      ...options,
+    };
+
+    this._active = false;
+    this._map = null;
+    this._button = null;
+    this._container = null;
+    this._handleMapClick = this._handleMapClick.bind(this);
+  }
+
+  onAdd(map) {
+    this._map = map;
+
+    this._container = document.createElement("div");
+    const showIconButton = this.options.IconButton !== false;
+
+    if (!showIconButton) {
+      this._container.className = "mapicgc-api-territorial-control-hidden";
+      this.setActive(true);
+      return this._container;
+    }
+
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group mapicgc-api-territorial-control";
+
+    this._button = document.createElement("button");
+    this._button.type = "button";
+    this._button.className = "mapicgc-api-territorial-control-button";
+    this._button.title = this.options.title;
+    this._button.setAttribute("aria-label", this.options.title);
+    this._button.setAttribute("aria-pressed", "false");
+
+    if (this.options.iconClassName) {
+      this._button.classList.add(this.options.iconClassName);
+    }
+
+    this._setButtonIcon(this.options.icon);
+
+    this._button.addEventListener("click", () => {
+      this.setActive(!this._active);
+    });
+
+    this._container.appendChild(this._button);
+
+    if (this.options.customPosition && this._map?.getContainer) {
+      const mapContainer = this._map.getContainer();
+      window.requestAnimationFrame(() => {
+        if (!this._container) {
+          return;
+        }
+
+        mapContainer.appendChild(this._container);
+        this._applyCustomPosition();
+      });
+    }
+
+    return this._container;
+  }
+
+  onRemove() {
+    this.setActive(false);
+
+    if (this._container?.parentNode) {
+      this._container.parentNode.removeChild(this._container);
+    }
+
+    this._map = null;
+    this._container = null;
+    this._button = null;
+  }
+
+  _setButtonIcon(icon) {
+    if (!this._button) {
+      return;
+    }
+
+    this._button.replaceChildren();
+
+    if (icon && typeof icon === "object" && typeof icon.src === "string") {
+      const image = document.createElement("img");
+      image.className = "mapicgc-api-territorial-control-icon-image";
+      image.src = icon.src;
+      image.alt = icon.alt || "";
+      this._button.appendChild(image);
+      return;
+    }
+
+    if (typeof icon === "string" && icon.trim().startsWith("<")) {
+      this._button.innerHTML = icon;
+      return;
+    }
+
+    if (typeof icon === "string" && this._looksLikeImageSrc(icon)) {
+      const image = document.createElement("img");
+      image.className = "mapicgc-api-territorial-control-icon-image";
+      image.src = icon;
+      image.alt = "";
+      this._button.appendChild(image);
+      return;
+    }
+
+    if (typeof icon === "string" && icon.trim().length > 0) {
+      this._button.textContent = icon;
+      return;
+    }
+
+    this._button.innerHTML = DEFAULT_ICON_SVG;
+  }
+
+  _applyCustomPosition() {
+    if (!this._container || !this.options.customPosition) {
+      return;
+    }
+
+    const { top, right, bottom, left, zIndex } = this.options.customPosition;
+
+    this._container.classList.add("mapicgc-api-territorial-control-floating");
+    this._container.style.top = top !== undefined ? this._toCssUnit(top) : "";
+    this._container.style.right = right !== undefined ? this._toCssUnit(right) : "";
+    this._container.style.bottom = bottom !== undefined ? this._toCssUnit(bottom) : "";
+    this._container.style.left = left !== undefined ? this._toCssUnit(left) : "";
+
+    if (zIndex !== undefined && zIndex !== null) {
+      this._container.style.zIndex = String(zIndex);
+    }
+  }
+
+  _toCssUnit(value) {
+    if (typeof value === "number") {
+      return `${value}px`;
+    }
+
+    return String(value);
+  }
+
+  _looksLikeImageSrc(icon) {
+    const value = String(icon || "").trim();
+    if (!value) {
+      return false;
+    }
+
+    if (value.startsWith("data:image/")) {
+      return true;
+    }
+
+    if (/^https?:\/\//i.test(value)) {
+      return true;
+    }
+
+    return /\.(svg|png|jpg|jpeg|webp|gif)(\?.*)?$/i.test(value);
+  }
+
+  setActive(active) {
+    this._active = Boolean(active);
+
+    if (this._button) {
+      this._button.setAttribute("aria-pressed", String(this._active));
+      this._button.classList.toggle("is-active", this._active);
+    }
+
+    if (!this._map) {
+      return;
+    }
+
+    const canvasContainer = this._map.getCanvasContainer();
+
+    if (this._active) {
+      this._map.on("click", this._handleMapClick);
+      if (canvasContainer) {
+        canvasContainer.style.cursor = "crosshair";
+      }
+    } else {
+      this._map.off("click", this._handleMapClick);
+      if (canvasContainer) {
+        canvasContainer.style.cursor = "";
+      }
+    }
+  }
+
+  async _handleMapClick(event) {
+    const lng = event?.lngLat?.lng;
+    const lat = event?.lngLat?.lat;
+
+    if (typeof lng !== "number" || typeof lat !== "number") {
+      return;
+    }
+
+    const resultat = await searchApiTerritorialICGC(
+      lng,
+      lat,
+      {
+        collections: this.options.collections,
+        fields: this.options.fields,
+        skipGeometry: this.options.skipGeometry,
+      }
+    );
+
+    if (typeof this.options.onResult === "function") {
+      this.options.onResult.call(this._map, resultat, event.lngLat);
+    }
+  }
+}

package/src/index.js

@@ -1,5 +1,22 @@
+import { setWorkerUrl } from "maplibre-gl";
+import maplibreWorkerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
 import Map from "./map/Map";
 import CompareMaps from "./plugins/CompareMaps";
 import Config from "./constants/ConfigICGC";
 
-export { Map, CompareMaps,Config };
+// maplibre-gl v6 és ESM-only. Quan es distribueix a través d'un bundler
+// (com aquí, amb `vite build`), `import.meta.url` no resol fiablement la
+// ubicació del worker dins del graf de mòduls del bundle final, així que
+// cal indicar-li explícitament la URL abans de crear cap mapa. Sense
+// això, `new maplibregl.Map(...)` es crea "bé" (canvas, WebGL...) però
+// es queda penjat esperant el worker per sempre i "load" no es dispara
+// mai, sense llançar cap error visible.
+setWorkerUrl(maplibreWorkerUrl);
+
+export { Map, CompareMaps, Config };
+// maplibre-gl v6 és ESM-only i ja no publica cap bundle UMD amb un global
+// `maplibregl`. Reexportem el seu namespace perquè qualsevol consumidor
+// (via import ES module o via el global que exposi el vostre build)
+// pugui seguir fent `new maplibregl.NavigationControl()`, etc. sense haver
+// de carregar maplibre-gl per separat amb un <script> clàssic.
+export * as maplibregl from "maplibre-gl";