65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import maplibregl from "maplibre-gl";
|
|
import { Layer, Map, Marker, Source } from "react-map-gl";
|
|
import { MapControlls } from "@components/PageComponents/Map/MapControlls.js";
|
|
import { useAppStore } from "@core/stores/appStore.js";
|
|
import { useDevice } from "@core/providers/useDevice.js";
|
|
import { Hashicon } from "@emeraldpay/hashicon-react";
|
|
import { MapPinIcon } from "@heroicons/react/24/outline";
|
|
|
|
export const MapPage = (): JSX.Element => {
|
|
const { nodes, waypoints } = useDevice();
|
|
const { rasterSources } = useAppStore();
|
|
|
|
return (
|
|
<div className="h-full flex-grow">
|
|
<Map
|
|
mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
|
|
mapLib={maplibregl}
|
|
attributionControl={false}
|
|
renderWorldCopies={false}
|
|
maxPitch={0}
|
|
dragRotate={false}
|
|
touchZoomRotate={false}
|
|
initialViewState={{
|
|
zoom: 10,
|
|
latitude: -38,
|
|
longitude: 145
|
|
}}
|
|
>
|
|
<MapControlls />
|
|
{waypoints.map((wp) => (
|
|
<Marker
|
|
key={wp.id}
|
|
longitude={wp.longitudeI / 1e7}
|
|
latitude={wp.latitudeI / 1e7}
|
|
anchor="bottom"
|
|
>
|
|
<div>
|
|
<MapPinIcon className="h-4" />
|
|
</div>
|
|
</Marker>
|
|
))}
|
|
{rasterSources.map((source, index) => (
|
|
<Source key={index} type="raster" {...source}>
|
|
<Layer type="raster" />
|
|
</Source>
|
|
))}
|
|
{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>
|
|
</div>
|
|
);
|
|
};
|