https://waariswerner.nl/

ID de l'analyse :
319e4a91-d70f-4d8b-9d69-c74e0be86f66Terminée
URL soumise :
https://waariswerner.nl/
Fin du rapport :

Liens : 1 trouvé(s)

Lientexte
https://leafletjs.com Leaflet

Variables JavaScript : 8 trouvée(s)

NomType
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
leafletobject
Lobject
updateClockAndOverlayfunction
moveBikefunction
_leaflet_eventsobject

Messages de journal de console : 1 trouvé(s)

TypeCatégorieEnregistrement
errornetwork
URL
https://waariswerner.nl/favicon.ico
texte
Failed to load resource: the server responded with a status of 404 ()

HTML

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Waar is Werner</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
    <style>
        #map {
            height: 100vh;
            position: relative;
        }
        .bike-head {
            position: relative;
            width: 48px;
            height: 64px;
        }
        .bike-head .bike {
            background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/transportation-automotive/bicycle-icon.png'); /* Updated bike icon */
            background-size: cover;
            width: 48px;
            height: 32px;
        }
        .bike-head .head {
            background-image: url('/img/head_cropped.png'); /* Path to the uploaded head image */
            background-size: cover;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            position: absolute;
            top: -16px;
            left: 8px;
        }
        #clock {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1000;
            background: white;
            padding: 5px 10px;
            font-size: 16px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }
        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            pointer-events: none;
            z-index: 900;
        }
    </style>
