first

2026-05-12 10:16:16 +07:00
parent bae0569701
commit c2efc4414f
37 changed files with 2222 additions and 18 deletions
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="id">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fitur Jalan & Parsel</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
+  <style>html,body,#map{height:100%;margin:0} .controls{position:absolute;top:8px;left:8px;z-index:400;background:#fff;padding:6px}</style>
+</head>
+<body>
+  <div class="controls">
+    <label>Tipe Jalan: <select id="tipe"><option value="nasional">Jalan Nasional</option><option value="provinsi">Jalan Provinsi</option><option value="kabupaten">Jalan Kabupaten</option></select></label>
+  </div>
+  <div id="map"></div>
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
+  <script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
+  <script>
+    const map = L.map('map').setView([-0.03,109.34],13);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+
+    const drawnItems = new L.FeatureGroup().addTo(map);
+    const drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems } });
+    map.addControl(drawControl);
+
+    function styleByRoad(type){
+      if(type==='nasional') return {color:'#d62728',weight:5};
+      if(type==='provinsi') return {color:'#ff7f0e',weight:4};
+      return {color:'#2ca02c',weight:3};
+    }
+
+    map.on(L.Draw.Event.CREATED, function (e) {
+      const layer = e.layer;
+      if (layer instanceof L.Polyline && !(layer instanceof L.Polygon)){
+        const tipe = document.getElementById('tipe').value;
+        layer.setStyle(styleByRoad(tipe));
+        layer.properties = {type:'road', road_type:tipe};
+      } else if (layer instanceof L.Polygon){
+        const geo = layer.toGeoJSON();
+        const area = turf.area(geo); // in square meters
+        layer.properties = {type:'parsel', luas_m2: Math.round(area)};
+        layer.bindPopup('Parsel — Luas: '+Math.round(area)+' m²');
+      }
+      drawnItems.addLayer(layer);
+    });
+  </script>
+</body>
+</html>