| <!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>
|
|
|
