Project Webgis2 SIG

2026-06-11 10:38:09 +07:00
commit eb4d6b7eb0
22 changed files with 2914 additions and 0 deletions
@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Choropleth Penduduk Pontianak</title>
+
+    <!-- Leaflet -->
+    <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 {
+            margin: 0;
+            height: 100%;
+        }
+
+        #map {
+            width: 100%;
+            height: 100vh;
+        }
+
+        .info {
+            padding: 6px 8px;
+            font: 14px/16px Arial, Helvetica, sans-serif;
+            background: white;
+            background: rgba(255,255,255,0.9);
+            box-shadow: 0 0 15px rgba(0,0,0,0.2);
+            border-radius: 5px;
+        }
+
+        .info h4 {
+            margin: 0 0 5px;
+            color: #555;
+        }
+
+        .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>
+
+<script>
+
+    const map = L.map('map').setView([-0.0263, 109.3425], 11);
+
+    /*
+    ====================================================
+    INFO CONTROL
+    ====================================================
+    */
+
+	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		maxZoom: 19,
+		attribution: '&copy; OpenStreetMap'
+	}).addTo(map);
+
+    const info = L.control();
+
+    info.onAdd = function () {
+        this._div = L.DomUtil.create('div', 'info');
+        this.update();
+        return this._div;
+    };
+
+    info.update = function (props) {
+
+        this._div.innerHTML =
+            '<h4>Populasi Penduduk Pontianak</h4>' +
+
+            (props
+                ? '<b>' + props.NamaDaerah + '</b><br>' +
+                  'Populasi: ' + props.Populasi + ' jiwa'
+                : 'Arahkan cursor ke wilayah');
+    };
+
+    info.addTo(map);
+
+    /*
+    ====================================================
+    WARNA CHOROPLETH
+    ====================================================
+    */
+
+    function getColor(d) {
+
+        return d > 100000 ? '#800026' :
+               d > 80000  ? '#BD0026' :
+               d > 60000  ? '#E31A1C' :
+               d > 40000  ? '#FC4E2A' :
+               d > 20000  ? '#FD8D3C' :
+                             '#FEB24C';
+    }
+
+    /*
+    ====================================================
+    STYLE POLYGON
+    ====================================================
+    */
+
+    function style(feature) {
+
+        return {
+            weight: 2,
+            opacity: 1,
+            color: 'white',
+            dashArray: '3',
+            fillOpacity: 0.7,
+            fillColor: getColor(feature.properties.Populasi)
+        };
+    }
+
+    /*
+    ====================================================
+    HIGHLIGHT
+    ====================================================
+    */
+
+    function highlightFeature(e) {
+
+        const layer = e.target;
+
+        layer.setStyle({
+            weight: 4,
+            color: '#666',
+            dashArray: '',
+            fillOpacity: 0.9
+        });
+
+        layer.bringToFront();
+
+        info.update(layer.feature.properties);
+    }
+
+    /*
+    ====================================================
+    RESET HIGHLIGHT
+    ====================================================
+    */
+
+    let geojson;
+
+    function resetHighlight(e) {
+
+        geojson.resetStyle(e.target);
+
+        info.update();
+    }
+
+    /*
+    ====================================================
+    ZOOM TO FEATURE
+    ====================================================
+    */
+
+    function zoomToFeature(e) {
+
+        map.fitBounds(e.target.getBounds());
+    }
+
+    /*
+    ====================================================
+    EVENT PER FEATURE
+    ====================================================
+    */
+
+    function onEachFeature(feature, layer) {
+
+        layer.on({
+            mouseover: highlightFeature,
+            mouseout: resetHighlight,
+            click: zoomToFeature
+        });
+
+        layer.bindPopup(
+            '<b>' + feature.properties.NamaDaerah + '</b><br>' +
+            'Populasi: ' + feature.properties.Populasi + ' jiwa'
+        );
+    }
+
+    /*
+    ====================================================
+    LOAD GEOJSON
+    ====================================================
+    */
+
+    fetch('choropleth.json')
+    .then(response => response.json())
+    .then(data => {
+
+        console.log(data.features[0].geometry);
+
+        data.features.forEach(feature => {
+
+            const coords = feature.geometry.coordinates;
+
+            /*
+            POLYGON
+            */
+            if (feature.geometry.type === "Polygon") {
+
+                feature.geometry.coordinates = coords.map(ring => {
+
+                    return ring.map(coord => {
+
+                        const lng = 109.263 + (coord[0] / 52000);
+						const lat = 0.052 + (coord[1] / 52000);
+
+                        return [lng, lat];
+
+                    });
+
+                });
+
+            }
+
+            /*
+            MULTIPOLYGON
+            */
+            else if (feature.geometry.type === "MultiPolygon") {
+
+                feature.geometry.coordinates = coords.map(poly => {
+
+                    return poly.map(ring => {
+
+                        return ring.map(coord => {
+
+                            const lng = 109.263 + (coord[0] / 52000);
+						    const lat = 0.052 + (coord[1] / 52000);
+
+                            return [lng, lat];
+
+                        });
+
+                    });
+
+                });
+
+            }
+
+        });
+
+        geojson = L.geoJson(data, {
+            style,
+            onEachFeature
+        }).addTo(map);
+
+        map.fitBounds(geojson.getBounds());
+
+    })
+    .catch(error => {
+        console.error(error);
+    });
+
+    /*
+    ====================================================
+    LEGENDA
+    ====================================================
+    */
+
+    const legend = L.control({ position: 'bottomright' });
+
+    legend.onAdd = function () {
+
+        const div = L.DomUtil.create('div', 'info legend');
+
+        const grades = [0, 20000, 40000, 60000, 80000, 100000];
+
+        let labels = [];
+
+        for (let i = 0; i < grades.length; i++) {
+
+            const from = grades[i];
+            const to = grades[i + 1];
+
+            labels.push(
+                '<i style="background:' +
+                getColor(from + 1) +
+                '"></i> ' +
+                from +
+                (to ? '&ndash;' + to : '+')
+            );
+        }
+
+        div.innerHTML = labels.join('<br>');
+
+        return div;
+    };
+
+    legend.addTo(map);
+
+</script>
+
+</body>
+</html>