static/woods.html

<!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;
			}
			/*.label {
			-webkit-text-stroke: 0.082rem #ccc;
			text-stroke:: 0.082rem #ccc;
			font-weight: bold;
			display: inline-block;
		}*/
		</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 //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) {
				// Calculate the center point of the bounds
				const centerX = (bounds[0][0] + bounds[1][0]) / 2
				const centerY = (bounds[0][1] + bounds[1][1]) / 2

				// Calculate the new width and height
				const width = bounds[1][0] - bounds[0][0]
				const height = bounds[1][1] - bounds[0][1]
				const newWidth = width * scaleFactor
				const newHeight = height * scaleFactor

				// Update the coordinates of the two points defining the bounds
				const newBounds = [
					[centerY - newHeight / 2, centerX - newWidth / 2],
					[centerY + newHeight / 2, centerX + newWidth / 2],
				]

				// console.log("Initial Rectangle:", bounds);
				// console.log("Scaled Rectangle:", newBounds);
				// console.log("Center:", L.bounds(bounds).getCenter(true));

				return newBounds
			}

			// Erstelle die Karte
			//const map = L.map('map').setView([0, 0], 2);

			const map = L.map("map", {
				maxBounds: getScaledBounds(svgBounds, 1.5),
				//maxBounds: bounds,
				center: [0, 0],
				zoom: 2,
				minZoom: 1,
				maxZoom: 6,
				zoomSnap: 0.1,
				scrollWheelZoom: true,
				wheelPxPerZoomLevel: 120,
				crs: getCRS(transform),
				attributionControl: false,
				id: "wwoodsMap",
			})

			// Hinzufügen des Image-Overlays
			const imageUrl = "Woods.svg"

			const overlay = L.imageOverlay(imageUrl, getBounds(svgBounds))
			overlay.addTo(map)

			// Add labels

			// Hinzufügen der Labels
			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]])
				//return [[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)
				}
				//addLayer(labelsGroup, 'place-names', 'Landmarks');
				labelsGroup.addTo(map)
			}

			/*
        labels.forEach(label => {
			const rotation = label.rotation ? label.rotation : 0;
            const marker = L.marker([label.position[1], label.position[0]], {
                icon: L.divIcon({
                    className: 'label',
                    html: `<span style="font-size: ${label.size || 20}px; transform: rotate(${rotation}deg)">${label.text}</span>`,
                    iconSize: [100, 20],
                }),
            });
            marker.addTo(map);
        });
		*/
		</script>
		<style>
			.label {
				text-align: center;
			}
		</style>
	</body>
</html>