[fix] Adds and Remove Layers properly (shift and pop array)

This commit is contained in:
guillaume91 2024-06-12 16:04:04 +02:00
parent 233281a494
commit 10dc80b79d
2 changed files with 89 additions and 88 deletions

View file

@ -1,24 +1,13 @@
<div class="flex flex-col divide-y space-y-4 m-2"
x-data="{
processFile(file, action='add') {
processFile(file,type) {
let filetype = ['json','geojson'];
if(!filetype.includes(file.name.split('.').pop())) return;
const reader = new FileReader();
reader.onload = (event) => {
const data = event.target.result;
try {
switch(action){
case 'add':
this.showMap(JSON.parse(data));
break;
case 'remove':
this.removeLayer(JSON.parse(data));
break;
default:
console.log('No action provided');
break;
}
this.showMap(JSON.parse(data),type);
} catch (error) {
console.error('Error parsing GeoJSON:', error);
}
@ -45,15 +34,25 @@
window.geoJsonLayer.addTo(window.geoJsonMap);
window.mapLayers=[];
},
showMap(data){
showMap(data,type){
this.initMap();
this.initMapLayer();
this.addLayer(data);
this.addLayer(data,type);
console.log('GeoJson loaded on the map.');
},
addLayer(layerData){
addLayer(layerData,type){
switch(type){
case 'pivot_file':
window.mapLayers.unshift(layerData);
break;
case 'span_file':
window.mapLayers.push(layerData);
break;
default:
break;
}
this.updateLayer(layerData);
window.map.focus();
},
updateLayer(layerData){
var basicColors = ['red', 'blue', 'orange', 'purple'];
@ -68,6 +67,7 @@
};
});
window.geoJsonMap.fitBounds(geoJsonLayer.getBounds());
},
removeLayer(type){
window.geoJsonLayer.clearLayers();
@ -82,10 +82,11 @@
break;
}
window.mapLayers.forEach((data) => this.updateLayer(data));
window.map.focus();
}
}"
x-on:livewire-upload-finish.document="processFile($event.target.files[0]);"
x-on:livewire-upload-finish.document="processFile($event.target.files[0],$event.target.closest('[id]').id);"
>
<div id="edit" class="flex flex-col md:flex-row gap-2">
<div class="flex flex-col md:w-1/3">

View file

@ -8,7 +8,7 @@
@dragenter.prevent="onDragenter($event)"
@dragleave.prevent="onDragleave($event)"
@dragover.prevent="onDragover($event)"
@drop.prevent="onDrop"
@drop.prevent="onDrop($event,$event.target.closest('[id]').id)"
class="w-full antialiased"
>
<div class="flex flex-col items-start h-full w-full justify-center bg-white dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500">
@ -136,7 +136,7 @@ class="hidden"
isDropped: false,
isLoading: false,
onDrop(e) {
onDrop(e,t) {
this.isDropped = true;
this.isDragging = false;
@ -144,7 +144,7 @@ class="hidden"
const args = ['upload', file, () => {
// Upload completed
this.isLoading = false;
this.processFile(file);
this.processFile(file,t);
}, (error) => {
// An error occurred while uploading
console.log('livewire-dropzone upload error', error);