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

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

@@ -1,16 +1,24 @@
-@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'];
         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;
+                }
+
             } catch (error) {
                 console.error('Error parsing GeoJSON:', error);
             }
@@ -35,6 +43,7 @@
         if(window.geoJsonMap && window.geoJsonLayer) return;
         window.geoJsonLayer = L.geoJSON();
         window.geoJsonLayer.addTo(window.geoJsonMap);
+        window.mapLayers=[];
     },
     showMap(data){
         this.initMap();
@@ -43,7 +52,11 @@
         console.log('GeoJson loaded on the map.');
     },
     addLayer(layerData){
-                var basicColors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple'];
+        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) {
@@ -56,8 +69,19 @@
         });
         window.geoJsonMap.fitBounds(geoJsonLayer.getBounds());
     },
-            removeLayer(){
-                console.log('in removeLayer');
+    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));
 
     }
  }"

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 })
                 }
             };