Interactive Map by @jowinb - Codewith.it

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

References

maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
animationDefinisce i parametri dell'animazione di un elemento o selettore
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
requiredRende obbligatorio un campo di input

Users

Log in to search for users

Explore

Find inspiration

esercizio tabella

angoli e shadow

Review of Functions I

spese universitarie

conta caratteri online

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>