untitled

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Mappa Test Cellulare</title>
    
    <!-- CSS di Leaflet aggiornato con protocollo sicuro HTTPS esplicito -->
    <link rel="stylesheet" href="https://cloudflare.com" />
    
    <style>
        /* Questo forza la mappa a prendersi tutto lo schermo del telefono, senza margini */
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>

    <!-- Contenitore della mappa a tutto schermo -->
    <div id="map"></div>

    <!-- JavaScript di Leaflet da CDN stabile -->
    <script src="https://cloudflare.com"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Inizializza la mappa su Lecce
            var map = L.map('map').setView([40.3532, 18.1715], 14);

            // Carica le immagini dei tasselli usando una sorgente alternativa ultra-compatibile
            L.tileLayer('https://openstreetmap.org{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© OpenStreetMap'
            }).addTo(map);

            // Inseriamo solo 3 punti di test per verificare se si sblocca
            var punti = [
                {n: "Anfiteatro Romano", c: [40.3528, 18.1728]},
                {n: "Castello Carlo V", c: [40.3533, 18.1752]},
                {n: "Piazza del Duomo", c: [40.3519, 18.1691]}
            ];

            punti.forEach(function(p) {
                L.marker(p.c).addTo(map).bindPopup(p.n);
            });
            
            // Forza il rinfresco della mappa in caso di caricamento pigro sul telefono
            setTimeout(function(){ map.invalidateSize(); }, 500);
        });
    </script>
</body>
</html>