maps add in maps

front/src/components/Leaflet.astro

@@ -0,0 +1,55 @@
+---
+import type { string } from 'astro/zod'
+import type { Marker } from 'leaflet'
+
+export interface Props {
+  latitude: number
+  longitude: number
+  zoom: number
+  /** the DOM ID of a <div> element */
+  container: string
+  /** https://leafletjs.com/reference.html#tilelayer */
+  tileLayer: string
+  /** Most tile servers require attribution. */
+  attribution: string
+  containerstyle?: string
+}
+
+const { latitude, longitude, zoom, container, tileLayer, attribution, containerstyle = "height: 61.8vh", class } = Astro.props
+---
+
+<leaflet-map
+  data-latitude={latitude}
+  data-longitude={longitude}
+  data-zoom={zoom}
+  data-container={container}
+  data-tiles={tileLayer}
+  data-attribution={attribution}
+  data-containerstyle={containerstyle}
+>
+
+<div id={container} style={containerstyle}></div>
+
+<script>
+  import L, { type LatLngTuple } from "leaflet"
+  import "leaflet/dist/leaflet"
+  import "leaflet/dist/leaflet.css"
+  
+
+  class LeafletMap extends HTMLElement {
+    constructor() {
+      super()
+
+      const latlng = [Number(this.dataset.latitude), Number(this.dataset.longitude)] as LatLngTuple
+
+      var map = L.map(this.dataset.container as string).setView(latlng, Number(this.dataset.zoom))
+      L.tileLayer(
+        this.dataset.tiles as string,
+        {attribution: this.dataset.attribution}
+        ).addTo(map)
+      var marker = L.marker([51.5, -0.09]).addTo(map);
+    }
+  }
+
+  window.customElements.define("leaflet-map", LeafletMap);
+</script>

front/src/layouts/Layout.astro

@@ -20,32 +20,3 @@ const { title } = Astro.props;
 		<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>

front/src/pages/maps.astro

@@ -1,17 +1,32 @@
 ---
+import Leaflet from 'components/Leaflet.astro';
 import Layout from 'layouts/Layout.astro';
-import { Marker, Popup } from 'leaflet';
+// import { Marker, Popup } from 'leaflet';
-import { MapContainer } from 'react-leaflet'
+// import type { only } from 'node:test';
+// import { MapContainer, TileLayer } from 'react-leaflet'
 ---
 
 <Layout title="maps test">
 
-    <MapContainer client:load center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+    <!-- <MapContainer client:only="react" center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
-        <Marker client:load lat={51.505} lng={-0.09}>
+      <TileLayer
-            <Popup client:load>
+      client:only="react"
+      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    />
+        <Marker client:only="react" lat={51.505} lng={-0.09}>
+            <Popup client:only="react">
               A pretty CSS3 popup. <br /> Easily customizable.
             </Popup>
           </Marker>
-    </MapContainer>
+    </MapContainer> -->
 
+  <Leaflet
+    latitude={51.505}
+    longitude={-0.09}
+    zoom={13}
+    container="leafletmap"
+    tileLayer="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    attribution="© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors">
+  </Leaflet>
 </Layout>