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

View file

@ -8,7 +8,7 @@
@dragenter.prevent="onDragenter($event)" @dragenter.prevent="onDragenter($event)"
@dragleave.prevent="onDragleave($event)" @dragleave.prevent="onDragleave($event)"
@dragover.prevent="onDragover($event)" @dragover.prevent="onDragover($event)"
@drop.prevent="onDrop" @drop.prevent="onDrop($event,$event.target.closest('[id]').id)"
class="w-full antialiased" 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"> <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, isDropped: false,
isLoading: false, isLoading: false,
onDrop(e) { onDrop(e,t) {
this.isDropped = true; this.isDropped = true;
this.isDragging = false; this.isDragging = false;
@ -144,7 +144,7 @@ class="hidden"
const args = ['upload', file, () => { const args = ['upload', file, () => {
// Upload completed // Upload completed
this.isLoading = false; this.isLoading = false;
this.processFile(file); this.processFile(file,t);
}, (error) => { }, (error) => {
// An error occurred while uploading // An error occurred while uploading
console.log('livewire-dropzone upload error', error); console.log('livewire-dropzone upload error', error);