[fix] Adds and Remove Layers properly (shift and pop array)
This commit is contained in:
guillaume91
parent
233281a494
commit
10dc80b79d
|
|
@ -1,91 +1,92 @@
|
|||
<div class="flex flex-col divide-y space-y-4 m-2"
|
||||
x-data="{
|
||||
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;
|
||||
processFile(file,type) {
|
||||
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 {
|
||||
this.showMap(JSON.parse(data),type);
|
||||
} 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: '© <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,type){
|
||||
this.initMap();
|
||||
this.initMapLayer();
|
||||
this.addLayer(data,type);
|
||||
console.log('GeoJson loaded on the map.');
|
||||
},
|
||||
addLayer(layerData,type){
|
||||
switch(type){
|
||||
case 'pivot_file':
|
||||
window.mapLayers.unshift(layerData);
|
||||
break;
|
||||
case 'span_file':
|
||||
window.mapLayers.push(layerData);
|
||||
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){
|
||||
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));
|
||||
window.map.focus();
|
||||
|
||||
}
|
||||
|
||||
} 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: '© <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]);"
|
||||
}"
|
||||
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 class="flex flex-col md:w-1/3">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@dragenter.prevent="onDragenter($event)"
|
||||
@dragleave.prevent="onDragleave($event)"
|
||||
@dragover.prevent="onDragover($event)"
|
||||
@drop.prevent="onDrop"
|
||||
@drop.prevent="onDrop($event,$event.target.closest('[id]').id)"
|
||||
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">
|
||||
|
|
@ -136,7 +136,7 @@ class="hidden"
|
|||
isDropped: false,
|
||||
isLoading: false,
|
||||
|
||||
onDrop(e) {
|
||||
onDrop(e,t) {
|
||||
this.isDropped = true;
|
||||
this.isDragging = false;
|
||||
|
||||
|
|
@ -144,7 +144,7 @@ class="hidden"
|
|||
const args = ['upload', file, () => {
|
||||
// Upload completed
|
||||
this.isLoading = false;
|
||||
this.processFile(file);
|
||||
this.processFile(file,t);
|
||||
}, (error) => {
|
||||
// An error occurred while uploading
|
||||
console.log('livewire-dropzone upload error', error);
|
||||
|
|
|
|||
Loading…
Reference in a new issue