AufaHafizah/WebGIS_Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add file

Browse Source
This commit is contained in:
AufaHafizah
2026-06-10 19:26:40 +07:00
parent 02c8394972
commit 7e2d324c2e
49 changed files with 6334 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
03/Pontianak.txt
+8
View File
File diff suppressed because one or more lines are too long
03/index.html
+166
View File
@@ -0,0 +1,166 @@
<!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>
03/index1.html
+166
View File
@@ -0,0 +1,166 @@
<!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>
03/pontianak.js
+1
View File
File diff suppressed because one or more lines are too long
03/us-states.js
+54
View File
File diff suppressed because one or more lines are too long