Salta el contingut

2.7 Afegir capa vector ICGC

Exemple

.addVectorLayerICGC(url,idLayer,options)

See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

CodePen

Codi

<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemple mapicgc-gl-js: Afegir capa vector de l'ICGC</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%;
      }
      /* personalitza el teu botó de llegenda: */
      #toggleLegend {
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: #3f33eb;
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      async function initMap() {
        const data = await mapicgcgl.Config.getConfigICGC();
        const map = new mapicgcgl.Map({
          container: "map",
          style: data.Styles.TOPO,
          center: [2.1464, 41.306],
          zoom: 7.4,
          maxZoom: 19,
          hash: true,
          pitch: 0,
        });
        map.on("load", () => {
          let optionsVectorAdmin = {
            type: "line",
            layout: {
              visibility: "visible",
            },
            paint: {
              "line-color": "#4832a8",
              "line-opacity": 1,
              "line-width": 1,
            },
            layerPosition: "top",
          };

          let optionsVector = {
            type: "fill",
            layout: {
              visibility: "visible",
            },
            paint: {
              "fill-color": "red",
            },
            layerPosition: "top",
          };
          map.addVectorLayerICGC(
            data.Layers.Vector.cobertes2018,
            "Cobertes",
            optionsVector
          );
          map.addVectorLayerICGC(
            data.Layers.VectorAdmin.municipisVigent,
            "municipisVigent",
            optionsVectorAdmin
          );
        });
      }
      initMap();
    </script>
  </body>
</html>

Posició (position)

id Descripció
'top' Posició de la capa per sobre de tots els elements carregats prèviament
'labels' Posició de la capa per sota de tots els elements de tipus etiqueta carregats prèviament
'lines' Posició de la capa per sota de tots els elements de tipus línia, punt i etiqueta carregats prèviament

Capes vector ICGC

Layers.VectorAdmin.{id}

id
agrupacionsCensals2015
agrupacionsCensals2016
agrupacionsCensals2017
agrupacionsCensals2018
agrupacionsCensals2019
agrupacionsCensals2020
agrupacionsCensals2021
agrupacionsCensals2022
agrupacionsCensals2023
agrupacionsCensals2024
agrupacionsCensals2025
agrupacionsCensalsVigent
agrupacionsCensalsVigentText
areesBasiquesPolicials2019
areesBasiquesPolicials2020
areesBasiquesPolicials2022
areesBasiquesPolicials2023
areesBasiquesPolicials2023Text
areesBasiquesPolicialsVigent
areesBasiquesPolicialsVigent2023
areesBasiquesPolicialsVigent2023Text
areesBasiquesPolicialsVigent2024
areesBasiquesPolicialsVigent2024Text
areesBasiquesPolicialsVigentText
areesBasiquesSalutVigent
areesBasiquesServeisSocialsVigent
areesBasiquesServeisSocialsVigentText
areesGestioAssistencialVigent
areesHidrogeologiquesAquifersVigent
catalunya2025
catalunyaVigent
catalunyaVigentText
comarques2022
comarques2025
comarques2026
comarquesVigent
comarquesVigentText
comarquesVigents
comarquesVigentsText
districtesCensals2015
districtesCensals2016
districtesCensals2017
districtesCensals2018
districtesCensals2019
districtesCensals2020
districtesCensals2021
districtesCensals2022
districtesCensals2023
districtesCensals2024
districtesCensals2025
districtesCensalsVigent
districtesCensalsVigentText
espaisNaturalsEnpeVigent
espaisNaturalsEnpeVigentText
espaisNaturalsPeinVigent
espaisNaturalsPeinVigentText
incendisForestalsVigent
incendisForestalsVigentText
municipis2022
municipis2022Text
municipis2025
municipis2026
municipisVigent
municipisVigentText
partitsJudicialsVigent
partitsJudicialsVigentText
plaTerritorial2015
plaTerritorial2019
plaTerritorial2020
plaTerritorial2021
plaTerritorial2022
plaTerritorial2023
plaTerritorial2024
plaTerritorial2025
plaTerritorialVigent
plaTerritorialVigentText
provincies2025
provinciesVigent
provinciesVigentText
provinciesVigents
provinciesVigentsText
regionsPolicialsVigent
regionsPolicialsVigentText
regionsSanitariesVigent
regionsSanitariesVigentText
seccionsCensals2015
seccionsCensals2016
seccionsCensals2017
seccionsCensals2018
seccionsCensals2019
seccionsCensals2020
seccionsCensals2021
seccionsCensals2022
seccionsCensals2023
seccionsCensals2024
seccionsCensals2025
seccionsCensalsVigent
seccionsCensalsVigentText
sectorsSanitarisVigent
vegueries2025
vegueriesVigent
vegueriesVigentText

Layers.Vector.{id}

id
cobertes2018