Syariffullah
85 lines
3.1 KiB
JavaScript
85 lines
3.1 KiB
JavaScript
// --- Fitur Import GeoJSON ---
|
|
|
|
const fileGeoJson = document.getElementById('fileGeoJson');
|
|
let geoJsonLayers = {};
|
|
let geoJsonCounter = 0;
|
|
|
|
window.toggleGeoJsonMenu = function() {
|
|
const list = document.getElementById('geoJsonFileList');
|
|
const icon = document.getElementById('geoJsonToggleIcon');
|
|
if (list.style.display === 'none') {
|
|
list.style.display = 'block';
|
|
icon.className = 'fas fa-minus';
|
|
} else {
|
|
list.style.display = 'none';
|
|
icon.className = 'fas fa-plus';
|
|
}
|
|
};
|
|
|
|
fileGeoJson.addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(event) {
|
|
try {
|
|
const geoJsonData = JSON.parse(event.target.result);
|
|
const fileName = file.name;
|
|
const layerId = 'gj_' + (++geoJsonCounter);
|
|
|
|
// Buat FeatureGroup khusus untuk file ini
|
|
const individualLayer = L.featureGroup();
|
|
|
|
// Tambahkan ke map
|
|
L.geoJSON(geoJsonData, {
|
|
onEachFeature: function (feature, layer) {
|
|
if (feature.properties) {
|
|
let popupContent = '<h4>Informasi Feature</h4><ul style="list-style:none; padding:0;">';
|
|
for (let key in feature.properties) {
|
|
popupContent += `<li><strong>${key}:</strong> ${feature.properties[key]}</li>`;
|
|
}
|
|
popupContent += '</ul>';
|
|
layer.bindPopup(popupContent);
|
|
}
|
|
},
|
|
style: function(feature) {
|
|
return {
|
|
color: feature.properties.color || '#3388ff',
|
|
weight: 2,
|
|
fillOpacity: 0.4
|
|
};
|
|
}
|
|
}).addTo(individualLayer);
|
|
|
|
individualLayer.addTo(map);
|
|
geoJsonLayers[layerId] = individualLayer;
|
|
|
|
// Tambahkan checkbox ke UI
|
|
const container = document.getElementById('geoJsonLayersContainer');
|
|
const label = document.createElement('label');
|
|
label.className = 'layer-option';
|
|
label.innerHTML = `<input type="checkbox" id="chk_${layerId}" checked> ${fileName}`;
|
|
|
|
label.querySelector('input').addEventListener('change', function(e) {
|
|
if (e.target.checked) {
|
|
map.addLayer(geoJsonLayers[layerId]);
|
|
} else {
|
|
map.removeLayer(geoJsonLayers[layerId]);
|
|
}
|
|
});
|
|
|
|
container.appendChild(label);
|
|
|
|
// Reset input file agar bisa import file yang sama jika dihapus
|
|
fileGeoJson.value = '';
|
|
|
|
alert('File GeoJSON berhasil dimuat!');
|
|
|
|
} catch (error) {
|
|
alert('Gagal memproses file GeoJSON. Pastikan format valid.');
|
|
console.error(error);
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
});
|