50 lines
2.2 KiB
HTML
50 lines
2.2 KiB
HTML
<!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>
|