Upload files to "tugas04"
This commit is contained in:
@@ -0,0 +1,21 @@
|
|||||||
|
# Project 4 - GeoJSON Kecamatan Pontianak
|
||||||
|
|
||||||
|
Project ini khusus untuk menampilkan data kecamatan Pontianak dari file `Kecamatan.json`.
|
||||||
|
|
||||||
|
## Database
|
||||||
|
|
||||||
|
Project ini tidak membutuhkan database karena data sudah tersedia dalam file GeoJSON.
|
||||||
|
|
||||||
|
Properti yang digunakan dari `Kecamatan.json`:
|
||||||
|
|
||||||
|
- `Ket` untuk nama kecamatan.
|
||||||
|
- `Populasi` untuk jumlah populasi.
|
||||||
|
- `Plan_Area` untuk luas area.
|
||||||
|
|
||||||
|
## Cara Menjalankan
|
||||||
|
|
||||||
|
1. Letakkan folder ini di `htdocs`.
|
||||||
|
2. Jalankan Apache di XAMPP.
|
||||||
|
3. Buka `http://localhost/webgis_pisah/project_04_geojson_kecamatan_pontianak/`.
|
||||||
|
|
||||||
|
Jangan membuka `index.html` langsung dari file explorer karena `fetch('Kecamatan.json')` biasanya diblokir browser jika tidak dijalankan melalui server lokal.
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="id">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Project 4 - GeoJSON Kecamatan Pontianak</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||||||
|
<style>
|
||||||
|
body { margin: 0; font-family: Arial, sans-serif; }
|
||||||
|
#map { height: 100vh; width: 100%; }
|
||||||
|
.title-box {
|
||||||
|
position: absolute; top: 10px; left: 55px; z-index: 999;
|
||||||
|
background: white; padding: 10px 14px; border-radius: 6px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
.title-box h3 { margin: 0 0 4px; }
|
||||||
|
.title-box p { margin: 0; font-size: 13px; color: #555; }
|
||||||
|
.legend {
|
||||||
|
background: rgba(255,255,255,.95); padding: 10px 14px;
|
||||||
|
border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.2);
|
||||||
|
line-height: 1.5;
|
||||||
|
max-height: 260px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="title-box">
|
||||||
|
<h3>Project 4 - GeoJSON Kecamatan Pontianak</h3>
|
||||||
|
<p>Menampilkan nama kecamatan dan jumlah populasi dari Kecamatan.json.</p>
|
||||||
|
</div>
|
||||||
|
<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.0227, 109.3425], 12);
|
||||||
|
|
||||||
|
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© OpenStreetMap contributors'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||||||
|
attribution: 'Tiles © Esri'
|
||||||
|
});
|
||||||
|
|
||||||
|
const kecamatanLayer = L.layerGroup().addTo(map);
|
||||||
|
|
||||||
|
L.control.layers(
|
||||||
|
{ 'OpenStreetMap': osm, 'Satellite': satellite },
|
||||||
|
{ 'Batas Kecamatan Pontianak': kecamatanLayer },
|
||||||
|
{ collapsed: false }
|
||||||
|
).addTo(map);
|
||||||
|
|
||||||
|
const warnaKecamatan = {
|
||||||
|
'Pontianak Timur': '#e74c3c',
|
||||||
|
'Pontianak Selatan': '#3498db',
|
||||||
|
'Pontianak Barat': '#2ecc71',
|
||||||
|
'Pontianak Utara': '#f39c12',
|
||||||
|
'Pontianak Kota': '#9b59b6',
|
||||||
|
'Pontianak Tenggara': '#16a085'
|
||||||
|
};
|
||||||
|
|
||||||
|
function getWarna(nama) {
|
||||||
|
return warnaKecamatan[nama] || '#7f8c8d';
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatAngka(nilai) {
|
||||||
|
return Number(nilai || 0).toLocaleString('id-ID');
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch('Kecamatan.json')
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
const geojson = L.geoJSON(data, {
|
||||||
|
style: function(feature) {
|
||||||
|
const nama = feature.properties.Ket || feature.properties.Nama || feature.properties.name || 'Kecamatan';
|
||||||
|
const warna = getWarna(nama);
|
||||||
|
return {
|
||||||
|
color: warna,
|
||||||
|
weight: 2,
|
||||||
|
fillColor: warna,
|
||||||
|
fillOpacity: 0.4
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onEachFeature: function(feature, layer) {
|
||||||
|
const prop = feature.properties || {};
|
||||||
|
const nama = prop.Ket || prop.Nama || prop.name || 'Kecamatan';
|
||||||
|
const populasi = prop.Populasi || prop.populasi || 0;
|
||||||
|
const area = prop.Plan_Area || 0;
|
||||||
|
|
||||||
|
layer.bindPopup(`
|
||||||
|
<b>${nama}</b><br>
|
||||||
|
<b>Populasi:</b> ${formatAngka(populasi)} jiwa<br>
|
||||||
|
<b>Luas Area:</b> ${formatAngka(area)} m²
|
||||||
|
`);
|
||||||
|
|
||||||
|
layer.bindTooltip(`${nama}<br>${formatAngka(populasi)} jiwa`, {
|
||||||
|
sticky: true,
|
||||||
|
direction: 'center'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
geojson.addTo(kecamatanLayer);
|
||||||
|
map.fitBounds(geojson.getBounds());
|
||||||
|
buatLegenda(data.features || []);
|
||||||
|
})
|
||||||
|
.catch(() => alert('Gagal memuat file Kecamatan.json. Jalankan melalui localhost, bukan langsung dibuka dari file explorer.'));
|
||||||
|
|
||||||
|
function buatLegenda(features) {
|
||||||
|
const legend = L.control({ position: 'bottomright' });
|
||||||
|
legend.onAdd = function () {
|
||||||
|
const div = L.DomUtil.create('div', 'legend');
|
||||||
|
let html = '<b>Populasi Kecamatan</b><br>';
|
||||||
|
|
||||||
|
features.forEach(feature => {
|
||||||
|
const prop = feature.properties || {};
|
||||||
|
const nama = prop.Ket || prop.Nama || prop.name || 'Kecamatan';
|
||||||
|
const populasi = prop.Populasi || prop.populasi || 0;
|
||||||
|
const warna = getWarna(nama);
|
||||||
|
html += `<span style="display:inline-block;width:12px;height:12px;background:${warna};margin-right:6px"></span>${nama}: ${formatAngka(populasi)}<br>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
div.innerHTML = html;
|
||||||
|
return div;
|
||||||
|
};
|
||||||
|
legend.addTo(map);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user