[fix] Map init with the current geosjon files. Added menu for the layers.

laravel_app/app/Livewire/Projects/Tabs/Settings.php

@@ -5,6 +5,7 @@
 use App\Models\Project;
 use App\Models\ProjectEmailRecipient;
 use App\Rules\HarvestFile;
+use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 use Livewire\Component;
@@ -49,8 +50,8 @@ private function loadFormData(Project $project)
                 'email' => '',
             ]
         ];
-        $this->formData['pivot_file'] = null;
+        $this->formData['pivot_file'] = Storage::disk('local')->get($project->name.'/Data/pivot.geojson');
-        $this->formData['span_file'] = null;
+        $this->formData['span_file'] = Storage::disk('local')->get($project->name.'/Data/span.geojson');
         $this->formData['harvest_file'] = null;
     }
     public function saveProject()

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

@@ -28,9 +28,12 @@
                     }
                 },
                 initMapLayer(){
-                    if(window.geoJsonMap && window.geoJsonLayer) return;
+                    if(window.geoJsonMap && window.groupLayer) return;
-                    window.geoJsonLayer = L.geoJSON();
+                    window.pivotLayer = L.geoJson();
-                    window.geoJsonLayer.addTo(window.geoJsonMap);
+                    window.spanLayer = L.geoJson();
+                    window.groupLayer = L.featureGroup([window.pivotLayer,window.spanLayer]);
+                    window.groupLayer.addTo(window.geoJsonMap);
+                    L.control.layers(null,{'Pivot':window.pivotLayer,'Span':window.spanLayer}).addTo(window.geoJsonMap);
                     window.mapLayers=[];
                 },
                 showMap(data,type){
@@ -39,54 +42,35 @@
                     this.addLayer(data,type);
                     console.log('GeoJson loaded on the map.');
                 },
+                addLayerData(data,layer){
+                    console.log('here');
+                    var basicColors = ['orange', 'purple'];
+                    if(data && layer){
+                        layer.clearLayers();
+                        layer.addData(data);
+                        layer.setStyle(function(feature) {
+                            return {
+                                color: (layer === window.pivotLayer) ? 'purple' : 'orange',
+                                weight: 2,
+                                opacity: 0.5,
+                                fillOpacity: 0.5
+                            };
+                        });
+                    }
+                    window.geoJsonMap.fitBounds(window.groupLayer.getBounds());
+                    window.map.focus();
+                },
                 addLayer(layerData,type){
                     switch(type){
                         case 'pivot_file':
-                            window.mapLayers.unshift(layerData);
+                            this.addLayerData(layerData,window.pivotLayer);
                             break;
                         case 'span_file':
-                            window.mapLayers.push(layerData);
+                            this.addLayerData(layerData,window.spanLayer);
                             break;
                         default:
                             break;
                     }
-                    this.updateLayer(layerData);
-                    window.map.focus();
-                },
-                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){
-                    try{
-                        window.geoJsonLayer.clearLayers();
-                        switch(type){
-                            case 'pivot_file':
-                                window.mapLayers.shift();
-                                break;
-                            case 'span_file':
-                                window.mapLayers.pop();
-                                break;
-                            default:
-                                break;
-                        }
-                        if(window.mapLayers.length == 0) window.map.style.height='0px';
-                        window.mapLayers.forEach((data) => this.updateLayer(data));
-                        window.map.focus();
-                    }catch(e){
-                        console.debug('Not a geojson file, keep going.');
-                    }
                 }
              }"
      x-on:livewire-upload-finish.document="processFile($event.target.files[0],$event.target.closest('[id]').id);"
@@ -101,7 +85,12 @@
             </div>
         </div>
         <div class="md:w-2/3">
-            <form>
+            <form x-init="
+                    $nextTick(() => {
+                        showMap({{$formData['pivot_file']}},'pivot_file');
+                        showMap({{$formData['span_file']}},'span_file')
+                     })
+                ">
                 <div id="map">
 
                 </div>

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

@@ -123,7 +123,7 @@ class="hidden"
                             </div>
                         </div>
                         <div class="flex items-center mr-3">
-                            <button type="button" x-on:click="removeUpload('{{ $file['tmpFilename'] }}',$root.parentElement.id);">
+                            <button type="button" x-on:click="removeUpload('{{ $file['tmpFilename'] }}','{{$type}}');">
                                 <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>
@@ -178,9 +178,20 @@ class="hidden"
                         this.isDragging = true;
                     }
                 },
-                removeUpload(tmpFilename,dropzoneName) {
+                removeUpload(tmpFilename,type) {
                     // Dispatch an event to remove the temporarily uploaded file
-                    this.removeLayer(dropzoneName);
+                    switch (type){
+                        case 'pivot':
+                            window.pivotLayer.clearLayers();
+                            break;
+                        case 'span':
+                            window.spanLayer.clearLayers();
+                            break;
+                        default:
+                            break;
+                    }
+                    window.geoJsonMap.fitBounds(window.groupLayer.getBounds());
+                    window.map.focus();
                     _this.dispatch(uuid + ':fileRemoved', { tmpFilename })
                 }
             };