Interactive Map by @jowinb - Codewith.it

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

References

mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<body>Tag primario di un documento HTML
<head>Tag primario di un documento HTML
disabledImpedisce la modifica di un input
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.

Users

Log in to search for users

Explore

Find inspiration

Ragdoll Archers

Ethical hacking

infostrumenti.html

Twitchpage1confirm

Profilo Studente

ESAME (TORTA DELLA NONNA)

tabella mio esame

Html con 3 img e descrize

Scheda Tecnica Xiaomi 14 Ultra

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>