-
Notifications
You must be signed in to change notification settings - Fork 6
/
Map.tsx
63 lines (59 loc) · 1.61 KB
/
Map.tsx
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import {
MapContainer,
TileLayer,
Marker,
Popup,
CircleMarker,
Polyline,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import "leaflet-defaulticon-compatibility";
import styles from "../../styles/Map.module.scss";
const Map = ({
coords,
lastPosition,
markers,
latestTimestamp,
sosCoords,
}: {
coords: number[][];
lastPosition: [number, number];
markers: [number, number][];
latestTimestamp: string;
sosCoords?: number[][];
}) => {
const geoJsonObj: any = coords;
const sosGeoJsonObj: any = sosCoords;
const mapMarkers = markers.map((latLng, i) => (
<CircleMarker key={i} center={latLng} fillColor="navy" />
));
return (
<>
<h2>Asset Tracker Map</h2>
<MapContainer
center={lastPosition}
zoom={14}
className={styles.container}
>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.MAPBOX_ACCESS_TOKEN}`}
/>
<Marker position={lastPosition} draggable={true}>
<Popup>
Last recorded position:
<br />
{lastPosition[0].toFixed(6)}°,
{lastPosition[1].toFixed(6)}°
<br />
{latestTimestamp}
</Popup>
<Polyline pathOptions={{ color: "blue" }} positions={geoJsonObj} />
<Polyline pathOptions={{ color: "red" }} positions={sosGeoJsonObj} />
{mapMarkers}
</Marker>
</MapContainer>
</>
);
};
export default Map;