mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

use react-map-gl & plot waypoints

pull/39/head
Sacha Weatherstone 4 years ago
parent
1c7ce1ed06
commit
db8c8f916b
6 changed files with 141 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 25
      pnpm-lock.yaml
  3. 5
      src/App.tsx
  4. 61
      src/core/stores/deviceStore.ts
  5. 3
      src/core/subscriptions.ts
  6. 103
      src/pages/Map/index.tsx

2
package.json
View File

@ -30,6 +30,7 @@
"evergreen-ui": "^6.10.3",
"geodesy": "^2.4.0",
"immer": "^9.0.15",
"mapbox-gl": "npm:[email protected]",
"maplibre-gl": "^2.3.0",
"modern-css-reset": "^1.4.0",
"prettier": "^2.7.1",
@ -38,6 +39,7 @@
"react-hook-form": "^7.34.2",
"react-icons": "^4.4.0",
"react-json-pretty": "^2.2.0",
"react-map-gl": "^7.0.19",
"react-qrcode-logo": "^2.8.0",
"rfc4648": "^1.5.2",
"zustand": "4.1.0"

25
pnpm-lock.yaml
View File

@ -20,6 +20,7 @@ specifiers:
geodesy: ^2.4.0
gzipper: ^7.1.0
immer: ^9.0.15
mapbox-gl: npm:[email protected]
maplibre-gl: ^2.3.0
modern-css-reset: ^1.4.0
prettier: ^2.7.1
@ -28,6 +29,7 @@ specifiers:
react-hook-form: ^7.34.2
react-icons: ^4.4.0
react-json-pretty: ^2.2.0
react-map-gl: ^7.0.19
react-qrcode-logo: ^2.8.0
rfc4648: ^1.5.2
rollup-plugin-visualizer: ^5.7.1
@ -49,6 +51,7 @@ dependencies:
evergreen-ui: 6.10.3_biqbaboplfbrettd7655fr4n2y
geodesy: 2.4.0
immer: 9.0.15
mapbox-gl: /empty-npm-package/1.0.0
maplibre-gl: 2.3.0
modern-css-reset: 1.4.0
prettier: 2.7.1
@ -57,6 +60,7 @@ dependencies:
react-hook-form: 7.34[email protected]
react-icons: 4.4[email protected]
react-json-pretty: 2.2.0_biqbaboplfbrettd7655fr4n2y
react-map-gl: 7.0.19_6eczaga5xxiwzxtfiyk6fioasq
react-qrcode-logo: 2.8.0_biqbaboplfbrettd7655fr4n2y
rfc4648: 1.5.2
zustand: 4.1[email protected][email protected]
@ -739,6 +743,12 @@ packages:
resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
dev: false
/@types/mapbox-gl/2.7.5:
resolution: {integrity: sha512-T8gACm3oGKMlBo2l/9vnKEAxgCc0g2mr8g6dI1d3ZO6EzRe7JALBONlWRmc7SOHV79kiarkcdLdDVEnfd+jilA==}
dependencies:
'@types/geojson': 7946.0.10
dev: false
/@types/mapbox__point-geometry/0.1.2:
resolution: {integrity: sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==}
dev: false
@ -1342,6 +1352,10 @@ packages:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
dev: true
/empty-npm-package/1.0.0:
resolution: {integrity: sha512-q4Mq/+XO7UNDdMiPpR/LIBIW1Zl4V0Z6UT9aKGqIAnBCtCb3lvZJM1KbDbdzdC8fKflwflModfjR29Nt0EpcwA==}
dev: false
/encoding/0.1.13:
resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==}
dependencies:
@ -2982,6 +2996,17 @@ packages:
react-dom: 18.2[email protected]
dev: false
/react-map-gl/7.0.19_6eczaga5xxiwzxtfiyk6fioasq:
resolution: {integrity: sha512-s3E8aU6BursSDVwzQZbzdDzDRUX4kdfRqZODYvkdDbInr3RzaNdlbhJ5tojXKWOonsxV6wt+Acv9JCaOMKaf0A==}
peerDependencies:
mapbox-gl: '*'
react: '>=16.3.0'
dependencies:
'@types/mapbox-gl': 2.7.5
mapbox-gl: /empty-npm-package/1.0.0
react: 18.2.0
dev: false
/react-qrcode-logo/2.8.0_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-dbEgjsg6C4tK6+oGmCRDlJ7urQAWqybaGBLJtp8Z6ZYvVUP302HBXk/F7VRk54yWTwzlHwig3VK6HMKCha2YFw==}
peerDependencies:

5
src/App.tsx
View File

@ -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>
);

61
src/core/stores/deviceStore.ts
View File

@ -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) => {

3
src/core/subscriptions.ts
View File

@ -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);
}
});
};

103
src/pages/Map/index.tsx
View File

@ -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>
);
};

Write Preview
Loading…
Cancel
Save