use react-map-gl & plot waypoints

src/App.tsx

@@ -1,6 +1,7 @@
 import type React from "react";
 
 import { Pane } from "evergreen-ui";
+import { MapProvider } from "react-map-gl";
 
 import { AppLayout } from "@components/layout/AppLayout.js";
 
@@ -10,7 +11,9 @@ export const App = (): JSX.Element => {
   return (
     <Pane display="flex">
       <AppLayout>
-        <PageRouter />
+        <MapProvider>
+          <PageRouter />
+        </MapProvider>
       </AppLayout>
     </Pane>
   );

src/core/stores/deviceStore.ts

@@ -44,10 +44,10 @@ export interface Device {
   activePage: Page;
   peerInfoOpen: boolean;
   activePeer: number;
+  waypoints: Protobuf.Location[];
 
   setReady(ready: boolean): void;
   setStatus: (status: Types.DeviceStatusEnum) => void;
-  addChannel: (channel: Channel) => void;
   setConfig: (config: Protobuf.Config) => void;
   setModuleConfig: (config: Protobuf.ModuleConfig) => void;
   setHardware: (hardware: Protobuf.MyNodeInfo) => void;
@@ -55,6 +55,8 @@ export interface Device {
   setActivePage: (page: Page) => void;
   setPeerInfoOpen: (open: boolean) => void;
   setActivePeer: (peer: number) => void;
+  addChannel: (channel: Channel) => void;
+  addWaypoint: (waypoint: Protobuf.Location) => void;
   addNodeInfo: (nodeInfo: Types.NodeInfoPacket) => void;
   addUser: (user: Types.UserPacket) => void;
   addPosition: (position: Types.PositionPacket) => void;
@@ -92,6 +94,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           activePage: "messages",
           peerInfoOpen: false,
           activePeer: 0,
+          waypoints: [],
 
           setReady: (ready: boolean) => {
             set(
@@ -113,25 +116,6 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
               })
             );
           },
-          addChannel: (channel: Channel) => {
-            set(
-              produce<DeviceState>((draft) => {
-                const device = draft.devices.get(id);
-                if (device) {
-                  const channelIndex = device.channels.findIndex(
-                    (c) => c.config.index === channel.config.index
-                  );
-                  if (channelIndex !== -1) {
-                    const messages = device.channels[channelIndex].messages;
-                    device.channels[channelIndex] = channel;
-                    device.channels[channelIndex].messages = messages;
-                  } else {
-                    device.channels.push(channel);
-                  }
-                }
-              })
-            );
-          },
           setConfig: (config: Protobuf.Config) => {
             set(
               produce<DeviceState>((draft) => {
@@ -257,6 +241,43 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
               })
             );
           },
+          addChannel: (channel: Channel) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (device) {
+                  const channelIndex = device.channels.findIndex(
+                    (c) => c.config.index === channel.config.index
+                  );
+                  if (channelIndex !== -1) {
+                    const messages = device.channels[channelIndex].messages;
+                    device.channels[channelIndex] = channel;
+                    device.channels[channelIndex].messages = messages;
+                  } else {
+                    device.channels.push(channel);
+                  }
+                }
+              })
+            );
+          },
+          addWaypoint: (waypoint: Protobuf.Location) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (device) {
+                  const waypointIndex = device.waypoints.findIndex(
+                    (wp) => wp.id === waypoint.id
+                  );
+
+                  if (waypointIndex !== -1) {
+                    device.waypoints[waypointIndex] = waypoint;
+                  } else {
+                    device.waypoints.push(waypoint);
+                  }
+                }
+              })
+            );
+          },
           addNodeInfo: (nodeInfo) => {
             set(
               produce<DeviceState>((draft) => {

src/core/subscriptions.ts

@@ -71,5 +71,8 @@ export const subscribeAll = (device: Device, connection: IConnection) => {
         ? new Date(messagePacket.packet.rxTime * 1000)
         : new Date(),
     });
+    if (messagePacket.location) {
+      device.addWaypoint(messagePacket.location);
+    }
   });
 };

