Interactive Map by @jowinb - Codewith.it

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

Referenze

heightDetermina l'altezza di un elemento HTML in pixel
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
<b>Formatta il testo in grassetto
autofocusAttiva un elemento al caricamento della pagina.
<tr>Definisce le righe di una tabella (rows)
<h4>Titolo di intestazione di quarto livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

La Magica Storia del Basket Moderno

Heads Or Tails Random Tally

esercitazione 6

Form Raccolta Segnalazioni Immobil

Map System using Leaflet

Struttura pagina HTML5

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>