mapicgc-gl-js 1.0.7 → 1.0.8

package/src/plugins/CompareMaps.js

@@ -1,4 +1,5 @@
-import maplibregl from "maplibre-gl";
+
+import * as maplibregl from "maplibre-gl";
 import Compare from "@maplibre/maplibre-gl-compare";
 
 /**

package/src/territorial/ApiTerritorialControl.js

@@ -0,0 +1 @@
+export { default } from "../controls/ApiTerritorialControl";

package/src/territorial/mostraPanellInfo.js

@@ -0,0 +1,250 @@
+import proj4 from "proj4";
+
+const PANEL_ID = "mapicgc-api-territorial-panel";
+const PANEL_CONTENT_ID = "mapicgc-api-territorial-panel-content";
+const CADASTRE_URL =
+  "https://www1.sedecatastro.gob.es/CYCBienInmueble/OVCListaBienes.aspx";
+
+proj4.defs(
+  "EPSG:25831",
+  "+proj=utm +zone=31 +ellps=GRS80 +units=m +no_defs +type=crs"
+);
+
+function formatNumber(value, decimals = 2) {
+  return Number(value).toFixed(decimals);
+}
+
+function buildValueLine(label, valueText, copyText) {
+  const row = document.createElement("div");
+  row.className = "mapicgc-api-territorial-panel-row";
+
+  const labelNode = document.createElement("div");
+  labelNode.className = "mapicgc-api-territorial-panel-label";
+  labelNode.textContent = label;
+
+  const valueNode = document.createElement("div");
+  valueNode.className = "mapicgc-api-territorial-panel-value";
+  valueNode.textContent = valueText;
+
+  const actionsNode = document.createElement("div");
+  actionsNode.className = "mapicgc-api-territorial-panel-actions";
+
+  if (copyText) {
+    const copyButton = document.createElement("button");
+    copyButton.type = "button";
+    copyButton.className = "mapicgc-api-territorial-panel-copy";
+    copyButton.textContent = "Copiar";
+    copyButton.addEventListener("click", async () => {
+      try {
+        await navigator.clipboard.writeText(copyText);
+        copyButton.textContent = "Copiat";
+        setTimeout(() => {
+          copyButton.textContent = "Copiar";
+        }, 1200);
+      } catch (error) {
+        copyButton.textContent = "Error";
+        setTimeout(() => {
+          copyButton.textContent = "Copiar";
+        }, 1200);
+      }
+    });
+    actionsNode.appendChild(copyButton);
+  }
+
+  row.appendChild(labelNode);
+  row.appendChild(valueNode);
+  row.appendChild(actionsNode);
+
+  return row;
+}
+
+function formatCollectionTitle(collectionId) {
+  const titles = {
+    comarques: "Comarca",
+    municipis: "Municipi",
+    provincies: "Província",
+    "arees-basiques-salut": "Àrea bàsica de salut",
+    "arees-basiques-policials": "Àrea bàsica policial",
+    "arees-basiques-serveis-socials": "Àrea bàsica de serveis socials",
+    "parcelles-cadastre": "Parcel·la cadastral",
+  };
+
+  if (titles[collectionId]) {
+    return titles[collectionId];
+  }
+
+  return collectionId
+    .replace(/[-_]+/g, " ")
+    .replace(/\b\w/g, (match) => match.toUpperCase());
+}
+
+function formatFieldLabel(fieldName) {
+  return String(fieldName)
+    .replace(/[_-]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .replace(/\b\w/g, (match) => match.toUpperCase());
+}
+
+function ensurePanel(map) {
+  const mapContainer =
+    map?.getContainer?.() || document.getElementById("map") || document.body;
+
+  let panel = document.getElementById(PANEL_ID);
+  if (!panel) {
+    panel = document.createElement("aside");
+    panel.id = PANEL_ID;
+    panel.className = "mapicgc-api-territorial-panel is-hidden";
+
+    const header = document.createElement("header");
+    header.className = "mapicgc-api-territorial-panel-header";
+
+    const titleWrap = document.createElement("div");
+    titleWrap.className = "mapicgc-api-territorial-panel-title-wrap";
+
+    const icon = document.createElement("span");
+    icon.className = "mapicgc-api-territorial-panel-title-icon";
+    icon.textContent = "ⓘ";
+
+    const title = document.createElement("span");
+    title.className = "mapicgc-api-territorial-panel-title";
+    title.textContent = "Informació del punt";
+
+    titleWrap.appendChild(icon);
+    titleWrap.appendChild(title);
+
+    const closeButton = document.createElement("button");
+    closeButton.type = "button";
+    closeButton.className = "mapicgc-api-territorial-panel-close";
+    closeButton.textContent = "✕";
+    closeButton.setAttribute("aria-label", "Tancar panell");
+    closeButton.addEventListener("click", () => {
+      panel.classList.add("is-hidden");
+    });
+
+    header.appendChild(titleWrap);
+    header.appendChild(closeButton);
+
+    const content = document.createElement("div");
+    content.id = PANEL_CONTENT_ID;
+    content.className = "mapicgc-api-territorial-panel-content";
+
+    panel.appendChild(header);
+    panel.appendChild(content);
+    mapContainer.appendChild(panel);
+  }
+
+  return panel;
+}
+
+export default function mostraPanellInfo(resultat, lngLat) {
+  const map = this?.map || this;
+  const panel = ensurePanel(map);
+  const content = document.getElementById(PANEL_CONTENT_ID);
+
+  if (!content) {
+    return null;
+  }
+
+  content.replaceChildren();
+
+  const coordinates = lngLat || {
+    lng: resultat?.lng,
+    lat: resultat?.lat,
+  };
+
+  const lng = Number(coordinates?.lng);
+  const lat = Number(coordinates?.lat);
+  const [utmX, utmY] = proj4("EPSG:4326", "EPSG:25831", [lng, lat]);
+  const utmText = `ETRS89 UTM 31N X ${formatNumber(utmX, 2)} Y ${formatNumber(utmY, 2)}`;
+  const wgs84Text = `WGS84 Lon ${formatNumber(lng, 6)} Lat ${formatNumber(lat, 6)}`;
+  content.appendChild(buildValueLine("Coordenades UTM", utmText, utmText));
+  content.appendChild(buildValueLine("Coordenades WGS84", wgs84Text, wgs84Text));
+
+  const resultats = resultat?.resultats || {};
+
+  Object.entries(resultats).forEach(([collectionId, value]) => {
+    if (!value || (typeof value === "object" && Object.keys(value).length === 0)) {
+      return;
+    }
+
+    const collectionTitle = formatCollectionTitle(collectionId);
+
+    if (typeof value !== "object") {
+      const valueText = String(value);
+      content.appendChild(buildValueLine(collectionTitle, valueText, valueText));
+      return;
+    }
+
+    Object.entries(value).forEach(([propertyKey, propertyValue]) => {
+      if (propertyValue === undefined || propertyValue === null || propertyValue === "") {
+        return;
+      }
+
+      const label = `${collectionTitle} · ${formatFieldLabel(propertyKey)}`;
+      const valueText =
+        typeof propertyValue === "object"
+          ? JSON.stringify(propertyValue)
+          : String(propertyValue);
+      content.appendChild(buildValueLine(label, valueText, valueText));
+    });
+  });
+
+  const cadastre = resultats["parcelles-cadastre"];
+  const parcelReference = cadastre?.refcadp || cadastre?.REFCADP;
+
+  if (parcelReference) {
+    const cadastreRow = document.createElement("div");
+    cadastreRow.className = "mapicgc-api-territorial-panel-row mapicgc-api-territorial-panel-row-parcela";
+
+    const parcelLabel = document.createElement("div");
+    parcelLabel.className = "mapicgc-api-territorial-panel-label";
+    parcelLabel.textContent = "Cadastre";
+
+    const parcelValue = document.createElement("div");
+    parcelValue.className = "mapicgc-api-territorial-panel-value";
+    parcelValue.textContent = parcelReference;
+
+    const parcelActions = document.createElement("div");
+    parcelActions.className = "mapicgc-api-territorial-panel-actions";
+
+    const copyParcelButton = document.createElement("button");
+    copyParcelButton.type = "button";
+    copyParcelButton.className = "mapicgc-api-territorial-panel-copy";
+    copyParcelButton.textContent = "Copiar";
+    copyParcelButton.addEventListener("click", async () => {
+      try {
+        await navigator.clipboard.writeText(parcelReference);
+        copyParcelButton.textContent = "Copiat";
+        setTimeout(() => {
+          copyParcelButton.textContent = "Copiar";
+        }, 1200);
+      } catch (error) {
+        copyParcelButton.textContent = "Error";
+        setTimeout(() => {
+          copyParcelButton.textContent = "Copiar";
+        }, 1200);
+      }
+    });
+
+    const cadastreLink = document.createElement("a");
+    cadastreLink.className = "mapicgc-api-territorial-panel-link";
+    cadastreLink.href = `${CADASTRE_URL}?RefC=${encodeURIComponent(parcelReference)}`;
+    cadastreLink.target = "_blank";
+    cadastreLink.rel = "noreferrer";
+    cadastreLink.textContent = "Obrir";
+    cadastreLink.title = "Obrir la Seu Electrònica del Cadastre";
+
+    parcelActions.appendChild(copyParcelButton);
+    parcelActions.appendChild(cadastreLink);
+
+    cadastreRow.appendChild(parcelLabel);
+    cadastreRow.appendChild(parcelValue);
+    cadastreRow.appendChild(parcelActions);
+    content.appendChild(cadastreRow);
+  }
+
+  panel.classList.remove("is-hidden");
+
+  return panel;
+}

package/src/territorial/searchApiTerritorialICGC.js

@@ -0,0 +1,250 @@
+const TERRITORIAL_BASE_URL = "https://api.icgc.cat/territorial";
+
+const DEFAULT_COLLECTIONS = [
+  "comarques",
+  "municipis",
+  "arees-basiques-salut",
+  "arees-basiques-policials",
+  "arees-basiques-serveis-socials",
+  "parcelles-cadastre",
+];
+
+const COLLECTION_ALIASES = {
+  "arees-basqieus-policials": "arees-basiques-policials",
+  "arees-basiques-policial": "arees-basiques-policials",
+};
+
+function normalizeLookupKey(value) {
+  return String(value || "")
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "");
+}
+
+function normalizeFieldList(fields) {
+  if (!fields) {
+    return null;
+  }
+
+  if (Array.isArray(fields)) {
+    return fields.map((field) => String(field).trim()).filter(Boolean);
+  }
+
+  if (typeof fields === "string") {
+    return fields
+      .split(",")
+      .map((field) => field.trim())
+      .filter(Boolean);
+  }
+
+  return null;
+}
+
+function normalizeTerritorialOptions(collectionsOrOptions) {
+  if (!collectionsOrOptions) {
+    return {
+      collections: DEFAULT_COLLECTIONS,
+      fields: null,
+      skipGeometry: false,
+    };
+  }
+
+  if (Array.isArray(collectionsOrOptions)) {
+    return {
+      collections: collectionsOrOptions,
+      fields: null,
+      skipGeometry: false,
+    };
+  }
+
+  if (typeof collectionsOrOptions === "object") {
+    const collections = collectionsOrOptions.collections || DEFAULT_COLLECTIONS;
+    const fields = collectionsOrOptions.fields || null;
+    const skipGeometry = collectionsOrOptions.skipGeometry === true;
+
+    return {
+      collections,
+      fields,
+      skipGeometry,
+    };
+  }
+
+  return {
+    collections: DEFAULT_COLLECTIONS,
+    fields: null,
+    skipGeometry: false,
+  };
+}
+
+function normalizeCollections(collections) {
+  if (!collections) {
+    return DEFAULT_COLLECTIONS;
+  }
+
+  if (typeof collections === "string") {
+    return [collections.trim()].filter(Boolean);
+  }
+
+  if (!Array.isArray(collections)) {
+    return DEFAULT_COLLECTIONS;
+  }
+
+  return collections
+    .map((collection) => {
+      if (typeof collection === "string") {
+        const normalized = collection.trim();
+        return COLLECTION_ALIASES[normalized] || normalized;
+      }
+
+      if (collection && typeof collection === "object") {
+        const normalized = String(collection.id || collection.name || "").trim();
+        return COLLECTION_ALIASES[normalized] || normalized;
+      }
+
+      return "";
+    })
+    .filter(Boolean);
+}
+
+async function searchTerritorialCollection(collectionId, bbox, options = {}) {
+  const params = new URLSearchParams({
+    bbox: bbox.join(","),
+    f: "geojson",
+  });
+
+  if (options.skipGeometry) {
+    params.set("skipgeometry", "true");
+  }
+
+  const url = `${TERRITORIAL_BASE_URL}/collections/${collectionId}/items?${params.toString()}`;
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        Accept: "application/geo+json",
+      },
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const geojson = await response.json();
+    const feature = geojson?.features?.[0] || null;
+    const features = Array.isArray(geojson?.features) ? geojson.features : [];
+
+    return {
+      properties: feature?.properties || null,
+      firstFeature: feature,
+      features,
+      geojson,
+    };
+  } catch (error) {
+    return {
+      properties: null,
+      firstFeature: null,
+      features: [],
+      geojson: null,
+    };
+  }
+}
+
+function filterTerritorialProperties(properties, fields, collectionId) {
+  if (!properties || !fields) {
+    return properties || null;
+  }
+
+  const fieldsForCollection = Array.isArray(fields)
+    ? fields
+    : normalizeFieldList(fields?.[collectionId]) || normalizeFieldList(fields?.default);
+
+  if (!fieldsForCollection || fieldsForCollection.length === 0) {
+    return properties;
+  }
+
+  const filtered = {};
+  const normalizedPropertyKeys = new Map(
+    Object.keys(properties).map((key) => [normalizeLookupKey(key), key])
+  );
+
+  for (const fieldName of fieldsForCollection) {
+    const directMatch = Object.prototype.hasOwnProperty.call(properties, fieldName)
+      ? fieldName
+      : null;
+    const normalizedMatch = normalizedPropertyKeys.get(normalizeLookupKey(fieldName));
+    const propertyKey = directMatch || normalizedMatch;
+
+    if (propertyKey) {
+      const value = properties[propertyKey];
+      if (value !== undefined && value !== null && value !== "") {
+        filtered[propertyKey] = value;
+      }
+    }
+  }
+
+  if (Object.keys(filtered).length > 0) {
+    return filtered;
+  }
+
+  // If requested fields do not match this collection, keep full properties for export use cases.
+  return properties;
+}
+
+export async function searchApiTerritorialICGC(
+  lng,
+  lat,
+  collectionsOrOptions = DEFAULT_COLLECTIONS
+) {
+  const { collections, fields, skipGeometry } = normalizeTerritorialOptions(collectionsOrOptions);
+  const requestedCollections = normalizeCollections(collections);
+  const delta = 0.00005;
+  const bbox = [lng - delta, lat - delta, lng + delta, lat + delta];
+
+  const collectionResults = await Promise.all(
+    requestedCollections.map(async (collectionId) => [
+      collectionId,
+      await searchTerritorialCollection(collectionId, bbox, { skipGeometry }),
+    ])
+  );
+
+  const resultats = Object.fromEntries(
+    collectionResults.map(([collectionId, data]) => [
+      collectionId,
+      filterTerritorialProperties(data?.properties, fields, collectionId),
+    ])
+  );
+
+  const firstFeature = Object.fromEntries(
+    collectionResults.map(([collectionId, data]) => [
+      collectionId,
+      data?.firstFeature || null,
+    ])
+  );
+
+  const features = Object.fromEntries(
+    collectionResults.map(([collectionId, data]) => [
+      collectionId,
+      data?.features || [],
+    ])
+  );
+
+  const raw = Object.fromEntries(
+    collectionResults.map(([collectionId, data]) => [
+      collectionId,
+      data?.geojson || null,
+    ])
+  );
+
+  return {
+    lng,
+    lat,
+    bbox,
+    resultats,
+    firstFeature,
+    features,
+    raw,
+  };
+}
+
+export default searchApiTerritorialICGC;

package/test/exemples/addApiTerritorialICGC.html

@@ -0,0 +1,113 @@
+<html>
+<head>
+  <meta charset='utf-8' />
+  <title>addApiTerritorialICGC.html</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    #map {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div id="map" class="map"></div>
+
+  <script type="module">
+    import { Map, Config } from "../../dist/mapicgc-gl.mjs";
+
+    async function initMap() {
+      const data = await Config.getConfigICGC();
+      const map = new Map({
+        container: "map",
+        // Estil base del mapa.
+        style: data.Styles.TOPO,
+        // Centre inicial sobre Catalunya.
+        center: [1.808, 41.618],
+        // Zoom inicial recomanat per veure territori amb detall.
+        zoom: 10,
+        // Límits de zoom del visor.
+        maxZoom: 19,
+        // Activa la sincronització URL <-> mapa.
+        hash: true,
+        // Sense inclinació inicial.
+        pitch: 0,
+      });
+
+      map.on("load", () => {
+        const mapPinIconSvg = `
+          <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false">
+            <circle cx="12" cy="12" r="11" fill="#cfd8e3" stroke="#304b63" stroke-width="1.2"></circle>
+            <path d="M4.8 16.6 4 7.4h5.1v4L6.5 13l4.2 3.1h4.7l-.1-2.6-2.2-2 2.7-1.4h3l-.7 6.5z" fill="#8ed27a" stroke="#2e4a63" stroke-linejoin="round" stroke-width="0.9"></path>
+            <path d="M12 5.7c-1.8 0-3.2 1.4-3.2 3.2 0 2.2 3.2 5.4 3.2 5.4s3.2-3.2 3.2-5.4c0-1.8-1.4-3.2-3.2-3.2z" fill="#ff7d62" stroke="#2e4a63" stroke-width="0.9"></path>
+            <circle cx="12" cy="8.9" r="1.1" fill="#e9f0f8" stroke="#2e4a63" stroke-width="0.7"></circle>
+          </svg>`;
+        const mapPinIconImage = "https://uxwing.com/wp-content/themes/uxwing/download/location-travel-map/unknown-map-location-icon.png"
+          map.addApiTerritorialICGC({
+          // Mostra o amaga el panell lateral automàtic.
+          infoPanel: true,
+
+          // true: botó visible. false: consulta activa sense botó.
+          IconButton: true,
+
+          // Icona del botó: text, SVG inline, URL d'imatge o objecte { src, alt }.
+          icon: mapPinIconSvg,
+          // icon: mapPinIconImage,
+
+          // Posició lliure dins del contenidor del mapa.
+          // (Si ho treus, usarà la posició MapLibre de l'argument "top-right").
+          customPosition: {
+            top: 88,
+            left: 14,
+            zIndex: 6,
+          },
+
+          // Col·leccions que es consulten al clic.
+          collections: [
+            "comarques",
+            "municipis",
+            "provincies",
+            "parcelles-cadastre",
+            "arees-basiques-policials"
+          ],
+
+          // Camps que volem conservar de cada col·lecció. Si no es defineix, es retorna tota la propietat trobada.
+          // Si el camp no existeix en la resposta, no es mostra.
+          fields: {
+            default: ["id", "nom"],
+            municipis: ["NOMMUNI"],
+            comarques: ["NOMCOMAR"],
+            provincies: ["NOMPROV"],
+            "arees-basiques-policials": [
+              "Àrea bàsica policial",
+              "Regió policial",
+              "Població"
+            ],
+            "parcelles-cadastre": ["refcadp"],
+          },
+
+          // Callback per rebre la informació retornada per l'API.
+          // Es pot fer servir per logs, destacar elements o disparar altres accions.
+          onResult(resultat, lngLat) {
+            console.log("Resultat territorial (complet):", resultat);
+            
+            // Exemple: retornar la dada perquè la pugui usar qui crida el mètode.
+            return resultat;
+          },
+        }, "top-right");
+      });
+    }
+
+    initMap();
+  </script>
+</body>
+</html>

package/test/exemples/addBasemap.html

@@ -5,7 +5,6 @@
   <title>Exemple mapicgc-gl-js: Afegir mapa base ICGC</title>
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
 
-  <script src="../../dist/mapicgc-gl.js"></script>
   <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
 
   <style>
@@ -36,11 +35,12 @@
   <body>
     <div id="map"></div>
     <!-- <div id="basemap-group" class="basemap-group"></div> -->
-    <script>
+    <script type="module">
+      import { Map, Config } from "../../dist/mapicgc-gl.mjs";
      
       async function initMap() {
-        const data = await  mapicgcgl.Config.getConfigICGC();
-        const map = new mapicgcgl.Map({
+        const data = await Config.getConfigICGC();
+        const map = new Map({
           container: "map",
           style: data.Styles.ORTO, // <-- add style basemap here
           center: [2.1464, 41.306],

package/test/exemples/addCompare.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8" />
   <title>Exemple mapicgc-gl-js: Afegir comparador</title>
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-  <script src="../../dist/mapicgc-gl.js"></script>
   <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
 
   <style>
@@ -37,10 +36,12 @@
     <div id="after" class="map"></div>
   </div>
 
-  <script>
+  <script type="module">
+    import { Map, Config, CompareMaps } from "../../dist/mapicgc-gl.mjs";
+
     async function initMap() {
-      const data = await mapicgcgl.Config.getConfigICGC();;
-      const map1 = new mapicgcgl.Map({
+      const data = await Config.getConfigICGC();
+      const map1 = new Map({
         container: "before",
         style: data.Styles.ORTO,
         center: [1.1464, 41.706],
@@ -50,7 +51,7 @@
         pitch: 0,
       });
 
-      const map2 = new mapicgcgl.Map({
+      const map2 = new Map({
         container: "after",
         style: data.Styles.TOPO,
         center: [1.1464, 41.706],
@@ -62,7 +63,7 @@
 
       const container = "#comparison-container";
 
-      const map = new mapicgcgl.CompareMaps(map1, map2, container, {});
+      const map = new CompareMaps(map1, map2, container, {});
     }
 
     initMap();