56 lines
2.1 KiB
JavaScript
56 lines
2.1 KiB
JavaScript
import L from "leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var map = L.map("map").setView([-6.9175, 107.6191], 10); // Bandung
|
|
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
attribution: "© OpenStreetMap contributors",
|
|
}).addTo(map);
|
|
|
|
// Dapatkan elemen loading
|
|
const loadingDiv = document.getElementById("loading");
|
|
loadingDiv.style.display = "flex"; // Tampilkan loading
|
|
|
|
fetch("/storage/maps/rencana-polaruang.geojson")
|
|
.then((res) => res.json())
|
|
.then((geojson) => {
|
|
let colorMapping = {
|
|
"Kawasan Pariwisata": "#ff6600", // Orange
|
|
"Kawasan Industri": "#0000ff", // Biru
|
|
"Kawasan Pemukiman": "#ff0000", // Merah
|
|
"Kawasan Hutan": "#008000", // Hijau
|
|
"Kawasan Pertanian": "#ffff00", // Kuning
|
|
};
|
|
var geoLayer = L.geoJSON(geojson, {
|
|
style: function (feature) {
|
|
let name = feature.properties.Name; // Ambil properti Name
|
|
|
|
console.log("Zone Type:", name);
|
|
|
|
return {
|
|
color: "#333333", // Warna garis
|
|
fillColor: colorMapping[name] || "#cccccc", // Gunakan warna dari mapping
|
|
fillOpacity: 0.6,
|
|
weight: 1.5,
|
|
};
|
|
},
|
|
onEachFeature: function (feature, layer) {
|
|
if (feature.properties && feature.properties.name) {
|
|
layer.bindPopup(feature.properties.name);
|
|
}
|
|
},
|
|
}).addTo(map);
|
|
|
|
map.fitBounds(geoLayer.getBounds());
|
|
|
|
// Sembunyikan loading setelah selesai render
|
|
loadingDiv.style.display = "none";
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error loading GeoJSON:", error);
|
|
loadingDiv.innerHTML =
|
|
"<div class='loading-text' style='background: red;'>Failed to load data!</div>";
|
|
});
|
|
});
|