[fix] Map init with the current geosjon files. Added menu for the layers.
This commit is contained in:
guillaume91
parent
6d414ecc81
commit
3c3c110005
|
|
@ -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['span_file'] = null;
|
||||
$this->formData['pivot_file'] = Storage::disk('local')->get($project->name.'/Data/pivot.geojson');
|
||||
$this->formData['span_file'] = Storage::disk('local')->get($project->name.'/Data/span.geojson');
|
||||
$this->formData['harvest_file'] = null;
|
||||
}
|
||||
public function saveProject()
|
||||
|
|
|
|||
|
|
@ -28,9 +28,12 @@
|
|||
}
|
||||
},
|
||||
initMapLayer(){
|
||||
if(window.geoJsonMap && window.geoJsonLayer) return;
|
||||
window.geoJsonLayer = L.geoJSON();
|
||||
window.geoJsonLayer.addTo(window.geoJsonMap);
|
||||
if(window.geoJsonMap && window.groupLayer) return;
|
||||
window.pivotLayer = L.geoJson();
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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 })
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue