Added base setup for Alliance's map

2023-10-01 21:43:37 +02:00
parent 8d00d75886
commit 54deafba8c
14 changed files with 7098 additions and 54 deletions
--- a/src/components/maps/AllianceKaldelienne.astro
+++ b/src/components/maps/AllianceKaldelienne.astro
@@ -0,0 +1,45 @@
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+<script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+
+<div id="map"></div>
+
+<script lang="ts">
+const map = L.map('map', {
+    crs: L.CRS.Simple,
+    zoom: -.75,
+    minZoom: -.75,
+    maxZoom: 4,
+    zoomSnap: 0,
+    bounceAtZoomLimits: false,
+    maxBoundsViscosity: .8
+});
+
+const bounds = [
+    [0, 0],
+    [1551, 1605]
+];
+L.imageOverlay('/maps/alliance-kaldelienne.svg', bounds).addTo(map);
+
+const marker = L.marker([75, 50]).addTo(map);
+marker.bindPopup("<b>Hello world!</b><br>I am a popup. SVG coordinates: x: 378; y:303.5").openPopup();
+
+map.fitBounds(bounds);
+map.setMaxBounds(map.getBounds());
+</script>
+    
+<style>
+html,
+body {
+    height: 100vh;
+    margin: 0;
+}
+
+.leaflet-container {
+    margin: auto;
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    aspect-ratio: 1551/1605;
+    background: #98bcd0;
+}
+</style>
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,51 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	:root {
+		--accent: 136, 58, 234;
+		--accent-light: 224, 204, 250;
+		--accent-dark: 49, 10, 101;
+		--accent-gradient: linear-gradient(
+			45deg,
+			rgb(var(--accent)),
+			rgb(var(--accent-light)) 30%,
+			white 60%
+		);
+	}
+	html {
+		font-family: system-ui, sans-serif;
+		background: #13151a;
+		background-size: 224px;
+	}
+	code {
+		font-family:
+			Menlo,
+			Monaco,
+			Lucida Console,
+			Liberation Mono,
+			DejaVu Sans Mono,
+			Bitstream Vera Sans Mono,
+			Courier New,
+			monospace;
+	}
+</style>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,8 @@
+---
+import Layout from '../layouts/Layout.astro';
+import AllianceKaldelienne from '../components/maps/AllianceKaldelienne.astro'
+---
+
+<Layout title="Welcome to Astro.">
+    <AllianceKaldelienne />
+</Layout>