add map controlls

2022-12-10 14:00:45 +10:00
parent 8fc705956b
commit 653a15da20
2 changed files with 44 additions and 58 deletions
@@ -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>
+  );
+};