110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
import type React from "react";
|
|
|
|
import {
|
|
Heading,
|
|
IconButton,
|
|
LocateIcon,
|
|
majorScale,
|
|
MapMarkerIcon,
|
|
Pane,
|
|
Text,
|
|
} from "evergreen-ui";
|
|
import maplibregl from "maplibre-gl";
|
|
import { Map, Marker, useMap } from "react-map-gl";
|
|
|
|
import { useDevice } from "@core/providers/useDevice.js";
|
|
import { Hashicon } from "@emeraldpay/hashicon-react";
|
|
|
|
export const MapPage = (): JSX.Element => {
|
|
const { nodes, waypoints } = useDevice();
|
|
const { current: map } = useMap();
|
|
|
|
return (
|
|
<Pane
|
|
margin={majorScale(3)}
|
|
borderRadius={majorScale(1)}
|
|
elevation={1}
|
|
display="flex"
|
|
flexGrow={1}
|
|
flexDirection="column"
|
|
gap={majorScale(2)}
|
|
overflow="hidden"
|
|
position="relative"
|
|
>
|
|
<Pane
|
|
position="absolute"
|
|
zIndex={10}
|
|
right={0}
|
|
top={0}
|
|
borderRadius={majorScale(1)}
|
|
padding={majorScale(1)}
|
|
margin={majorScale(1)}
|
|
background="tint1"
|
|
width={majorScale(28)}
|
|
elevation={1}
|
|
overflow="hidden"
|
|
>
|
|
<Pane padding={majorScale(1)} background="tint2">
|
|
<Heading>Title</Heading>
|
|
</Pane>
|
|
<Pane display="flex" flexDirection="column" gap={majorScale(1)}>
|
|
{nodes.map((n) => (
|
|
<Pane key={n.data.num} display="flex" gap={majorScale(1)}>
|
|
<Hashicon value={n.data.num.toString()} size={24} />
|
|
<Text>{n.data.user?.longName}</Text>
|
|
<IconButton
|
|
icon={LocateIcon}
|
|
marginLeft="auto"
|
|
size="small"
|
|
onClick={() => {
|
|
if (n.data.position?.latitudeI) {
|
|
map?.flyTo({
|
|
center: [
|
|
n.data.position.longitudeI / 1e7,
|
|
n.data.position.latitudeI / 1e7,
|
|
],
|
|
zoom: 10,
|
|
});
|
|
}
|
|
}}
|
|
/>
|
|
</Pane>
|
|
))}
|
|
</Pane>
|
|
</Pane>
|
|
<Map
|
|
mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
|
|
mapLib={maplibregl}
|
|
attributionControl={false}
|
|
>
|
|
{waypoints.map((wp) => (
|
|
<Marker
|
|
key={wp.id}
|
|
longitude={wp.longitudeI / 1e7}
|
|
latitude={wp.latitudeI / 1e7}
|
|
anchor="bottom"
|
|
>
|
|
<Pane>
|
|
<MapMarkerIcon />
|
|
</Pane>
|
|
</Marker>
|
|
))}
|
|
{nodes.map((n) => {
|
|
if (n.data.position?.latitudeI) {
|
|
return (
|
|
<Marker
|
|
key={n.data.num}
|
|
longitude={n.data.position.longitudeI / 1e7}
|
|
latitude={n.data.position.latitudeI / 1e7}
|
|
anchor="bottom"
|
|
>
|
|
<Hashicon value={n.data.num.toString()} size={32} />
|
|
</Marker>
|
|
);
|
|
}
|
|
})}
|
|
</Map>
|
|
</Pane>
|
|
);
|
|
};
|