Salta el contingut

2.17 Exemple visor

Exemple

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

CodePen

Codi

<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemple avançat mapicgc-gl-js</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 menú */
      #menu-group {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #000000;
      }

      #menu-group input[type="checkbox"] + label {
        background-color: #ffffff !important;
      }

      #titleDivMenu {
        background-color: rgb(213 212 212);
      }

      #titleDivMenuSub {
        background-color: #e9e9e9;
      }
    </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.DARK,
          center: [1.808, 41.618],
          zoom: 10,
          maxZoom: 19,
          hash: true,
          pitch: 0,
        });

        map.on("load", () => {
          map.addGeocoderICGC();
          map.addGeolocateControl(
            {
              positionOptions: {
                enableHighAccuracy: true,
              },
              trackUserLocation: true,
            },
            "bottom-right"
          );
          map.addFullscreenControl();
          map.addExportControl();

          map.addTerrainICGC(data.Terrains.ICGC5M, "bottom-right");
          let optionsLayer = {
            type: "raster",
            layout: {
              visibility: "visible",
            },
            paint: {
              "raster-opacity": 1,
            },
            position: "labels",
          };

          // map.addImageLayerICGC("orto2013",mapicgcgl.Layers.Orto.ortofotoColor2013, optionsLayer);

          //add vector icgc
          let optionsLayerVector = {
            type: "line",
            layout: {
              visibility: "visible",
            },
            paint: {
              "line-color": "red",
              "line-width": 0.2,
            },
            position: "lines",
          };

          map.addVectorLayerICGC(
            "Municipis", //ID
            data.Layers.VectorAdmin.municipisVigent, //Layer
            optionsLayerVector //options
          );

          let paintOptions = {
            "point-color": "yellow",
            "point-width": 3,
          };
          let layerPosition = "top"; // select: 'top', 'lines' or 'labels'
          let filterFieldRutes = "municipi"; // select 'all' for view all the features as a single layer
          let optionsLayerRutes = {
            layout: {
              visibility: "visible",
            },
            paint: {
              "line-color": "white",
              "line-width": 3,
              "line-opacity": 1,
            },
            layerPosition: "labels",
          };

          map.fetchDataAndMenu(
            "https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson",
            "RutesMontserrat",
            filterFieldRutes,
            optionsLayerRutes
          );

          let popupStyle = {
            title: "Informació:",
            image: "https://eines.icgc.cat/recursos/logos/gencat_logo_color.png",
          };
          let queryFields = ["nom", "municipi"]; // [] for query all the properties
          map.addFeatureQuery("RutesMontserrat", queryFields, popupStyle);
        });
      }
      initMap();
    </script>
  </body>
</html>