Interactive Map by @jowinb - Codewith.it

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

Referenze

sizeDetermina le dimensioni dell'elemento in base al valore contenuto
multipart/form-dataCodifica dei caratteri di un form
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
hreflangConsente di dichiarare la lingua del documento collegato.
<b>Formatta il testo in grassetto
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Test Gaming HTML MEME

X-Dsigner (Blu Eletric)– Web & U

La mia prima pagina HTML

Quiz ristrutturazione

Stuff and Things

VerdeTech - Orto Botanico | Piante

Le Meraviglie d\\\\\\\\

Array of Colors

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>