[Done] Remove and update the map then you delete a file input

laravel_app/resources/views/livewire/projects/tabs/settings.blade.php

@@ -1,66 +1,90 @@
-@push('map')
-@endpush
-
 <div class="flex flex-col divide-y space-y-4 m-2"
      x-data="{
-            processFile(file) {
+    processFile(file, action='add') {
-                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){
+                    case 'add':
                         this.showMap(JSON.parse(data));
-                    } catch (error) {
+                        break;
-                        console.error('Error parsing GeoJSON:', error);
+                    case 'remove':
-                    }
+                        this.removeLayer(JSON.parse(data));
-                };
+                        break;
-                reader.readAsText(file);
+                    default:
-            },
+                        console.log('No action provided');
-            initMap(){
+                        break;
-                if(window.geoJsonMap) return;
-                try{
-                    let map = document.getElementById('map');
-                    map.style.height = '300px';
-                    window.geoJsonMap = L.map('map').setView([51.505, -0.09], 13);
-                    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                            maxZoom: 19,
-                            attribution: '&copy; <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>'
-                         }).addTo(window.geoJsonMap);
-                }catch(err){
-                    console.log(err);
                 }
-            },
-            initMapLayer(){
-                if(window.geoJsonMap && window.geoJsonLayer) return;
-                window.geoJsonLayer = L.geoJSON();
-                window.geoJsonLayer.addTo(window.geoJsonMap);
-            },
-            showMap(data){
-                this.initMap();
-                this.initMapLayer();
-                this.addLayer(data);
-                console.log('GeoJson loaded on the map.');
-            },
-            addLayer(layerData){
-                var basicColors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple'];
-                var randomIndex = Math.floor(Math.random() * basicColors.length);
-                window.geoJsonLayer.addData(layerData);
-                window.geoJsonLayer.setStyle(function(feature) {
-                    return {
-                        color: basicColors[randomIndex],
-                        weight: 2,
-                        opacity: 0.5,
-                        fillOpacity: 0.5
-                    };
-                });
-                window.geoJsonMap.fitBounds(geoJsonLayer.getBounds());
-            },
-            removeLayer(){
-                console.log('in removeLayer');
 
+            } catch (error) {
+                console.error('Error parsing GeoJSON:', error);
             }
-         }"
+        };
+        reader.readAsText(file);
+    },
+    initMap(){
+        if(window.geoJsonMap) return;
+        try{
+            let map = document.getElementById('map');
+            map.style.height = '300px';
+            window.geoJsonMap = L.map('map').setView([51.505, -0.09], 13);
+            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    maxZoom: 19,
+                    attribution: '&copy; <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>'
+                 }).addTo(window.geoJsonMap);
+        }catch(err){
+            console.log(err);
+        }
+    },
+    initMapLayer(){
+        if(window.geoJsonMap && window.geoJsonLayer) return;
+        window.geoJsonLayer = L.geoJSON();
+        window.geoJsonLayer.addTo(window.geoJsonMap);
+        window.mapLayers=[];
+    },
+    showMap(data){
+        this.initMap();
+        this.initMapLayer();
+        this.addLayer(data);
+        console.log('GeoJson loaded on the map.');
+    },
+    addLayer(layerData){
+        window.mapLayers.push(layerData);
+        this.updateLayer(layerData);
+    },
+    updateLayer(layerData){
+        var basicColors = ['red', 'blue', 'orange', 'purple'];
+        var randomIndex = Math.floor(Math.random() * basicColors.length);
+        window.geoJsonLayer.addData(layerData);
+        window.geoJsonLayer.setStyle(function(feature) {
+            return {
+                color: basicColors[randomIndex],
+                weight: 2,
+                opacity: 0.5,
+                fillOpacity: 0.5
+            };
+        });
+        window.geoJsonMap.fitBounds(geoJsonLayer.getBounds());
+    },
+    removeLayer(type){
+        window.geoJsonLayer.clearLayers();
+        switch(type){
+            case 'pivot_file':
+                window.mapLayers.shift();
+                break;
+            case 'span_file':
+                window.mapLayers.pop();
+                break;
+            default:
+                break;
+        }
+        window.mapLayers.forEach((data) => this.updateLayer(data));
+
+    }
+ }"
      x-on:livewire-upload-finish.document="processFile($event.target.files[0]);"
 >
     <div id="edit" class="flex flex-col md:flex-row gap-2">

laravel_app/resources/views/vendor/livewire-dropzone/livewire/dropzone.blade.php

@@ -116,7 +116,7 @@ class="hidden"
                             </div>
                         </div>
                         <div class="flex items-center mr-3">
-                            <button type="button" @click="removeUpload('{{ $file['tmpFilename'] }}')">
+                            <button type="button" x-on:click="removeUpload('{{ $file['tmpFilename'] }}',$root.parentElement.id);">
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-black dark:text-white">
                                     <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" />
                                 </svg>
@@ -171,8 +171,9 @@ class="hidden"
                         this.isDragging = true;
                     }
                 },
-                removeUpload(tmpFilename) {
+                removeUpload(tmpFilename,dropzoneName) {
                     // Dispatch an event to remove the temporarily uploaded file
+                    this.removeLayer(dropzoneName);
                     _this.dispatch(uuid + ':fileRemoved', { tmpFilename })
                 }
             };