front/src/pages/maps.astro

@@ -1,17 +1,26 @@
 ---
 import Layout from 'layouts/Layout.astro';
-import { Marker, Popup } from 'leaflet';
+import 'leaflet/dist/leaflet.css'
-import { MapContainer } from 'react-leaflet'
 ---
 
 <Layout title="maps test">
 
-    <MapContainer client:load center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+  <div class="w-52 h-52" id="map" />
-        <Marker client:load lat={51.505} lng={-0.09}>
+
-            <Popup client:load>
-              A pretty CSS3 popup. <br /> Easily customizable.
-            </Popup>
-          </Marker>
-    </MapContainer>
 
 </Layout>
+
+<script>
+  import L from 'leaflet'
+
+  const map = L.map('map', {
+    center: [50,0],
+    zoom: 13,
+    preferCanvas: true
+  })
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+var marker = L.marker([51.5, -0.09]).addTo(map);
+</script>