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,36 @@
+<!doctype html>
+<html lang="id">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Layer Groups & Choropleth</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <style>html,body,#map{height:100%;margin:0}</style>
+</head>
+<body>
+  <div id="map"></div>
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script>
+    const map = L.map('map').setView([-0.03,109.34],11);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+
+    // Layer group for SPBU points
+    const spbuLayer = L.layerGroup();
+    const spbuMarkers = [L.marker([-0.03,109.34]).bindPopup('SPBU A'), L.marker([-0.04,109.36]).bindPopup('SPBU B')];
+    spbuMarkers.forEach(m=>spbuLayer.addLayer(m));
+
+    // Choropleth layer (load from ../data/pontianak-kecamatan.geojson if available)
+    let choropleth = L.layerGroup();
+    fetch('../data/pontianak-kecamatan.geojson').then(r=>r.json()).then(j=>{
+      function getColor(d){return d>10000?'#800026':d>5000?'#BD0026':d>2000?'#E31A1C':d>1000?'#FC4E2A':'#FD8D3C';}
+      choropleth = L.geoJSON(j,{style: f=>({fillColor:getColor(f.properties.luas||0),weight:1,fillOpacity:0.7,color:'#333'})}).addTo(map);
+      controlLayers.addOverlay(choropleth,'Choropleth');
+    }).catch(()=>{ /* ignore missing file */ });
+
+    const base = {};
+    const overlays = {'SPBU Points': spbuLayer};
+    const controlLayers = L.control.layers(base, overlays, {collapsed:false}).addTo(map);
+    spbuLayer.addTo(map);
+  </script>
+</body>
+</html>