hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use react-map-gl & plot waypoints

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-08-19 19:47:58 +09:30
parent 1c7ce1ed06
commit db8c8f916b
6 changed files with 141 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Map/index.tsx
+66 -37
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>
);
};