client/components/map/_map.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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>;
};