src/pages/Map/index.tsx

@@ -1,49 +1,44 @@
 import type React from "react";
-import { useEffect, useMemo, useRef } from "react";
+import { useRef } from "react";
 
-import { majorScale, Pane } from "evergreen-ui";
-import { Marker } from "maplibre-gl";
+import { majorScale, MapMarkerIcon, Pane } from "evergreen-ui";
+import maplibregl from "maplibre-gl";
+import Map, { Marker } from "react-map-gl";
 
-import { useCreateMapbox } from "@app/core/providers/useCreateMapbox.js";
 import { useDevice } from "@core/providers/useDevice.js";
+import { Hashicon } from "@emeraldpay/hashicon-react";
 
 export const MapPage = (): JSX.Element => {
-  const { nodes } = useDevice();
+  const { nodes, waypoints } = useDevice();
 
-  const nodeMarkers = useMemo(() => new Map<number, Marker>(), []);
+  // const nodeMarkers = useMemo(() => new Map<number, Marker>(), []);
 
   const ref = useRef<HTMLDivElement>(null);
 
-  const map = useCreateMapbox({
-    ref,
-    style:
-      "https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json",
-  });
-
-  useEffect(() => {
-    nodes.map((n) => {
-      if (n.data.position?.longitudeI && n.data.position?.latitudeI && map) {
-        if (nodeMarkers.has(n.data.num)) {
-          nodeMarkers
-            .get(n.data.num)
-            ?.setLngLat([
-              n.data.position?.longitudeI / 1e7,
-              n.data.position?.latitudeI / 1e7,
-            ]);
-        } else {
-          nodeMarkers.set(
-            n.data.num,
-            new Marker()
-              .setLngLat([
-                n.data.position?.longitudeI / 1e7,
-                n.data.position?.latitudeI / 1e7,
-              ])
-              .addTo(map)
-          );
-        }
-      }
-    });
-  }, [map, nodeMarkers, nodes]);
+  // useEffect(() => {
+  //   nodes.map((n) => {
+  //     if (n.data.position?.longitudeI && n.data.position?.latitudeI && map) {
+  //       if (nodeMarkers.has(n.data.num)) {
+  //         nodeMarkers
+  //           .get(n.data.num)
+  //           ?.setLngLat([
+  //             n.data.position?.longitudeI / 1e7,
+  //             n.data.position?.latitudeI / 1e7,
+  //           ]);
+  //       } else {
+  //         nodeMarkers.set(
+  //           n.data.num,
+  //           new Marker()
+  //             .setLngLat([
+  //               n.data.position?.longitudeI / 1e7,
+  //               n.data.position?.latitudeI / 1e7,
+  //             ])
+  //             .addTo(map)
+  //         );
+  //       }
+  //     }
+  //   });
+  // }, [map, nodeMarkers, nodes]);
 
   return (
     <Pane
@@ -57,7 +52,41 @@ export const MapPage = (): JSX.Element => {
       gap={majorScale(2)}
       overflow="hidden"
     >
-      <Pane width="100%" height="100%" ref={ref} />
+      <Map
+        mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
+        mapLib={maplibregl}
+      >
+        {waypoints.map((wp) => (
+          <Marker
+            key={wp.id}
+            longitude={wp.longitudeI / 1e7}
+            latitude={wp.latitudeI / 1e7}
+            anchor="bottom"
+          >
+            <Pane>
+              <MapMarkerIcon />
+            </Pane>
+          </Marker>
+        ))}
+        {nodes
+          .filter((n) => n.data.position?.latitudeI)
+          .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"
+                >
+                  <Pane>
+                    <Hashicon value={n.data.num.toString()} size={32} />
+                  </Pane>
+                </Marker>
+              );
+            }
+          })}
+      </Map>
     </Pane>
   );
 };