allego quello che ha generato chatgpt:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lettore Percorsi PAP</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
body {
font-family: Arial, sans-serif;
background-color: blue;
color: white;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 5px;
background-color: white;
color: black;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
display: flex;
}
.left-panel {
width: 32%;
padding-right: 5px;
box-sizing: border-box;
}
.right-panel {
width: 68%;
position: relative;
}
#map {
height: 800px;
width: 100%;
border: 1px solid #ccc;
border-radius: 2px;
margin-top: 30px;
}
.street-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 0;
color: black;
}
.street-item input[type="checkbox"] {
margin-left: 5px;
}
.highlight-button {
margin-rigth: 10px;
font-size: 12px;
padding: 2px 4px;
background-color: orange;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.highlight-button:hover {
background-color: darkorange;
}
#loadBtn, #resetBtn, #gpsBtn {
padding: 4px;
font-size: 10px;
background-color: red;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
#loadBtn:hover, #resetBtn:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">
<h1>Percorso</h1>
<div id="fileName"></div>
<div id="streetsList">
<!-- Vie caricate dal file KML -->
</div>
<button id="loadBtn">Carica Percorso</button>
<button id="resetBtn">Reset</button>
<button id="gpsBtn">ON/OFF GPS</button>
</div>
<div class="right-panel">
<h1>Lettore Percorsi PAP</h1>
<medium>by Giovanni Ciurli</medium>
<div id="map"><h1></div>
</div>
</div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
// Variabili globali per la mappa e i layers
let map;
let streetsLayerGroup;
let firstMarkerCoords; // Variabile per le coordinate del primo marker
let gpsActive = false; // Stato del GPS
let gpsMarker = null;
let gpsWatchId = null;
// Array per memorizzare le vie
let streets = [];
// Funzione per inizializzare la mappa con Leaflet.js
function initMap(coords) {
if (!coords) {
coords = [43.38656, 10.46846]; // Coordinate Sede REA Spa
}
map = L.map('map').setView(coords, 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
streetsLayerGroup = L.layerGroup().addTo(map);
}
// Inizializza la mappa con le coordinate del Comune di Rosignano Marittimo
initMap();
// Funzione per aggiungere una via alla mappa
function addStreetToMap(streetName, coords, notes) {
const popupContent = `<b>${streetName}</b><br>${notes}`;
const marker = L.marker(coords).addTo(streetsLayerGroup)
.bindPopup(popupContent);
streets.push({ streetName, coords, marker });
if (!firstMarkerCoords) {
firstMarkerCoords = coords; // Imposta le coordinate del primo marker
map.setView(coords, 14); // Centra la mappa sul primo marker
}
}
// Funzione per aggiungere una via alla lista
function addStreetToList(streetName, coords) {
const streetItem = document.createElement('div');
streetItem.className = 'street-item';
streetItem.innerHTML = `
${streetName}
<label>
<button class="highlight-button" onclick="highlightMarker(${coords[0]}, ${coords[1]})">VEDI</button>
<input type="checkbox" checked>
</label>
`;
// Gestione della checkbox per mostrare/nascondere il marker
const checkbox = streetItem.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function() {
const street = streets.find(st => st.streetName === streetName && st.coords[0] === coords[0] && st.coords[1] === coords[1]);
if (checkbox.checked) {
street.marker.addTo(streetsLayerGroup);
} else {
street.marker.remove();
}
});
document.getElementById('streetsList').appendChild(streetItem);
}
// Funzione per evidenziare il marker sulla mappa
function highlightMarker(lat, lng) {
const marker = streets.find(street => street.coords[0] === lat && street.coords[1] === lng).marker;
if (marker) {
map.setView([lat, lng], 16);
marker.openPopup();
}
}
// Funzione per caricare un percorso salvato da un file KML
function loadRoute() {
window.AppInventor.setWebViewString('loadRoute');
}
// Funzione per resettare tutto
function reset() {
window.AppInventor.setWebViewString('reset');
}
// Funzione per attivare/disattivare il GPS
function toggleGPS() {
window.AppInventor.setWebViewString('toggleGPS');
}
// Aggiungi l'evento ai pulsanti
document.getElementById('loadBtn').addEventListener('click', loadRoute);
document.getElementById('resetBtn').addEventListener('click', reset);
document.getElementById('gpsBtn').addEventListener('click', toggleGPS);
</script>
</body>
</html>
// Quando il WebViewerString cambia
when WebViewer.WebViewStringChanged
if WebViewer.WebViewString contains "loadRoute"
// Logica per caricare un file KML
call FilePicker.PickFile // apri il file picker
else if WebViewer.WebViewString contains "reset"
// Logica per resettare
call WebViewer.EvaluateJavaScript with "document.getElementById('streetsList').innerHTML = '';"
call WebViewer.EvaluateJavaScript with "document.getElementById('fileName').textContent = '';"
call WebViewer.EvaluateJavaScript with "streetsLayerGroup.clearLayers();"
call WebViewer.EvaluateJavaScript with "streets = []; firstMarkerCoords = null; map.setView([43.4073, 10.4994], 12);"
else if WebViewer.WebViewString contains "toggleGPS"
// Logica per attivare/disattivare il GPS
if LocationSensor.Enabled
set LocationSensor.Enabled to false
call Notifier.ShowMessageDialog with "GPS disattivato", "Informazione", "OK"
else
set LocationSensor.Enabled to true
call Notifier.ShowMessageDialog with "GPS attivato", "Informazione", "OK"
// Quando viene selezionato un file KML
when FilePicker.AfterPicking
if FilePicker.Selection != ""
// Leggi il file KML
set FileContent to call File.ReadFromFile with FilePicker.Selection
call WebViewer.EvaluateJavaScript with join("reader.onload = function(event) {
const kmlString = event.target.result;
const parser = new DOMParser();
const kmlDoc = parser.parseFromString(kmlString, 'application/xml');
const placemarks = kmlDoc.getElementsByTagName('Placemark');
document.getElementById('streetsList').innerHTML = '';
streetsLayerGroup.clearLayers();
streets = [];
Array.from(placemarks).forEach(placemark => {
const streetName = placemark.getElementsByTagName('name')[0].textContent;
const coordinates = placemark.getElementsByTagName('coordinates')[0].textContent.split(',');
const latLng = [parseFloat(coordinates[1]), parseFloat(coordinates[0])];
const description = placemark.getElementsByTagName('description')[0]?.textContent || 'Nessuna nota disponibile.';
addStreetToMap(streetName, latLng, description);
addStreetToList(streetName, latLng);
});
document.getElementById('fileName').textContent = FilePicker.Selection.replace('.kml', '');
}; reader.readAsText(new Blob([FileContent], {type: 'application/xml'}));")
vediamo se qualcuno riesce a capire e interpretare il tutto. Grazie
