|
|
<!DOCTYPE html>
|
|
|
<html lang="de">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>Woods Karte</title>
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
|
|
|
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
#map {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
<link rel="stylesheet" href="woods.css" />
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="map"></div>
|
|
|
<script>
|
|
|
const transform = [0.1855, 113.1, 0.1855, 167.8]
|
|
|
const svgBounds = [
|
|
|
[650, -945],
|
|
|
[-695, 470],
|
|
|
]
|
|
|
const bounds = [
|
|
|
[650, -945],
|
|
|
[-762, 470],
|
|
|
]
|
|
|
const coordinateRotation = 180
|
|
|
const svgPath = "Woods.svg"
|
|
|
const minZoom = 1
|
|
|
const maxZoom = 6
|
|
|
|
|
|
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: 1,
|
|
|
maxZoom: 6,
|
|
|
zoomSnap: 0.1,
|
|
|
scrollWheelZoom: true,
|
|
|
wheelPxPerZoomLevel: 120,
|
|
|
crs: getCRS(transform),
|
|
|
attributionControl: false,
|
|
|
id: "wwoodsMap",
|
|
|
})
|
|
|
|
|
|
|
|
|
const imageUrl = "Woods.svg"
|
|
|
|
|
|
const overlay = L.imageOverlay(imageUrl, getBounds(svgBounds))
|
|
|
overlay.addTo(map)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const labels = [
|
|
|
{ position: [10, -3], text: "Sawmill" },
|
|
|
{ position: [-485, -390], text: "Scav Town" },
|
|
|
{ position: [-517, -210], text: "Old Sawmill" },
|
|
|
{ position: [-80, -680], text: "Cultist Village" },
|
|
|
{ position: [290, -475], text: "USEC Camp" },
|
|
|
{ position: [-188, 235], text: "Military Camp" },
|
|
|
{ position: [-5, -515], text: "Ponds", size: 80 },
|
|
|
{ position: [-252, -37], text: "Crash Site", size: 80 },
|
|
|
{ position: [239, -65], text: "Checkpoint", size: 70 },
|
|
|
{ position: [244, 125], text: "Shack", size: 70 },
|
|
|
{ position: [-16, -122], text: "Lumber", size: 70 },
|
|
|
{ position: [-3, -74], text: "Cabins", size: 70 },
|
|
|
{ position: [-234, 357], text: "Bus Stop", size: 70 },
|
|
|
{ position: [-327, 19], text: "Jaeger's Camp", size: 70 },
|
|
|
{ position: [85, -147], text: "Sniper Rock", size: 70 },
|
|
|
{ position: [200, -606], text: "Convoy", size: 70 },
|
|
|
]
|
|
|
|
|
|
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 (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 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)
|
|
|
}
|
|
|
|
|
|
labelsGroup.addTo(map)
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
<style>
|
|
|
.label {
|
|
|
text-align: center;
|
|
|
}
|
|
|
</style>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
