Salta el contingut

2.18 Reutilització codi Maplibre

Exemple

Exemple de reutilització d'un codi Maplibre a MapICGC GL JS. Les dades utilitzades provenen de Dades Obertes i representen les explotacions agrícoles de Catalunya a la campanya 2023 gestionades per dones nascudes després del 1990.

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

CodePen

Codi

<html>
  <head>
    <meta charset="utf-8" />
    <title>Reutilització codi Maplibre</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"></div>

    <script>
      async function initMap() {
        const data = await mapicgcgl.Config.getConfigICGC();

     // const map = new maplibregl.Map({  
        const map = new mapicgcgl.Map({
          container: "map",
          style: data.Styles.TOPO, // o url directe: 'https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_gris.json'
          center: [1.1437, 42.4293],
          zoom: 12,
        });

        map.on("load", () => {

       // map.addControl(new maplibregl.NavigationControl());
          map.addNavigationControl();

       // let scale = new maplibregl.ScaleControl({
       //     maxWidth: 80,
       //     unit: 'metric'
       // });
       // map.addControl(scale);
          map.addScaleControl(
            { maxWidth: 100, unit: "metric" },
            "bottom-right"
          );

          const layers = map.getStyle().layers;

          let firstSymbolId;
          for (let i = 0; i < layers.length; i++) {
            if (layers[i].type === "symbol") {
              firstSymbolId = layers[i].id;
              break;
            }
          }
          map.addSource("areas", {
            type: "geojson",
            data: "https://analisi.transparenciacatalunya.cat/resource/iqpi-zasj.geojson?$query=SELECT%0A%20%20%60the_geom%60%2C%0A%20%20%60campanya%60%2C%0A%20%20%60oc%60%2C%0A%20%20%60nom_oc%60%2C%0A%20%20%60ajuts%60%2C%0A%20%20%60codi_pro%60%2C%0A%20%20%60nom_pro%60%2C%0A%20%20%60c_mun_ine%60%2C%0A%20%20%60n_mun_ine%60%2C%0A%20%20%60naturalesa%60%2C%0A%20%20%60data_naix%60%2C%0A%20%20%60ote%60%2C%0A%20%20%60opfh%60%2C%0A%20%20%60codi_dop%60%2C%0A%20%20%60venda_prox%60%2C%0A%20%20%60eap%60%2C%0A%20%20%60id_exp%60%2C%0A%20%20%60ha_dec%60%0AWHERE%0A%20%20caseless_one_of(%60campanya%60%2C%20%222023%22)%0A%20%20AND%20(caseless_one_of(%60naturalesa%60%2C%20%22PF%20Dona%22)%0A%20%20%20%20%20%20%20%20%20AND%20(%60data_naix%60%20%3E%20%221990%22))",
          });
          map.addLayer(
            {
              id: "agric23Dones1990",
              type: "fill",
              source: "areas",
              layout: {},
              paint: {
                "fill-color": "#f08",
                "fill-opacity": 0.4,
              },
            },
            firstSymbolId
          );
        });
      }
      initMap();
    </script>
  </body>
</html>