MapBox Overlay Layer from Martin #1

Feature Kunci dari MapBOX adalah queryRenderedFeature.

Leaflet kagak ada https://stackoverflow.com/questions/47070016/leaflet-how-to-query-rendered-features-in-vector-tiles

JANLUPA: MARTINNYA INI MASIH DI LOCAL

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
    <style>
      #map {
        position: absolute;
        width: 100vw;
        top: 0;
        bottom: 0;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .filter-ctrl {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
      }
    </style>
  </head>
  <body>
    <div id="map">
      <div class="filter-ctrl">
        <input
          id="filter-input"
          type="text"
          name="filter"
          placeholder="Jenis Fungsi"
        />
      </div>
    </div>

    <script>
      function debounce(func, timeout = 300) {
        let timer;
        return (...args) => {
          clearTimeout(timer);
          timer = setTimeout(() => {
            func.apply(this, args);
          }, timeout);
        };
      }

      function showJenisFungsi() {
        const filterInput = document.getElementById("filter-input");
        const jenisFungsi = filterInput.value;
        console.log(jenisFungsi);
        const queryUrl = `http://localhost:3000/function_zxy_query?q=${jenisFungsi}`;
        const url = "http://localhost:3000/master_plan";

        const newUrl = jenisFungsi !== "" ? queryUrl : url;
        map.getSource("master_plan").setUrl(newUrl);
        console.log(newUrl);
      }

      const processName = debounce(() => showJenisFungsi());

      mapboxgl.accessToken =
        "pk.eyJ1IjoidW1hcmFiZCIsImEiOiJjbHpiMmtmc2Iwa243MmxuNjQ4dTlib3ZuIn0.5Z3ne-_4aEKb7IStuew6wg";
      const map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        center: [106.94, -6.3],
        zoom: 16,
      });
      var popup = new mapboxgl.Popup({
        closeButton: false,
      });
      map.on("load", () => {
        map.addSource("master_plan", {
          type: "vector",
          url: "http://localhost:3000/master_plan",
        });

        map.addSource("persil_tanahs", {
          type: "vector",
          url: "http://localhost:3000/persil_tanahs",
        });

        map.addLayer({
          id: "master_plan",
          type: "fill",
          paint: {
            "fill-color": "#ff80ff",
            "fill-opacity": 0.5,
            "fill-outline-color": "#000",
          },
          source: "master_plan",
          "source-layer": "master_plan",
          //filter: ["==", "jenisfungs", "Residential"],
        });

        map.addLayer({
          id: "persil_tanahs",
          type: "fill",
          paint: {
            "fill-color": "#0080ff",
            "fill-opacity": 0.5,
            "fill-outline-color": "#000",
          },
          source: "persil_tanahs",
          "source-layer": "persil_tanahs",
          //filter: ["==", "jenisfungs", "Residential"],
        });

        const filterInput = document.getElementById("filter-input");
        filterInput.addEventListener("keyup", processName);
      });

      map.on("click", (e) => {
        const features = map.queryRenderedFeatures(e.point, {
          layers: ["persil_tanahs", "master_plan"], // daftar layer yang ingin dicek
        });

        if (!features.length) return;

        // Bangun isi popup dari semua fitur
        let popupContent =
          "<div><strong>Informasi Fitur di lokasi ini:</strong><ul>";

        features.forEach((feature, index) => {
          popupContent += `<h4>Fitur ${index + 1} (${
            feature.layer.id
          })</h4><ul>`;

          const props = feature.properties;
          for (let key in props) {
            popupContent += `<li><strong>${key}:</strong> ${props[key]}</li>`;
          }

          popupContent += "</ul>";
        });

        popupContent += "</div>";

        new mapboxgl.Popup()
          .setLngLat(e.lngLat)
          .setHTML(popupContent)
          .addTo(map);
      });
    </script>
  </body>
</html>

Feature Kunci dari MapBOX adalah queryRenderedFeature. Leaflet kagak ada https://stackoverflow.com/questions/47070016/leaflet-how-to-query-rendered-features-in-vector-tiles JANLUPA: MARTINNYA INI MASIH DI LOCAL ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" /> <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script> <style> #map { position: absolute; width: 100vw; top: 0; bottom: 0; } body { margin: 0; padding: 0; } .filter-ctrl { position: absolute; top: 10px; right: 10px; z-index: 10; } </style> </head> <body> <div id="map"> <div class="filter-ctrl"> <input id="filter-input" type="text" name="filter" placeholder="Jenis Fungsi" /> </div> </div> <script> function debounce(func, timeout = 300) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, timeout); }; } function showJenisFungsi() { const filterInput = document.getElementById("filter-input"); const jenisFungsi = filterInput.value; console.log(jenisFungsi); const queryUrl = `http://localhost:3000/function_zxy_query?q=${jenisFungsi}`; const url = "http://localhost:3000/master_plan"; const newUrl = jenisFungsi !== "" ? queryUrl : url; map.getSource("master_plan").setUrl(newUrl); console.log(newUrl); } const processName = debounce(() => showJenisFungsi()); mapboxgl.accessToken = "pk.eyJ1IjoidW1hcmFiZCIsImEiOiJjbHpiMmtmc2Iwa243MmxuNjQ4dTlib3ZuIn0.5Z3ne-_4aEKb7IStuew6wg"; const map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v11", center: [106.94, -6.3], zoom: 16, }); var popup = new mapboxgl.Popup({ closeButton: false, }); map.on("load", () => { map.addSource("master_plan", { type: "vector", url: "http://localhost:3000/master_plan", }); map.addSource("persil_tanahs", { type: "vector", url: "http://localhost:3000/persil_tanahs", }); map.addLayer({ id: "master_plan", type: "fill", paint: { "fill-color": "#ff80ff", "fill-opacity": 0.5, "fill-outline-color": "#000", }, source: "master_plan", "source-layer": "master_plan", //filter: ["==", "jenisfungs", "Residential"], }); map.addLayer({ id: "persil_tanahs", type: "fill", paint: { "fill-color": "#0080ff", "fill-opacity": 0.5, "fill-outline-color": "#000", }, source: "persil_tanahs", "source-layer": "persil_tanahs", //filter: ["==", "jenisfungs", "Residential"], }); const filterInput = document.getElementById("filter-input"); filterInput.addEventListener("keyup", processName); }); map.on("click", (e) => { const features = map.queryRenderedFeatures(e.point, { layers: ["persil_tanahs", "master_plan"], // daftar layer yang ingin dicek }); if (!features.length) return; // Bangun isi popup dari semua fitur let popupContent = "<div><strong>Informasi Fitur di lokasi ini:</strong><ul>"; features.forEach((feature, index) => { popupContent += `<h4>Fitur ${index + 1} (${ feature.layer.id })</h4><ul>`; const props = feature.properties; for (let key in props) { popupContent += `<li><strong>${key}:</strong> ${props[key]}</li>`; } popupContent += "</ul>"; }); popupContent += "</div>"; new mapboxgl.Popup() .setLngLat(e.lngLat) .setHTML(popupContent) .addTo(map); }); </script> </body> </html> ```

Pop-UP Overlay Martin.zip

1.6 KiB