Kode Script Pemetaan For Blogger

Script Pemetaan Dasar

Script Ini Merupakan Script Pemetaan Dasar yang Dapat Membaca File Shapefile ArcGIS, Dapat Dijadikan Dasar Dalam Pengecekan Alamat Serta Luas Lahan.

📄 HTML CODE

<!-- MAP CONTAINER -->
<div id="map" style="width:100%; height:520px; border-radius:10px;"></div>

<!-- UPLOAD SHP -->
<div style="margin:10px 0;">
  <input type="file" id="fileInput" accept=".zip">
</div>

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css">

<!-- JS LIBRARIES -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
<script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>

<script>
/* =========================
   INIT MAP & BASEMAPS
========================= */
var map = L.map('map').setView([-0.5, 101.45], 6);

var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Copyright © GISTARIAU 2025'
}).addTo(map);

var esriSat = L.tileLayer(
  'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  {
    attribution: 'Copyright © GISTARIAU 2025'
  }
);

/* =========================
   DIGITASI LAYER
========================= */
var drawnItems = new L.FeatureGroup().addTo(map);

/* LAYER CONTROL */
L.control.layers(
  {
    "OpenStreetMap": osm,
    "Satelit": esriSat
  },
  {
    "Digitasi": drawnItems
  },
  { collapsed: false }
).addTo(map);

/* =========================
   DRAW CONTROL (POLYGON)
========================= */
var drawControl = new L.Control.Draw({
  edit: { featureGroup: drawnItems },
  draw: {
    polygon: true,
    polyline: false,
    marker: false,
    rectangle: false,
    circle: false
  }
});
map.addControl(drawControl);

/* =========================
   DIGITASI POLYGON
========================= */
map.on(L.Draw.Event.CREATED, function (e) {
  var layer = e.layer;
  var geojson = layer.toGeoJSON();
  var luasHa = (turf.area(geojson) / 10000).toFixed(2);

  layer.feature = {
    type: "Feature",
    properties: { luas_ha: luasHa },
    geometry: geojson.geometry
  };

  layer.bindPopup(
    `<b>Hasil Digitasi</b><br>
     Luas Area: <b>${luasHa} Ha</b>`
  );

  drawnItems.addLayer(layer);
});

/* =========================
   UPLOAD SHP (ZIP)
========================= */
document.getElementById("fileInput").addEventListener("change", function(e){
  var file = e.target.files[0];
  if (!file) return;

  var reader = new FileReader();

  if(file.name.endsWith(".zip")){
    reader.onload = function(){
      shp(reader.result).then(function(geojson){
        L.geoJSON(geojson, {
          onEachFeature: function(feature, layer){
            if(feature.geometry.type === "Polygon" || feature.geometry.type === "MultiPolygon"){
              var area = (turf.area(feature) / 10000).toFixed(2);
              feature.properties = feature.properties || {};
              feature.properties.luas_ha = area;

              layer.bindPopup(
                `<b>Data Polygon</b><br>
                 Luas Area: <b>${area} Ha</b>`
              );

              drawnItems.addLayer(layer);
            }
          }
        });
        map.fitBounds(drawnItems.getBounds());
      });
    };
    reader.readAsArrayBuffer(file);
  }
});
</script>

<!-- TUTORIAL SPOILER -->
<style>
.tutorial-box {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  font-family: Arial, sans-serif;
}

.tutorial-title {
  padding: 12px 15px;
  cursor: pointer;
  font-weight: bold;
  background: #f5f5f5;
  border-radius: 8px;
}

.tutorial-content {
  display: none;
  padding: 15px;
  border-top: 1px solid #ddd;
  background: #fff;
}

.tutorial-content ol {
  padding-left: 18px;
}

.tutorial-content li {
  margin-bottom: 8px;
}
</style>

<div class="tutorial-box">
  <div class="tutorial-title" onclick="toggleTutorial()">
    📘 Tata Cara Penggunaan Tools Pemetaan (Klik untuk membuka)
  </div>

  <div class="tutorial-content" id="tutorialContent">
    <ol>
      <li>
        <b>Pilih Jenis Peta</b><br>
        Gunakan menu layer di kanan peta untuk memilih:
        <ul>
          <li>🗺️ OpenStreetMap (peta dasar)</li>
          <li>🛰️ Satelit (citra udara)</li>
        </ul>
      </li>

      <li>
        <b>Upload Data SHP</b><br>
        Klik tombol <i>Choose File</i>, lalu unggah file SHP dalam format <b>.ZIP</b>.
        Data polygon akan otomatis tampil di peta.
      </li>

      <li>
        <b>Melakukan Digitasi Polygon</b><br>
        Klik ikon <b>Polygon</b> di toolbar peta, lalu:
        <ul>
          <li>Klik beberapa titik di peta</li>
          <li>Double klik untuk menyelesaikan polygon</li>
        </ul>
      </li>

      <li>
        <b>Melihat Luas Area</b><br>
        Klik polygon hasil digitasi atau upload.
        Luas area akan ditampilkan dalam satuan <b>Hektar (Ha)</b>.
      </li>

      <li>
        <b>Mengedit atau Menghapus Polygon</b><br>
        Gunakan ikon <b>Edit</b> atau <b>Delete</b> pada toolbar untuk memperbaiki bentuk polygon.
      </li>

      <li>
        <b>Catatan Penting</b><br>
        <ul>
          <li>Perhitungan luas menggunakan sistem geodesic (akurasi tinggi)</li>
          <li>Hasil pengukuran bersifat estimasi untuk analisis awal</li>
          <li>Disarankan verifikasi lapangan untuk data resmi</li>
        </ul>
      </li>
    </ol>
  </div>
</div>

<script>
function toggleTutorial() {
  var content = document.getElementById("tutorialContent");
  if (content.style.display === "none" || content.style.display === "") {
    content.style.display = "block";
  } else {
    content.style.display = "none";
  }
}
</script>  

🔍 Live Preview