| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>FastAPI Maps</title>
|
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
|
|
|
| <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
|
| <script src="/static/js/leaflet-control-groupedlayer.js"></script>
|
| <script src="/static/js/leaflet-control-coordinates.js"></script>
|
|
|
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"/>
|
| <link rel="stylesheet" href="/static/style.css"/>
|
| <style>
|
| html, body {
|
| margin: 0;
|
| padding: 0;
|
| }
|
| #map {
|
| width: 100%;
|
| height: 100vh;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div id="map"></div>
|
| <script>
|
|
|
| const mapData = {{ maps[0] | tojson }}
|
|
|
| const transform = mapData.transform
|
| const bounds = mapData.bounds
|
| const svgBounds = mapData.svgBounds ? mapData.svgBounds : bounds
|
| const coordinateRotation = mapData.coordinateRotation ? mapData.coordinateRotation : 0
|
| const svgPath = mapData.svgPath
|
| const imageUrl = mapData.svgPath
|
| const minZoom = mapData.minZoom ? mapData.minZoom : 1
|
| const maxZoom = mapData.maxZoom ? mapData.maxZoom : 6
|
|
|
| const images = {
|
| 'container_bank-cash-register': 'container_cash-register',
|
| 'container_bank-safe': 'container_safe',
|
| 'container_buried-barrel-cache': 'container_buried-barrel-cache',
|
| 'container_cash-register': 'container_cash-register',
|
| 'container_cash-register-tar2-2': 'container_cash-register',
|
| 'container_dead-civilian': 'container_dead-scav',
|
| 'container_dead-scav': 'container_dead-scav',
|
| 'container_festive-airdrop-supply-crate': 'container_festive-airdrop-supply-crate',
|
| 'container_pmc-body': 'container_dead-scav',
|
| 'container_civilian-body': 'container_dead-scav',
|
| 'container_drawer': 'container_drawer',
|
| 'container_duffle-bag': 'container_duffle-bag',
|
| 'container_grenade-box': 'container_grenade-box',
|
| 'container_ground-cache': 'container_ground-cache',
|
| 'container_jacket': 'container_jacket',
|
| 'container_lab-technician-body': 'container_dead-scav',
|
| 'container_medbag-smu06': 'container_medbag-smu06',
|
| 'container_medcase': 'container_medcase',
|
| 'container_medical-supply-crate': 'container_crate',
|
| 'container_pc-block': 'container_pc-block',
|
| 'container_plastic-suitcase': 'container_plastic-suitcase',
|
| 'container_ration-supply-crate': 'container_crate',
|
| 'container_safe': 'container_safe',
|
| 'container_scav-body': 'container_dead-scav',
|
| 'container_shturmans-stash': 'container_weapon-box',
|
| 'container_technical-supply-crate': 'container_crate',
|
| 'container_toolbox': 'container_toolbox',
|
| 'container_weapon-box': 'container_weapon-box',
|
| 'container_wooden-ammo-box': 'container_wooden-ammo-box',
|
| 'container_wooden-crate': 'container_wooden-crate',
|
| 'extract_pmc': 'extract_pmc',
|
| 'extract_scav': 'extract_scav',
|
| 'extract_shared': 'extract_shared',
|
| 'extract_transit': 'extract_transit',
|
| 'hazard': 'hazard',
|
| 'hazard_mortar': 'hazard_mortar',
|
| 'hazard_minefield': 'hazard',
|
| 'hazard_sniper': 'hazard',
|
| 'key': 'key',
|
| 'lock': 'lock',
|
| 'loose_loot': 'loose_loot',
|
| 'quest_item': 'quest_item',
|
| 'quest_objective': 'quest_objective',
|
| 'spawn_sniper_scav': 'spawn_sniper_scav',
|
| 'spawn_bloodhound': 'spawn_bloodhound',
|
| 'spawn_boss': 'spawn_boss',
|
| 'spawn_cultist-priest': 'spawn_cultist-priest',
|
| 'spawn_pmc': 'spawn_pmc',
|
| 'spawn_rogue': 'spawn_rogue',
|
| 'spawn_scav': 'spawn_scav',
|
| 'stationarygun': 'stationarygun',
|
| 'switch': 'switch',
|
| };
|
|
|
| const categories = {
|
| 'extract_pmc': 'PMC',
|
| 'extract_shared': 'Shared',
|
| 'extract_scav': 'Scav',
|
| 'extract_transit': 'Transit',
|
| 'spawn_sniper_scav': 'Sniper Scav',
|
| 'spawn_pmc': 'PMC',
|
| 'spawn_scav': 'Scav',
|
| 'spawn_boss': 'Boss',
|
| 'quest_item': 'Item',
|
| 'quest_objective': 'Objective',
|
| 'lock': 'Locks',
|
| 'lever': 'Lever',
|
| 'stationarygun': 'Stationary Gun',
|
| 'switch': 'Switch',
|
| 'place-names': 'Place Names',
|
| };
|
|
|
| function getCRS(transform) {
|
| let scaleX = 1;
|
| let scaleY = 1;
|
| let marginX = 0;
|
| let marginY = 0;
|
| if (transform) {
|
| scaleX = transform[0];
|
| scaleY = transform[2] * -1;
|
| marginX = transform[1];
|
| marginY = transform[3];
|
| }
|
| return L.extend({}, L.CRS.Simple, {
|
| transformation: new L.Transformation(scaleX, marginX, scaleY, marginY),
|
| projection: L.extend({}, L.Projection.LonLat, {
|
| project: latLng => {
|
| return L.Projection.LonLat.project(applyRotation(latLng, coordinateRotation));
|
| },
|
| unproject: point => {
|
| return applyRotation(L.Projection.LonLat.unproject(point), coordinateRotation * -1);
|
| },
|
| }),
|
| });
|
| }
|
|
|
| function applyRotation(latLng, rotation) {
|
| if (!latLng.lng && !latLng.lat) {
|
| return L.latLng(0, 0);
|
| }
|
| if (!rotation) {
|
| return latLng;
|
| }
|
|
|
| const angleInRadians = (rotation * Math.PI) / 180;
|
| const cosAngle = Math.cos(angleInRadians);
|
| const sinAngle = Math.sin(angleInRadians);
|
|
|
| const {lng: x, lat: y} = latLng;
|
| const rotatedX = x * cosAngle - y * sinAngle;
|
| const rotatedY = x * sinAngle + y * cosAngle;
|
| return L.latLng(rotatedY, rotatedX);
|
| }
|
|
|
| function pos(position) {
|
| return [position.z, position.x];
|
| }
|
|
|
|
|
| function getScaledBounds(bounds, scaleFactor) {
|
|
|
| const centerX = (bounds[0][0] + bounds[1][0]) / 2;
|
| const centerY = (bounds[0][1] + bounds[1][1]) / 2;
|
|
|
|
|
| const width = bounds[1][0] - bounds[0][0];
|
| const height = bounds[1][1] - bounds[0][1];
|
| const newWidth = width * scaleFactor;
|
| const newHeight = height * scaleFactor;
|
|
|
|
|
| const newBounds = [
|
| [centerY - newHeight / 2, centerX - newWidth / 2],
|
| [centerY + newHeight / 2, centerX + newWidth / 2]
|
| ];
|
|
|
|
|
|
|
|
|
|
|
| return newBounds;
|
| }
|
|
|
|
|
|
|
|
|
| const map = L.map('map', {
|
| maxBounds: getScaledBounds(svgBounds, 1.5),
|
|
|
| center: [0, 0],
|
| zoom: 2,
|
| minZoom: minZoom,
|
| maxZoom: maxZoom,
|
| zoomSnap: 0.1,
|
| scrollWheelZoom: true,
|
| wheelPxPerZoomLevel: 120,
|
| crs: getCRS(transform),
|
| attributionControl: false,
|
| id: "wwoodsMap",
|
| });
|
|
|
| const layerControl = L.control.groupedLayers(null, null, {
|
| position: 'topleft',
|
| collapsed: true,
|
| groupCheckboxes: true,
|
| groupsCollapsable: true,
|
| exclusiveOptionalGroups: ['Levels'],
|
| }).addTo(map);
|
| layerControl.on('overlayToggle', (e) => {
|
| const layerState = e.detail;
|
| if (layerState.checked) {
|
| mapViewRef.current.layer = layerState.key;
|
| } else {
|
| mapViewRef.current.layer = undefined;
|
| }
|
| });
|
| layerControl.on('layerToggle', (e) => {
|
| const layerState = e.detail;
|
| if (!layerState.checked) {
|
| mapSettingsRef.current.hiddenLayers.push(layerState.key);
|
| } else {
|
| mapViewRef.current.layer = layerState.key;
|
| mapSettingsRef.current.hiddenLayers = mapSettingsRef.current.hiddenLayers.filter(key => key !== layerState.key);
|
| }
|
| updateSavedMapSettings();
|
| });
|
| layerControl.on('groupToggle', (e) => {
|
| const groupState = e.detail;
|
| for (const groupLayer of layerControl._layers) {
|
| if (groupLayer.group?.key !== groupState.key) {
|
| continue;
|
| }
|
| if (!groupState.checked) {
|
| mapSettingsRef.current.hiddenLayers.push(groupLayer.key);
|
| } else {
|
| mapSettingsRef.current.hiddenLayers = mapSettingsRef.current.hiddenLayers.filter(key => key !== groupLayer.key);
|
| }
|
| }
|
| if (!groupState.checked) {
|
| mapSettingsRef.current.hiddenGroups.push(groupState.key);
|
| } else {
|
| mapSettingsRef.current.hiddenGroups = mapSettingsRef.current.hiddenGroups.filter(key => key !== groupState.key);
|
| }
|
| updateSavedMapSettings();
|
| });
|
| layerControl.on('groupCollapseToggle', (e) => {
|
| const groupState = e.detail;
|
| if (groupState.collapsed) {
|
| mapSettingsRef.current.collapsedGroups.push(groupState.key);
|
|
|
| } else {
|
| mapSettingsRef.current.collapsedGroups = mapSettingsRef.current.collapsedGroups.filter(key => key !== groupState.key);
|
| }
|
| updateSavedMapSettings();
|
| });
|
|
|
| const getLayerOptions = (layerKey, groupKey, layerName) => {
|
| return {
|
| groupKey,
|
| layerKey,
|
| groupName: groupKey,
|
| layerName: layerName || categories[layerKey] || layerKey,
|
|
|
|
|
| image: images[layerKey] ? "/static/maps/interactive/${images[layerKey]}.png" : undefined,
|
|
|
| };
|
| };
|
|
|
| const addLayer = (layer, layerKey, groupKey, layerName) => {
|
| layer.key = layerKey;
|
| const layerOptions = getLayerOptions(layerKey, groupKey, layerName);
|
| if (!layerOptions.layerHidden) {
|
| layer.addTo(map);
|
| }
|
| layerControl.addOverlay(layer, layerOptions.layerName, layerOptions);
|
| };
|
| map.layerControl = layerControl;
|
|
|
|
|
| const overlay = L.imageOverlay(imageUrl, getBounds(svgBounds));
|
| overlay.addTo(map);
|
|
|
|
|
| function getBounds(bounds) {
|
| if (!bounds) {
|
| return undefined;
|
| }
|
| return L.latLngBounds([bounds[0][1], bounds[0][0]], [bounds[1][1], bounds[1][0]]);
|
|
|
| }
|
|
|
| const layerOptions = {
|
| maxZoom: maxZoom,
|
| maxNativeZoom: maxZoom,
|
| extents: [
|
| {
|
| height: [Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER],
|
| bounds: [bounds],
|
| }
|
| ],
|
| type: 'map-layer',
|
| };
|
| let tileLayer = false;
|
| const baseLayers = [];
|
| const tileSize = 256;
|
| let svgLayer = false;
|
| if (svgPath) {
|
| const svgBounds2 = svgBounds ? getBounds(svgBounds) : bounds;
|
| svgLayer = L.imageOverlay(svgPath, svgBounds2, layerOptions);
|
| baseLayers.push(svgLayer);
|
| }
|
|
|
| if (mapData.labels?.length > 0) {
|
| const labelsGroup = L.layerGroup();
|
| const defaultHeight = ((layerOptions.extents[0].height[1] - layerOptions.extents[0].height[0]) / 2) + layerOptions.extents[0].height[0];
|
| for (const label of mapData.labels) {
|
| const fontSize = label.size ? label.size : 100;
|
| const height = label.position.length < 3 ? defaultHeight : label.position[2];
|
| const rotation = label.rotation ? label.rotation : 0;
|
| L.marker(pos({x: label.position[0], z: label.position[1]}), {
|
| icon: L.divIcon({
|
| html: `<div class="label" style="font-size: ${fontSize}%; transform: translate3d(-50%, -50%, 0) rotate(${rotation}deg)">${label.text}</div>`,
|
| className: 'map-area-label',
|
| layers: baseLayers,
|
| }),
|
| interactive: false,
|
| zIndexOffset: -100000,
|
| position: {
|
| x: label.position[0],
|
| y: height,
|
| z: label.position[1],
|
| },
|
| top: typeof label.top !== 'undefined' ? label.top : 1000,
|
| bottom: typeof label.bottom !== 'undefined' ? label.bottom : -1000,
|
| }).addTo(labelsGroup);
|
| }
|
| addLayer(labelsGroup, 'place-names', 'Landmarks');
|
|
|
| }
|
| </script>
|
| </body>
|
| </html>
|
|
|
