https://waariswerner.nl/

Scan-ID:
319e4a91-d70f-4d8b-9d69-c74e0be86f66Beendet
Eingereichte URL:
https://waariswerner.nl/
Bericht beendet:

Die von der Seite ausgehenden identifizierten Links

LinkText
https://leafletjs.com Leaflet

JavaScript-Variablen · 8 gefunden

Globale JavaScript-Variablen, die in das Window Object einer Seite geladen werden, sind Variablen, die außerhalb von Funktionen deklariert werden und von jeder Stelle des Codes innerhalb des aktuellen Bereichs zugänglich sind

NameTyp
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
leafletobject
Lobject
updateClockAndOverlayfunction
moveBikefunction
_leaflet_eventsobject

Konsolenprotokoll-Meldungen · 1 gefunden

In der Web-Konsole protokollierte Meldungen

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

HTML

Der HTML-Rohtext der Seite

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