RuscoMap/ruscomap
5
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

indexjs

Browse source
This commit is contained in:
scossa 2024-02-16 20:08:20 +01:00
parent a288b35035
commit 26008ebbff
3 changed files with 65 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
staticRuscoMap/geison.json
View file

75
staticRuscoMap/index.html
View file

@ -37,80 +37,7 @@
<script defer src="/leaflet.js"></script> <script defer src="/leaflet.js"></script>
<script> <script defer src="/index.js"></script>
let map = null;
let points = [];
//BOLOGNA
const x = 11.343095841047235;
const y = 44.49373478876318;
const piazzaMaggiore = [x, y];
// COORDS ESISTENTI
async function downloadRusco() {
const resp = await window.fetch("/rusco.geojson");
const rusco = await resp.json()
return rusco.features;
}
// SET VIEW
function loadMap() {
map = L.map('map').setView([44.49373478876318,11.343095841047235], 13.5);
// IMPOSTA MAPPA
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors | RuscoMap'
}).addTo(map);
// LOAD JSON WITH nome, descrizione e fotoURl
fetch('rusco.geojson')
.then(response => response.json())
.then(data => {
L.geoJSON(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup('<h2>' + feature.properties.Nome + '</h2><p>' + feature.properties.Descrizione + '</p><img src="' + feature.properties.Foto + '" alt="Photo" style="width:200px;height:auto;">');
}
}).addTo(map);
});
}
//LOGICA BTN
function preparaDOM() {
const button = document.querySelector('#PMaggiore');
button.addEventListener('click', () => {
//const risposta = prompt("Dammi coordinates");
const puntoNuovo = {
"type": "Feature",
"properties": {
"Nome": "Coors Field",
"Descrizione": "Baseball Stadium",
},
"geometry": {
"type": "Point",
"coordinates": piazzaMaggiore
}
}
//PUSH NUOVECOORD
points.push(puntoNuovo);
//RELOAD JSON
L.geoJSON(points).addTo(map);
button.innerHTML="Aggiungi piu' ombra"
});
}
// SEGUENZA EXEC
async function load() {
points = await downloadRusco();
//console.log (points.features)
preparaDOM();
loadMap();
}
window.addEventListener('load', load);
</script>
</body> </body>

63
staticRuscoMap/index.js Normal file
View file

@ -0,0 +1,63 @@
let map = null;
let points = [];
//BOLOGNA
const x = 11.343095841047235;
const y = 44.49373478876318;
const piazzaMaggiore = [x, y];
// COORDS ESISTENTI
async function downloadRusco() {
const resp = await window.fetch("/rusco.geojson");
const rusco = await resp.json()
return rusco.features;
}
// SET VIEW
function loadMap() {
map = L.map('map').setView([44.49373478876318, 11.343095841047235], 13.5);
// IMPOSTA MAPPA
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors | RuscoMap'
}).addTo(map);
// LOAD JSON WITH nome, descrizione e fotoURl
fetch('rusco.geojson')
.then(response => response.json())
.then(data => {
L.geoJSON(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup('<h2>' + feature.properties.Nome + '</h2><p>' + feature.properties.Descrizione + '</p><img src="' + feature.properties.Foto + '" alt="Photo" style="width:200px;height:auto;">');
}
}).addTo(map);
});
}
//LOGICA BTN
function preparaDOM() {
const button = document.querySelector('#PMaggiore');
button.addEventListener('click', () => {
//const risposta = prompt("Dammi coordinates");
const puntoNuovo = {
"type": "Feature",
"properties": {
"Nome": "Coors Field",
"Descrizione": "Baseball Stadium",
},
"geometry": {
"type": "Point",
"coordinates": piazzaMaggiore
}
}
//PUSH NUOVECOORD
points.push(puntoNuovo);
//RELOAD JSON
L.geoJSON(points).addTo(map);
button.innerHTML = "Aggiungi piu' ombra"
});
}
// SEGUENZA EXEC
async function load() {
points = await downloadRusco();
//console.log (points.features)
preparaDOM();
loadMap();
}
window.addEventListener('load', load);