167 lines
3.2 KiB
HTML
167 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<title>Peta Choropleth Pontianak</title>
|
||
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
|
||
<style>
|
||
html, body {
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
#map {
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
.info {
|
||
padding: 6px 8px;
|
||
font: 14px Arial;
|
||
background: rgba(255,255,255,0.9);
|
||
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
||
border-radius: 5px;
|
||
}
|
||
.legend {
|
||
line-height: 18px;
|
||
color: #555;
|
||
}
|
||
.legend i {
|
||
width: 18px;
|
||
height: 18px;
|
||
float: left;
|
||
margin-right: 8px;
|
||
opacity: 0.7;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="map"></div>
|
||
|
||
<!-- DATA PONTIANAK -->
|
||
<script src="pontianak.js"></script>
|
||
|
||
<script>
|
||
|
||
// ================= MAP =================
|
||
const map = L.map('map').setView([-0.0263, 109.3424], 12);
|
||
|
||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
maxZoom: 19
|
||
}).addTo(map);
|
||
|
||
// ================= INFO =================
|
||
const info = L.control();
|
||
|
||
info.onAdd = function () {
|
||
this._div = L.DomUtil.create('div', 'info');
|
||
this.update();
|
||
return this._div;
|
||
};
|
||
|
||
info.update = function (props) {
|
||
const isi = props
|
||
? `<b>${props.name}</b><br>${props.density} jiwa/km²`
|
||
: 'Arahkan kursor ke wilayah';
|
||
|
||
this._div.innerHTML = `<h4>Kepadatan Penduduk Pontianak</h4>${isi}`;
|
||
};
|
||
|
||
info.addTo(map);
|
||
|
||
// ================= WARNA =================
|
||
function getColor(d) {
|
||
return d > 10000 ? '#800026' :
|
||
d > 8000 ? '#BD0026' :
|
||
d > 6000 ? '#E31A1C' :
|
||
d > 4000 ? '#FC4E2A' :
|
||
d > 2000 ? '#FD8D3C' :
|
||
d > 1000 ? '#FEB24C' :
|
||
d > 500 ? '#FED976' :
|
||
'#FFEDA0';
|
||
}
|
||
|
||
// ================= STYLE =================
|
||
function style(feature) {
|
||
return {
|
||
weight: 2,
|
||
opacity: 1,
|
||
color: 'white',
|
||
dashArray: '3',
|
||
fillOpacity: 0.7,
|
||
fillColor: getColor(feature.properties.density)
|
||
};
|
||
}
|
||
|
||
// ================= INTERAKSI =================
|
||
function highlightFeature(e) {
|
||
const layer = e.target;
|
||
|
||
layer.setStyle({
|
||
weight: 5,
|
||
color: '#666',
|
||
dashArray: '',
|
||
fillOpacity: 0.7
|
||
});
|
||
|
||
layer.bringToFront();
|
||
info.update(layer.feature.properties);
|
||
}
|
||
|
||
function resetHighlight(e) {
|
||
geojson.resetStyle(e.target);
|
||
info.update();
|
||
}
|
||
|
||
function zoomToFeature(e) {
|
||
map.fitBounds(e.target.getBounds());
|
||
}
|
||
|
||
function onEachFeature(feature, layer) {
|
||
layer.on({
|
||
mouseover: highlightFeature,
|
||
mouseout: resetHighlight,
|
||
click: zoomToFeature
|
||
});
|
||
}
|
||
|
||
// ================= GEOJSON =================
|
||
const geojson = L.geoJson(pontianakData, {
|
||
style: style,
|
||
onEachFeature: onEachFeature
|
||
}).addTo(map);
|
||
|
||
// ================= LEGEND =================
|
||
const legend = L.control({position: 'bottomright'});
|
||
|
||
legend.onAdd = function () {
|
||
const div = L.DomUtil.create('div', 'info legend');
|
||
const grades = [0, 500, 1000, 2000, 4000, 6000, 8000, 10000];
|
||
|
||
let labels = [];
|
||
|
||
for (let i = 0; i < grades.length; i++) {
|
||
let from = grades[i];
|
||
let to = grades[i + 1];
|
||
|
||
labels.push(
|
||
`<i style="background:${getColor(from + 1)}"></i> ${from}${to ? '–' + to : '+'}`
|
||
);
|
||
}
|
||
|
||
div.innerHTML = labels.join('<br>');
|
||
return div;
|
||
};
|
||
|
||
legend.addTo(map);
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|