|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>{{ maps[0].name }} | Map with friends</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>
|
|
|
<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 src="/static/js/leaflet.controlGroupedlayer.js"></script>
|
|
|
<script src="/static/js/leaflet.controlCoordinates.js"></script>
|
|
|
<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 showElevation = false;
|
|
|
|
|
|
const ws = new WebSocket("ws://localhost:8000/");
|
|
|
ws.onmessage = function (event) {
|
|
|
console.log(event.data);
|
|
|
const data = JSON.parse(event.data);
|
|
|
if (data.type === "coordinates") {
|
|
|
addMarker(data.x, data.y, data.z);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
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 addElevation(item, popup) {
|
|
|
if (!showElevation) {
|
|
|
return;
|
|
|
}
|
|
|
const elevationContent = L.DomUtil.create('div', undefined, popup);
|
|
|
elevationContent.textContent = `Elevation: ${item.position.y.toFixed(2)}`;
|
|
|
if (item.top && item.bottom && item.top !== item.position.y && item.bottom !== item.position.y) {
|
|
|
const heightContent = L.DomUtil.create('div', undefined, popup);
|
|
|
heightContent.textContent = `Top ${item.top.toFixed(2)}, bottom: ${item.bottom.toFixed(2)}`;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function markerIsOnLayer(marker, layer) {
|
|
|
if (!layer) {
|
|
|
return true;
|
|
|
}
|
|
|
var top = marker.options.top || marker.options.position.y;
|
|
|
var bottom = marker.options.bottom || marker.options.position.y;
|
|
|
for (const extent of layer.options.extents) {
|
|
|
if (top >= extent.height[0] && bottom < extent.height[1]) {
|
|
|
let containedType = 'partial';
|
|
|
if (bottom >= extent.height[0] && top <= extent.height[1]) {
|
|
|
containedType = 'full';
|
|
|
}
|
|
|
if (extent.bounds) {
|
|
|
for (const boundsArray of extent.bounds) {
|
|
|
const bounds = getBounds(boundsArray);
|
|
|
if (bounds.contains(pos(marker.options.position))) {
|
|
|
return containedType;
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
return containedType;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
function markerIsOnActiveLayer(marker) {
|
|
|
if (!marker.options.position) {
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
const map = marker._map;
|
|
|
|
|
|
|
|
|
const overlays = map.layerControl._layers.map(l => l.layer).filter(l => Boolean(l.options.extents) && l.options.overlay);
|
|
|
for (const layer of overlays) {
|
|
|
for (const extent of layer.options.extents) {
|
|
|
if (markerIsOnLayer(marker, layer) === 'full' && !map.hasLayer(layer) && extent.bounds) {
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
const activeOverlay = Object.values(map._layers).find(l => l.options?.extents && l.options?.overlay);
|
|
|
if (activeOverlay && markerIsOnLayer(marker, activeOverlay)) {
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
|
|
|
const baseLayer = Object.values(map._layers).find(l => l.options?.extents && !L.options?.overlay);
|
|
|
if (!activeOverlay && markerIsOnLayer(marker, baseLayer)) {
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
function checkMarkerForActiveLayers(event) {
|
|
|
const marker = event.target || event;
|
|
|
const outline = marker.options.outline;
|
|
|
const onLevel = markerIsOnActiveLayer(marker);
|
|
|
if (onLevel) {
|
|
|
marker._icon?.classList.remove('off-level');
|
|
|
if (outline) {
|
|
|
outline._path?.classList.remove('off-level');
|
|
|
}
|
|
|
} else {
|
|
|
marker._icon?.classList.add('off-level');
|
|
|
if (outline) {
|
|
|
outline._path?.classList.add('off-level');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function activateMarkerLayer(event) {
|
|
|
const marker = event.target || event;
|
|
|
if (markerIsOnActiveLayer(marker)) {
|
|
|
return;
|
|
|
}
|
|
|
const activeLayers = Object.values(marker._map._layers).filter(l => l.options?.extents && l.options?.overlay);
|
|
|
for (const layer of activeLayers) {
|
|
|
layer.removeFrom(marker._map);
|
|
|
}
|
|
|
const heightLayers = marker._map.layerControl._layers.filter(l => l.layer.options.extents && l.layer.options.overlay).map(l => l.layer);
|
|
|
for (const layer of heightLayers) {
|
|
|
if (markerIsOnLayer(marker, layer)) {
|
|
|
layer.addTo(marker._map);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const getALink = (path, contents) => {
|
|
|
const a = L.DomUtil.create('a');
|
|
|
a.setAttribute('href', path);
|
|
|
a.setAttribute('target', '_blank');
|
|
|
a.append(contents);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return a;
|
|
|
};
|
|
|
|
|
|
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 checkMarkerBounds(position, markerBounds) {
|
|
|
if (position.x < markerBounds.TL.x) markerBounds.TL.x = position.x;
|
|
|
if (position.z > markerBounds.TL.z) markerBounds.TL.z = position.z;
|
|
|
if (position.x > markerBounds.BR.x) markerBounds.BR.x = position.x;
|
|
|
if (position.z < markerBounds.BR.z) markerBounds.BR.z = position.z;
|
|
|
}
|
|
|
|
|
|
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);
|
|
|
}
|
|
|
|
|
|
const positionIsInBounds = (position) => {
|
|
|
return getBounds(bounds).contains(pos(position));
|
|
|
};
|
|
|
|
|
|
let markerBounds = {
|
|
|
'TL': { x: Number.MAX_SAFE_INTEGER, z: Number.MIN_SAFE_INTEGER },
|
|
|
'BR': { x: Number.MIN_SAFE_INTEGER, z: Number.MAX_SAFE_INTEGER }
|
|
|
}
|
|
|
|
|
|
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');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
if (mapData.spawns.length > 0) {
|
|
|
const spawnLayers = {
|
|
|
'pmc': L.layerGroup(),
|
|
|
'scav': L.layerGroup(),
|
|
|
'sniper_scav': L.layerGroup(),
|
|
|
'boss': L.layerGroup(),
|
|
|
'cultist-priest': L.layerGroup(),
|
|
|
'rogue': L.layerGroup(),
|
|
|
'bloodhound': L.layerGroup(),
|
|
|
}
|
|
|
for (const spawn of mapData.spawns) {
|
|
|
if (!positionIsInBounds(spawn.position)) {
|
|
|
continue;
|
|
|
}
|
|
|
let spawnType = '';
|
|
|
let bosses = [];
|
|
|
|
|
|
if (spawn.categories.includes('boss')) {
|
|
|
bosses = mapData.bosses.filter(boss => boss.spawnLocations.some(sl => sl.spawnKey === spawn.zoneName));
|
|
|
if (bosses.length === 0) {
|
|
|
if (spawn.categories.includes('bot') && spawn.sides.includes('scav')) {
|
|
|
spawnType = 'scav';
|
|
|
}
|
|
|
else {
|
|
|
console.error(`Unusual spawn: ${spawn.sides}, ${spawn.categories}`);
|
|
|
continue;
|
|
|
}
|
|
|
}
|
|
|
else if (bosses.length === 1 && (bosses[0].normalizedName === 'bloodhound' || bosses[0].normalizedName === 'cultist-priest' || bosses[0].normalizedName === 'rogue')) {
|
|
|
spawnType = bosses[0].normalizedName;
|
|
|
}
|
|
|
else {
|
|
|
spawnType = 'boss';
|
|
|
}
|
|
|
} else if (spawn.categories.includes('sniper')) {
|
|
|
spawnType = 'sniper_scav';
|
|
|
} else if (spawn.sides.includes('scav')) {
|
|
|
if (spawn.categories.includes('bot') || spawn.categories.includes('all')) {
|
|
|
spawnType = 'scav';
|
|
|
}
|
|
|
else {
|
|
|
console.error(`Unusual spawn: ${spawn.sides}, ${spawn.categories}`);
|
|
|
continue;
|
|
|
}
|
|
|
}
|
|
|
else if (spawn.categories.includes('player')) {
|
|
|
if (spawn.sides.includes('pmc') || spawn.sides.includes('all')) {
|
|
|
spawnType = 'pmc'
|
|
|
}
|
|
|
else {
|
|
|
console.error(`Unusual spawn: ${spawn.sides}, ${spawn.categories}`);
|
|
|
continue;
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
console.error(`Unusual spawn: ${spawn.sides}, ${spawn.categories}`);
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
const spawnIcon = L.icon({
|
|
|
iconUrl: `/static/maps/interactive/spawn_${spawnType}.png`,
|
|
|
iconSize: [24, 24],
|
|
|
popupAnchor: [0, -12],
|
|
|
});
|
|
|
|
|
|
if (spawnType === 'pmc') {
|
|
|
spawnIcon.iconAnchor = [12, 24];
|
|
|
spawnIcon.popupAnchor = [0, -24];
|
|
|
}
|
|
|
|
|
|
const popupContent = L.DomUtil.create('div');
|
|
|
if (spawn.categories.includes('boss') && bosses.length > 0) {
|
|
|
bosses = bosses.reduce((unique, current) => {
|
|
|
if (!unique.some(b => b.normalizedName === current.normalizedName)) {
|
|
|
unique.push(current);
|
|
|
if (!categories[`spawn_${current.normalizedName}`]) {
|
|
|
categories[`spawn_${current.normalizedName}`] = current.name;
|
|
|
}
|
|
|
}
|
|
|
return unique;
|
|
|
}, []);
|
|
|
const bossList = L.DomUtil.create('div', undefined, popupContent);
|
|
|
for (const boss of bosses) {
|
|
|
if (bossList.childNodes.length > 0) {
|
|
|
const comma = L.DomUtil.create('span', undefined, bossList);
|
|
|
comma.textContent = ', ';
|
|
|
}
|
|
|
bossList.append(getALink(`https://escapefromtarkov.fandom.com/wiki/Special:Search?scope=internal&query=${boss.name}`, `${boss.name} (${Math.round(boss.spawnChance * 100)}%)`));
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
const spawnDiv = L.DomUtil.create('div', undefined, popupContent);
|
|
|
spawnDiv.textContent = categories[`spawn_${spawnType}`];
|
|
|
}
|
|
|
addElevation(spawn, popupContent);
|
|
|
|
|
|
const marker = L.marker(pos(spawn.position), {
|
|
|
icon: spawnIcon,
|
|
|
position: spawn.position,
|
|
|
});
|
|
|
if (popupContent.childNodes.length > 0) {
|
|
|
marker.bindPopup(L.popup().setContent(popupContent));
|
|
|
}
|
|
|
marker.position = spawn.position;
|
|
|
marker.on('add', checkMarkerForActiveLayers);
|
|
|
marker.on('click', activateMarkerLayer);
|
|
|
marker.addTo(spawnLayers[spawnType]);
|
|
|
|
|
|
checkMarkerBounds(spawn.position, markerBounds);
|
|
|
}
|
|
|
for (const key in spawnLayers) {
|
|
|
if (Object.keys(spawnLayers[key]._layers).length > 0) {
|
|
|
addLayer(spawnLayers[key], `spawn_${key}`, 'Spawns');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function addMarker(x, y, z) {
|
|
|
const position = { x: x, y: y, z: z };
|
|
|
const markerIcon = L.icon({
|
|
|
iconUrl: '/static/maps/interactive/marker.png',
|
|
|
iconSize: [24, 24],
|
|
|
popupAnchor: [0, -12],
|
|
|
});
|
|
|
|
|
|
const marker = L.marker(pos(position), {
|
|
|
icon: markerIcon,
|
|
|
position: position,
|
|
|
});
|
|
|
|
|
|
marker.addTo(map);
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
