Add a test file with functioning fog of war overlay

2026-01-10 17:21:38 -05:00 · 2024-05-29 23:45:08 +02:00 · 2024-05-29 23:45:08 +02:00 · bf000cc544
commit bf000cc544
parent a90d6f1f39
1 changed files with 121 additions and 0 deletions
--- a/test.html
+++ b/test.html
@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet Map with Fog of War</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+    <style>
+        #map { height: 100vh; }
+
+        .fog {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7); /* Adjust the opacity here */
+            pointer-events: none;
+            mix-blend-mode: multiply;
+            z-index: 1000;
+        }
+
+        .unfogged-circle {
+            position: absolute;
+            pointer-events: none;
+            border-radius: 50%;
+            background: white;
+            mix-blend-mode: destination-out;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <div id="fog" class="fog"></div>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <script>
+        // Initialize the map
+        var map = L.map('map').setView([52.516667, 13.383333], 14);
+
+        // Add OpenStreetMap tile layer
+        var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+        }).addTo(map);
+
+        // Create fog of war overlay
+        var fogOverlay = L.layerGroup();
+
+        // Function to clear fog around a given position
+        function clearFog(lat, lng, radius) {
+            var fog = document.getElementById('fog');
+            var point = map.latLngToContainerPoint([lat, lng]);
+            var size = radius * 2;
+            var circle = document.createElement('div');
+            circle.className = 'unfogged-circle';
+            circle.style.width = size + 'px';
+            circle.style.height = size + 'px';
+            circle.style.left = (point.x - radius) + 'px';
+            circle.style.top = (point.y - radius) + 'px';
+            fog.appendChild(circle);
+        }
+
+        // Example points to unfog
+        var points = [
+            [52.516667, 13.383333],
+            [52.520007, 13.404954],
+            [52.522222, 13.412222]
+        ];
+
+        // Clear fog around each point
+        function updateFog() {
+            if (fogEnabled) {
+                var fog = document.getElementById('fog');
+                fog.innerHTML = '';  // Clear previous circles
+                points.forEach(function(point) {
+                    clearFog(point[0], point[1], 100); // Adjust the radius as needed
+                });
+            }
+        }
+
+        // Initial fog clearing
+        var fogEnabled = true;
+        updateFog();
+
+        // Update fog clearing when the map moves or zooms
+        map.on('moveend', updateFog);
+        map.on('zoomend', updateFog);
+
+        // Layers for the controls
+        var markersLayer = L.layerGroup(); // Replace with your actual markers layer
+        var polylinesLayer = L.layerGroup(); // Replace with your actual polylines layer
+        var heatmapLayer = L.layerGroup(); // Replace with your actual heatmap layer
+
+        // Layers control
+        var controlsLayer = {
+            "Points": markersLayer,
+            "Polylines": polylinesLayer,
+            "Heatmap": heatmapLayer,
+            "Fog of War": fogOverlay
+        };
+
+        L.control.layers({ "OpenStreetMap": osmLayer }, controlsLayer).addTo(map);
+
+        // Toggle fog layer visibility
+        map.on('overlayadd', function(e) {
+            if (e.name === 'Fog of War') {
+                fogEnabled = true;
+                document.getElementById('fog').style.display = 'block';
+                updateFog();
+            }
+        });
+
+        map.on('overlayremove', function(e) {
+            if (e.name === 'Fog of War') {
+                fogEnabled = false;
+                document.getElementById('fog').style.display = 'none';
+            }
+        });
+
+    </script>
+</body>
+</html>