feat: MAP WORKING

front/package.json

@@ -19,13 +19,11 @@
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "astro": "4.5.12",
-    "cross-fetch": "^4.0.0",
     "leaflet": "^1.9.4",
     "lucide-astro": "^0.372.0",
     "pocketbase": "^0.21.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-leaflet": "^4.2.1",
     "simple-icons-astro": "^11.12.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5"

front/src/pages/maps.astro

@@ -1,17 +1,26 @@
 ---
 import Layout from 'layouts/Layout.astro';
-import { Marker, Popup } from 'leaflet';
-import { MapContainer } from 'react-leaflet'
+import 'leaflet/dist/leaflet.css'
 ---
 
 <Layout title="maps test">
 
-    <MapContainer client:load center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
-        <Marker client:load lat={51.505} lng={-0.09}>
-            <Popup client:load>
-              A pretty CSS3 popup. <br /> Easily customizable.
-            </Popup>
-          </Marker>
-    </MapContainer>
+  <div class="w-52 h-52" id="map" />
+
 
 </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>