Integració a Leaflet

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"
    />
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <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>
      let service = "municipis";
      let puntLayer;
      let dades;

      //Connexió amb l'API i afegir al mapa la resposta geojson
      async function apiConnect(lat, lon) {
        const response = await fetch(
          `https://api.icgc.cat/territori/${service}/geo/${lon}/${lat}`
        );
        dades = await response.json();

        //si volem veure la resposta completa a la consola:
        // console.log("dades", dades);

        if (puntLayer) {
          map.removeLayer(puntLayer);
        }

        puntLayer = L.geoJSON(dades[0].features, {
          style: {
            fillColor: "yellow",
            fillOpacity: 0.8,
          },
        }).addTo(map);

        if (dades[0].features) {
          document.getElementById("info").innerHTML =
            "Municipi: " + dades[0].features[0].properties.NOMMUNI;
        } else {
          document.getElementById("info").innerHTML =
            "No hi ha dades pel punt seleccionat";
        }
      }

      // Crear el mapa
      var map = L.map("map").setView([41.387, 2.169], 9);
      var marker1;
      L.tileLayer(
        "https://geoserveis.icgc.cat/servei/catalunya/contextmaps/wmts/contextmaps-mapa-estandard/MON3857NW/{z}/{x}/{y}.png"
      ).addTo(map);

      //Obtenim les coordenades i cridem la funció apiConnect()
      //també afegim un marcador al punt clicat
      map.on("click", function (e) {
        let lon = e.latlng.lng;
        let lat = e.latlng.lat;
        apiConnect(lat, lon);

        if (!marker1) {
          marker1 = L.marker([lat, lon]).addTo(map);
        } else {
          map.removeLayer(marker1);
          marker1 = L.marker([lat, lon]).addTo(map);
        }
      });
    </script>
  </body>
</html>