Skip to content

Commit e8cc112

Browse files
shmilymariashmilymaria
authored
Add files via upload
0 parents  commit e8cc112

2 files changed

Lines changed: 200 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html lang="id">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>WEB GIS Kelompok 4</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
8+
<!-- Leaflet CSS -->
9+
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
10+
11+
<!-- Mouse Position Plugin -->
12+
<link rel="stylesheet" href="https://unpkg.com/leaflet-mouse-position@1.0.0/L.Control.MousePosition.css" />
13+
14+
<style>
15+
html, body {
16+
margin: 0;
17+
padding: 0;
18+
height: 100%;
19+
font-family: 'Segoe UI', sans-serif;
20+
}
21+
22+
#map {
23+
height: 100%;
24+
}
25+
26+
h1 {
27+
text-align: center;
28+
margin: 10px 0;
29+
color: #333;
30+
}
31+
32+
.legend {
33+
background: white;
34+
padding: 10px 15px;
35+
position: absolute;
36+
bottom: 20px;
37+
right: 20px;
38+
border-radius: 8px;
39+
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
40+
font-size: 14px;
41+
z-index: 1000;
42+
}
43+
44+
.legend div {
45+
margin-bottom: 6px;
46+
}
47+
48+
.legend span {
49+
display: inline-block;
50+
width: 16px;
51+
height: 16px;
52+
margin-right: 6px;
53+
border: 1px solid #888;
54+
vertical-align: middle;
55+
}
56+
</style>
57+
</head>
58+
<body>
59+
60+
<!-- Judul Peta -->
61+
<h1>Peta Daerah Rawan Banjir Kota Manado - Kelompok 4</h1>
62+
63+
<!-- Peta -->
64+
<div id="map"></div>
65+
66+
<!-- Legend -->
67+
<div class="legend">
68+
<strong>Kelas Rawan Banjir</strong><br />
69+
<div><span style="background:green;"></span> Aman</div>
70+
<div><span style="background:yellow;"></span> Rawan</div>
71+
<div><span style="background:red;"></span> Sangat Rawan</div>
72+
</div>
73+
74+
<!-- Leaflet JS -->
75+
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
76+
77+
<!-- Mouse Position Plugin -->
78+
<script src="https://unpkg.com/leaflet-mouse-position@1.0.0/L.Control.MousePosition.js"></script>
79+
80+
<script>
81+
// Inisialisasi peta TANPA zoom control default
82+
const map = L.map('map', {
83+
zoomControl: false
84+
});
85+
86+
// Tambahkan zoom control di pojok kanan bawah
87+
L.control.zoom({ position: 'bottomright' }).addTo(map);
88+
89+
// Tambahkan basemap
90+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
91+
attribution: '&copy; OpenStreetMap contributors'
92+
}).addTo(map);
93+
94+
// Fungsi untuk ambil nilai 'Kelas' dari HTML di description.value
95+
function getKelasFromDescription(html) {
96+
const match = html.match(/<td>\s*Kelas\s*<\/td>\s*<td>(.*?)<\/td>/i);
97+
return match ? match[1].trim() : null;
98+
}
99+
100+
// Fungsi pewarnaan berdasarkan kelas
101+
function getColor(kelas) {
102+
switch (kelas) {
103+
case 'Aman': return 'green';
104+
case 'Rawan': return 'yellow';
105+
case 'Sangat Rawan': return 'red';
106+
default: return 'gray';
107+
}
108+
}
109+
110+
// Load GeoJSON
111+
fetch('overlay.json')
112+
.then(res => res.json())
113+
.then(data => {
114+
const geojsonLayer = L.geoJSON(data, {
115+
style: function(feature) {
116+
const html = feature.properties?.description?.value || '';
117+
const kelas = getKelasFromDescription(html);
118+
return {
119+
color: getColor(kelas),
120+
weight: 1,
121+
fillOpacity: 0.5
122+
};
123+
},
124+
onEachFeature: function(feature, layer) {
125+
let popupContent = '';
126+
const props = feature.properties;
127+
128+
if (props?.description?.value) {
129+
popupContent = props.description.value
130+
.replace(/<table[^>]*>/g, '<table border="1" style="border-collapse:collapse; background-color:#f5f5dc; color:#4b3621;">')
131+
.replace(/<th>/g, '<th style="background-color:#e0d3b8; color:#4b3621; padding:6px;">')
132+
.replace(/<td>/g, '<td style="background-color:#ffffff; color:#4b3621; padding:4px;">');
133+
} else {
134+
for (let key in props) {
135+
popupContent += `<strong>${key}</strong>: ${props[key]}<br>`;
136+
}
137+
}
138+
139+
layer.bindPopup(popupContent || 'Tidak ada informasi');
140+
}
141+
}).addTo(map);
142+
143+
map.fitBounds(geojsonLayer.getBounds());
144+
})
145+
.catch(err => {
146+
console.error('Gagal memuat GeoJSON:', err);
147+
alert('Gagal memuat file overlay.json');
148+
});
149+
150+
// Tampilkan koordinat kursor
151+
L.control.mousePosition({
152+
separator: ', ',
153+
prefix: 'Koordinat'
154+
}).addTo(map);
155+
</script>
156+
157+
</body>
158+
</html>

‎overlay.json‎

Lines changed: 42 additions & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)