Visualizzazione pagina html nel web viewer

ciao a tutti
premetto che non ho una preparazione alla programmazione e cose varie, però sono curioso perciò con l'aiuto di ChatGPT ho realizzato un codice html per visualizzare dei percorsi creati e salvati in .kml per la raccolta dei rifiuti porta a porta. la pagina se aperta con un qualsiasi browser funziona correttamente carico il file kml e tutto funziona . ovviamente non funziona con web viewer. ho chiesto a ChatGPT di creare le modifiche per inserirlo in app inventor, mi ha generato il codice html e 2 plaintext.
sinceramente non so come realizzare il tutto chiedo se qualcuno può interpretare quello che vorrei realizzare. allego html funzionante da aprire con Chrome e file kml da caricare per capire il progetto. ovviamente i file txt vanno rinominati rispettivamente .html e .kml
index.txt (10.4 KB)
info.txt (7.6 KB)

a seguire allego il progetto per app inventor generato da ChatGPT.

You can upload your index.html file to assets and use WebViewer:

image

for the kml file, you can find several examples in the community. SteveJG has some good examples like this:

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: '&copy; <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

grazie Ramon ho caricato il file index.html vedo la pagina ma i pulsante "carica percorso" non funziona
ho visto gli esempi, ma vorrei personalizzare il mio html e non so come fare, se non sarò in grado di realizzare rinuncerò. grazie comunque

You will need an extension to give the webviewer file access. Try webviewextra.

niente da fare ho compilato questo ma purtroppo non visualizzo la lista delle vie sul lato sinistro della mappa e poi la mappa lampeggia. probabilmente webviewer non interpreta il codice html come fa un browser.
lettore_pap1_final.aia (81.9 KB)

OK, you are using CustomWebView by @vknow360

Provide a simple example aia project of what you want to do...

nel primo post descrivo il mio progetto in HTML, purtroppo non riesco a visualizzare con appinventor parte del codice html

How are you handling location request in CustomWebView?