2.20 Afegir funció consulta API Territorial ICGC

Exemple

.addApiTerritorialICGC(options,position)
See the Pen Exemple addAPITerritorialICGC by unitatgeostart (@unitatgeostart) on CodePen.
Codi

<html>
  <head>
    <meta charset="utf-8" />
    <title>addApiTerritorialICGC.html</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.js"></script>
    <link
      href="https://eines.icgc.cat/recursos/mapicgc-gl-js/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>
      async function initMap() {
        const data = await mapicgcgl.Config.getConfigICGC();
        const map = new mapicgcgl.Map({
          container: "map",
          // Estil base del mapa.
          style: data.Styles.LIGHT,
          // 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: 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ó.
              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.
              onResult(resultat, lngLat) {
                console.log("Resultat territorial (complet):", resultat);
                return resultat;
              },
            },
            "top-right",
          );
        });
      }

      initMap();
    </script>
  </body>
</html>