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); reader.readAsText(file);
}, },
showMap(d){ initMap(){
if(window.geoJsonMap) return;
try{ try{
let map = document.getElementById('map'); let map = document.getElementById('map');
map.style.height = '300px'; 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', { L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: '&copy; <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>' attribution: '&copy; <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>'
}).addTo(window.map); }).addTo(window.geoJsonMap);
window.geoJsonLayer = L.geoJSON();
window.geoJsonLayer.addTo(window.map);
}catch(err){ }catch(err){
console.log('Map already loaded'); console.log(err);
} }
window.geoJsonLayer.addData(d); },
window.map.fitBounds(geoJsonLayer.getBounds()); initMapLayer(){
map.focus(); if(window.geoJsonMap && window.geoJsonLayer) return;
console.log('added geojson.'); 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]);" x-on:livewire-upload-finish.document="processFile($event.target.files[0]);"