Interactive Map by @jowinb - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

srcIndica la provenienza di una risorsa esterna (tramite URL).
formnovalidateImpedisce la convalida di un singolo elemento input
<p>Serve a definire paragrafi di testo
application-x-www-form-urlencodedCodifica dei caratteri di un form
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
methodDetermina il metodo di invio dei dati di un form al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

JS Istruzioni condizionali es1

Business Website

esercitazione n. 1

lezione 10 informatica

Attività della settimana.

Basketball Legends

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Map</title>

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

    <style>
        /* General Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Header Styling */
        header {
            background-color: #1a73e8;  /* Soft blue */
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 1.8rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        /* Map Container */
        .map-container {
            position: relative;
            height: calc(100vh - 120px);  /* Adjust for header height */
        }

        #map {
            width: 100%;
            height: 100%;
        }

        /* Footer Styling */
        footer {
            text-align: center;
            padding: 15px;
            background-color: #333;
            color: white;
            font-size: 1rem;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }

        footer a {
            color: #ff5722;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        /* Marker Customization */
        .leaflet-marker-icon {
            background-color: #ff5722;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            border: 2px solid #fff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s ease, box-shadow 0.3s ease;
        }

        /* Add hover effect on marker */
        .leaflet-marker-icon:hover {
            transform: scale(1.2);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }

        /* Popup Custom Styling */
        .leaflet-popup-content-wrapper {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            padding: 15px;
            animation: fadeIn 0.5s ease-out;
        }

        .leaflet-popup-content {
            font-size: 14px;
            color: #333;
        }

        .leaflet-popup-tip {
            background-color: #fff;
        }

        /* Animations */
        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            header {
                font-size: 1.5rem;
            }

            footer {
                font-size: 0.9rem;
            }

            .leaflet-popup-content-wrapper {
                width: 200px;
            }
        }

    </style>
</head>
<body>

    <header>
        Interactive Map - Leaflet
    </header>

    <div class="map-container">
        <div id="map"></div>
    </div>

    <footer>
        Made with ❤ using <a href="https://leafletjs.com" target="_blank">Leaflet</a> and OpenStreetMap
    </footer>

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    <script>
        // Initialize the map and set the view (latitude, longitude, zoom level)
        var map = L.map('map').setView([51.505, -0.09], 13); // Default location: London

        // Add a tile layer (using OpenStreetMap)
        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);

        // Add a marker at a specific location (e.g., London)
        var marker = L.marker([51.505, -0.09]).addTo(map);

        // Add a popup to the marker
        marker.bindPopup("<b>Hello world!</b><br>This is London.").openPopup();

        // Optionally, you can listen for clicks on the map and place a new marker
        map.on('click', function(e) {
            var lat = e.latlng.lat;
            var lng = e.latlng.lng;
            L.marker([lat, lng]).addTo(map)
                .bindPopup("You clicked at: " + lat.toFixed(4) + ", " + lng.toFixed(4))
                .openPopup();
        });
    </script>

</body>
</html>