37 lines
1.6 KiB
HTML
37 lines
1.6 KiB
HTML
<!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>
|