mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-11 01:31:39 -05:00
121 lines
3.8 KiB
HTML
121 lines
3.8 KiB
HTML
<!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>
|