1 files changed, 47 insertions, 0 deletions
diff --git a/client/components/map/_map.jsx b/client/components/map/_map.jsx
new file mode 100644
index 0000000..9f6684c
--- /dev/null
+++ b/client/components/map/_map.jsx
@@ -0,0 +1,47 @@
+import { MapContainer, TileLayer } from 'react-leaflet';
+import '@geoman-io/leaflet-geoman-free';
+import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
+import Geoman from './chat_room_geoman';
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+import { Legend } from './legend';
+
+export const Map = ({ user, zoom }) => {
+  const [loading, setLoading] = useState(true);
+  const [position, setPosition] = useState({});
+  const [positionWatcher, setPositionWatcher] = useState();
+
+  zoom = zoom || 18;
+
+  useEffect(() => {
+    if (user) {
+      setPositionWatcher(
+        navigator.geolocation.getCurrentPosition(
+          (pos) => {
+            const { latitude: lat, longitude: lng } = pos.coords;
+            setPosition({ lat, lng });
+            setLoading(false);
+          },
+          (err) => {
+            toast.error(err.message);
+          },
+        ),
+      );
+    }
+  }, [user]);
+
+  if (!loading) {
+    return (
+      <MapContainer center={position} zoom={zoom} minZoom={15}>
+        <TileLayer
+          url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; OpenStreetMap | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          maxZoom={19}
+        />
+        <Legend />
+        <Geoman joinRoom={console.log} userPos={position} user={user} />
+      </MapContainer>
+    );
+  }
+  return <div>Getting current location...</div>;
+};