Timon/SmartCane
1
1
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

[Done] Add multiple layers on the map.

Browse source
This commit is contained in:
guillaume91 2024-06-12 11:52:16 +02:00
parent e511cae64d
commit 750a760d38
1 changed files with 34 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
View file

@ -17,24 +17,48 @@
};
reader.readAsText(file);
},
showMap(d){
initMap(){
if(window.geoJsonMap) return;
try{
let map = document.getElementById('map');
map.style.height = '300px';
window.map = L.map('map').setView([51.505, -0.09], 13);
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.map);
window.geoJsonLayer = L.geoJSON();
window.geoJsonLayer.addTo(window.map);
}).addTo(window.geoJsonMap);
}catch(err){
console.log('Map already loaded');
console.log(err);
}
window.geoJsonLayer.addData(d);
window.map.fitBounds(geoJsonLayer.getBounds());
map.focus();
console.log('added geojson.');
},
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');
}
}"
x-on:livewire-upload-finish.document="processFile($event.target.files[0]);"