add map controlls

src/components/PageComponents/Map/MapControlls.tsx

@@ -0,0 +1,40 @@
+import { FiCrosshair } from "react-icons/fi";
+import { useMap } from "react-map-gl";
+
+import {
+  MagnifyingGlassMinusIcon,
+  MagnifyingGlassPlusIcon
+} from "@heroicons/react/24/outline";
+
+export const MapControlls = (): JSX.Element => {
+  const { current: map } = useMap();
+
+  return (
+    <div className="absolute right-0 top-0 z-10 m-2">
+      <div className="divide-y overflow-hidden rounded-md bg-white">
+        <div
+          className="cursor-pointer p-3 hover:bg-orange-300"
+          onClick={() => {
+            map?.zoomIn();
+          }}
+        >
+          <MagnifyingGlassPlusIcon className="h-4 w-4" />
+        </div>
+        <div
+          className="cursor-pointer p-3 hover:bg-orange-300"
+          onClick={() => {
+            map?.zoomOut();
+          }}
+        >
+          <MagnifyingGlassMinusIcon className="h-4 w-4" />
+        </div>
+        <div
+          className="cursor-pointer p-3 hover:bg-orange-300"
+          onClick={() => {}}
+        >
+          <FiCrosshair className="h-4 w-4" />
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/Map.tsx

@@ -1,75 +1,20 @@
 import type React from "react";
 
 import maplibregl from "maplibre-gl";
-import { Layer, Map, Marker, Source, useMap } from "react-map-gl";
-import { base16 } from "rfc4648";
+import { Layer, Map, Marker, Source } from "react-map-gl";
 
-import { Card } from "@app/components/Card.js";
-import { IconButton } from "@app/components/IconButton.js";
-import { Mono } from "@app/components/Mono.js";
+import { MapControlls } from "@app/components/PageComponents/Map/MapControlls.js";
 import { useAppStore } from "@app/core/stores/appStore.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import {
-  EllipsisHorizontalCircleIcon,
-  MapPinIcon
-} from "@heroicons/react/24/outline";
+import { MapPinIcon } from "@heroicons/react/24/outline";
 
 export const MapPage = (): JSX.Element => {
   const { nodes, waypoints } = useDevice();
   const { rasterSources } = useAppStore();
-  const { current: map } = useMap();
 
   return (
     <div className="h-full flex-grow">
-      <div className="absolute right-0 top-0 z-10 m-2">
-        <Card className="flex-col p-3">
-          <div className="p-1 text-lg font-medium">Title</div>
-          <div className="flex flex-col gap-2">
-            {nodes.map((n) => (
-              <div
-                className="flex gap-2 rounded-md p-2 hover:bg-slate-100"
-                key={n.data.num}
-              >
-                <span className="my-auto shrink-0">
-                  <Hashicon value={n.data.num.toString()} size={28} />
-                </span>
-                <div className="flex flex-col">
-                  <span className="font-medium">{n.data.user?.longName}</span>
-                  <Mono>
-                    {base16
-                      .stringify(n.data.user?.macaddr ?? [])
-                      .match(/.{1,2}/g)
-                      ?.join(":") ?? ""}
-                  </Mono>
-                </div>
-                <div className="my-auto ml-auto">
-                  <IconButton
-                    variant="secondary"
-                    size="sm"
-                    icon={<EllipsisHorizontalCircleIcon className="h-4" />}
-                    onClick={() => {
-                      if (n.data.position?.latitudeI) {
-                        map?.flyTo({
-                          center: [
-                            n.data.position.longitudeI / 1e7,
-                            n.data.position.latitudeI / 1e7
-                          ],
-                          zoom: 10
-                        });
-                      }
-                    }}
-                  />
-                </div>
-              </div>
-            ))}
-          </div>
-          {/*  */}
-          {rasterSources.map((source, index) => (
-            <div key={index}>{source.title}Tst</div>
-          ))}
-        </Card>
-      </div>
       <Map
         mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
         mapLib={maplibregl}
@@ -79,6 +24,7 @@ export const MapPage = (): JSX.Element => {
         dragRotate={false}
         touchZoomRotate={false}
       >
+        <MapControlls />
         {waypoints.map((wp) => (
           <Marker
             key={wp.id}