</head>
<body>
    <div id="map" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"><div class="leaflet-layer " style="z-index: 1;"><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 19; transform: translate3d(0px, 0px, 0px) scale(1);"><img alt="" src="https://c.tile.openstreetmap.org/13/4207/2692.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(235px, 224px, 0px); opacity: 0;"><img alt="" src="https://a.tile.openstreetmap.org/13/4208/2692.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(491px, 224px, 0px); opacity: 0;"><img alt="" src="https://b.tile.openstreetmap.org/13/4207/2691.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(235px, -32px, 0px); opacity: 0;"><img alt="" src="https://c.tile.openstreetmap.org/13/4208/2691.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(491px, -32px, 0px); opacity: 0;"><img alt="" src="https://a.tile.openstreetmap.org/13/4207/2693.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(235px, 480px, 0px); opacity: 0;"><img alt="" src="https://b.tile.openstreetmap.org/13/4208/2693.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(491px, 480px, 0px); opacity: 0;"><img alt="" src="https://b.tile.openstreetmap.org/13/4206/2692.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-21px, 224px, 0px); opacity: 0;"><img alt="" src="https://b.tile.openstreetmap.org/13/4209/2692.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(747px, 224px, 0px); opacity: 0;"><img alt="" src="https://a.tile.openstreetmap.org/13/4206/2691.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-21px, -32px, 0px); opacity: 0;"><img alt="" src="https://a.tile.openstreetmap.org/13/4209/2691.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(747px, -32px, 0px); opacity: 0;"><img alt="" src="https://c.tile.openstreetmap.org/13/4206/2693.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-21px, 480px, 0px); opacity: 0;"><img alt="" src="https://c.tile.openstreetmap.org/13/4209/2693.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(747px, 480px, 0px); opacity: 0;"></div></div></div><div class="leaflet-pane leaflet-overlay-pane"></div><div class="leaflet-pane leaflet-shadow-pane"></div><div class="leaflet-pane leaflet-marker-pane"><div class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" tabindex="0" role="button" style="margin-left: -24px; margin-top: -32px; width: 48px; height: 64px; transform: translate3d(178px, 474px, 0px); z-index: 474;"><div class="bike-head"><div class="bike"></div><div class="head"></div></div></div><img src="https://cdn-icons-png.flaticon.com/512/3621/3621610.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -16px; margin-top: -32px; width: 32px; height: 32px; transform: translate3d(332px, 309px, 0px); z-index: 309;"><img src="https://cdn-icons-png.flaticon.com/512/3135/3135756.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -16px; margin-top: -32px; width: 32px; height: 32px; transform: translate3d(384px, 289px, 0px); z-index: 289;"><img src="https://cdn-icons-png.flaticon.com/512/869/869636.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -16px; margin-top: -32px; width: 32px; height: 32px; transform: translate3d(428px, 234px, 0px); z-index: 234;"><img src="https://portal.soigne.app/media/ls93-brq-igl-lgx-6ni/thumb" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -16px; margin-top: -32px; width: 32px; height: 32px; transform: translate3d(497px, 319px, 0px); z-index: 319;"><img src="https://cdn-icons-png.flaticon.com/512/1041/1041884.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -16px; margin-top: -32px; width: 32px; height: 32px; transform: translate3d(209px, 474px, 0px); z-index: 474;"><img src="https://cdn-icons-png.flaticon.com/512/2910/2910820.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -16px; margin-top: -32px; width: 32px; height: 32px; transform: translate3d(209px, 474px, 0px); z-index: 474;"></div><div class="leaflet-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"></div><div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(1.07714e+06px, 689228px, 0px) scale(4096);"></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in" aria-disabled="false"><span aria-hidden="true">+</span></a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out" aria-disabled="false"><span aria-hidden="true">−</span></a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="https://leafletjs.com" title="A JavaScript library for interactive maps"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" class="leaflet-attribution-flag"><path fill="#4C7BE1" d="M0 0h12v4H0z"></path><path fill="#FFD500" d="M0 4h12v3H0z"></path><path fill="#E0BC00" d="M0 7h12v1H0z"></path></svg> Leaflet</a> <span aria-hidden="true">|</span> © OpenStreetMap contributors</div></div></div></div>
    <div id="clock">00:47</div>
    <div id="overlay" style="display: block;"></div>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script>
        // Initialize the map
        const map = L.map('map').setView([52.3676, 4.9041], 13);

        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // Add a bike with head marker
        const bikeHeadIcon = L.divIcon({
            html: '<div class="bike-head">' +
                  '<div class="bike"></div>' +
                  '<div class="head"></div>' +
                  '</div>',
            className: '',
            iconSize: [48, 64]
        });

        const bikeMarker = L.marker([52.3676, 4.9041], { icon: bikeHeadIcon }).addTo(map);

        // Add additional markers
        const markers = [
            { coords: [52.3667, 4.8945], iconUrl: 'https://cdn-icons-png.flaticon.com/512/3621/3621610.png', label: 'Doctor' },
            { coords: [52.3688, 4.9035], iconUrl: 'https://cdn-icons-png.flaticon.com/512/3135/3135756.png', label: 'School' },
            { coords: [52.3745, 4.9111], iconUrl: 'https://cdn-icons-png.flaticon.com/512/869/869636.png', label: 'Swimming Pool' },
            { coords: [52.365658, 4.922974], iconUrl: 'https://portal.soigne.app/media/ls93-brq-igl-lgx-6ni/thumb', label: 'Soigne' },
            { coords: [52.349379, 4.873452], iconUrl: 'https://cdn-icons-png.flaticon.com/512/1041/1041884.png', label: 'Home' }, // Home marker at Rubensstraat 50-2
            { coords: [52.349379, 4.873452], iconUrl: 'https://cdn-icons-png.flaticon.com/512/2910/2910820.png', label: 'Timmerlui' } // Timmerlui marker at the same location as Home
        ];

        markers.forEach(marker => {
            const customIcon = L.icon({
                iconUrl: marker.iconUrl,
                iconSize: [32, 32],
                iconAnchor: [16, 32]
            });
            L.marker(marker.coords, { icon: customIcon }).addTo(map).bindPopup(marker.label);
        });

        // Define bike path with detour to Soigne marker
        const bikePath = [
            [52.3676, 4.9041],
            [52.3702, 4.8952],
            [52.3738, 4.8910],
            [52.3791, 4.9003],
            [52.365658, 4.922974], // Pause at Soigne
            [52.3770, 4.9123],
            [52.349379, 4.873452] // Stop at Home
        ];

        let currentIndex = 0;
        const overlay = document.getElementById('overlay');
        const clock = document.getElementById('clock');

        // Simulate accelerated day/night cycle
        let simulatedTime = 0; // Start at midnight
        function updateClockAndOverlay() {
            const hours = Math.floor(simulatedTime / 60);
            const minutes = simulatedTime % 60;
            const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
            clock.textContent = timeString;

            // Show dark overlay during night hours
            if (hours >= 20 || hours < 6) {
                overlay.style.display = 'block';
            } else {
                overlay.style.display = 'none';
            }

            simulatedTime = (simulatedTime + 1) % 1440; // Increment time and loop back after 24 hours
        }

        setInterval(updateClockAndOverlay, 24); // Update clock every simulated second
        updateClockAndOverlay();

        function moveBike() {
            const hours = Math.floor(simulatedTime / 60);

            // Move only during daytime and avoid moving during nighttime hours
            if (hours >= 8 && hours < 17) {
                if (currentIndex < bikePath.length) {
                    bikeMarker.setLatLng(bikePath[currentIndex]);

                    // Pause at Soigne marker
                    if (currentIndex === 4) {
                        setTimeout(() => {
                            currentIndex++;
                            moveBike();
                        }, 3000); // Pause for 3 simulated seconds
                    } else {
                        currentIndex++;
                        setTimeout(moveBike, 1000); // Move every simulated second
                    }
                } else {
                    currentIndex = 0; // Reset the animation loop
                    setTimeout(moveBike, 1000);
                }
            } else if (hours >= 17 || hours < 8) {
                // During nighttime, stop at Home marker
                bikeMarker.setLatLng([52.349379, 4.868222]);
                setTimeout(moveBike, 1000); // Check again after 1 simulated second
            } else {
                setTimeout(moveBike, 1000); // Check again after 1 simulated second
            }
        }

        moveBike();
    </script>


</body></html>