Salta el contingut

2.6 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
agrupacionsCensalsVigent
agrupacionsCensalsVigentText
areesBasiquesPolicials2019
areesBasiquesPolicials2020
areesBasiquesPolicials2022
areesBasiquesPolicialsVigent
areesBasiquesPolicialsVigentText
areesBasiquesSalutVigent
areesBasiquesServeisSocialsVigent
areesBasiquesServeisSocialsVigentText
areesGestioAssistencialVigent
areesHidrogeologiquesAquifersVigent
catalunyaVigent
catalunyaVigentText
comarques2022
comarquesVigent
comarquesVigentText
districtesCensals2015
districtesCensals2016
districtesCensals2017
districtesCensals2018
districtesCensals2019
districtesCensals2020
districtesCensals2021
districtesCensals2022
districtesCensals2023
districtesCensalsVigent
districtesCensalsVigentText
incendisForestalsVigent
incendisForestalsVigentText
municipis2022
municipis2022Text
municipisVigent
municipisVigentText
partitsJudicialsVigent
partitsJudicialsVigentText
plaTerritorial2015
plaTerritorialVigent
plaTerritorialVigentText
provinciesVigent
provinciesVigentText
regionsPolicialsVigent
regionsPolicialsVigentText
regionsSanitariesVigent
regionsSanitariesVigentText
seccionsCensals2015
seccionsCensals2016
seccionsCensals2017
seccionsCensals2018
seccionsCensals2019
seccionsCensals2020
seccionsCensals2021
seccionsCensals2022
seccionsCensals2023
seccionsCensalsVigent
seccionsCensalsVigentText
sectorsSanitarisVigent
vegueriesVigent
vegueriesVigentText

Layers.Vector.{id}

id
cobertes2018