Integració a Mapbox

See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.
<html>
  <head>
    <meta charset="utf-8" />
    <title>Connexió a l'API</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css"
      rel="stylesheet"
    />

    <style>
      #info {
        background-color: white;
        font-family: Arial;
        text-align: center;
        padding: 5px;
        font-weight: 500;
        font-size: 0.9em;
      }
    </style>
  </head>
  <body>
    <div id="info">Fes clic sobre el mapa.</div>
    <div id="map"></div>
    <script>
      var marker1;
      var map = new mapboxgl.Map({
        container: "map",
        style:
          "https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json", //(orto) "https://geoserveis.icgc.cat/contextmaps/icgc_orto_estandard.json",
        center: [2.0042, 41.4747],
        zoom: 8,
        attributionControl: false,
        hash: false,
      });
      map.addControl(new mapboxgl.NavigationControl());

      map.on("click", function (e) {
        let lon = e.lngLat.lng;
        let lat = e.lngLat.lat;
        apiConnect(lat, lon, "municipis");
        if (!marker1) {
          marker1 = new mapboxgl.Marker({ color: "#FF6E42" })
            .setLngLat([lon, lat])
            .addTo(map);
        } else {
          marker1.remove();
          marker1 = new mapboxgl.Marker({ color: "#FF6E42" })
            .setLngLat([lon, lat])
            .addTo(map);
        }
      });

      async function apiConnect(lat, lon, service) {
        const response = await fetch(
          `https://api.icgc.cat/territori/${service}/geo/${lon}/${lat}`
        );
        const dades = await response.json();
        console.log("dades", dades);
        document.getElementById("info").innerHTML =
          "Municipi: " + dades[0].features[0].properties.NOMMUNI;

        if (!map.getLayer("punts")) {
          map.addSource("punts", {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: dades[0].features,
            },
          });
          map.addLayer({
            id: "punts",
            type: "fill",
            source: "punts",
            paint: {
              "fill-color": "#f0f0f0",
              "fill-opacity": 0.6,
            },
          });
        } else {
          map.removeLayer("punts").removeSource("punts");
          map.addSource("punts", {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: dades[0].features,
            },
          });
          map.addLayer({
            id: "punts",
            type: "fill",
            source: "punts",
            paint: {
              "fill-color": "#ffffff",
              "fill-opacity": 0.75,
            },
          });
        }
      }
    </script>
  </body>
</html>