tanapa env

src/app_modules/admin/map/ui/index.ts

@@ -0,0 +1,3 @@
+import { UiAdminMap_MapBoxView } from "./ui_map_view";
+
+export { UiAdminMap_MapBoxView };

src/app_modules/admin/map/ui/ui_map_view.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { MODEL_MAP } from "@/app_modules/map/lib/interface";
+import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
+import { useState } from "react";
+import {
+  defaultLatLong,
+  defaultMapZoom,
+} from "@/app_modules/map/lib/default_lat_long";
+import { Image, Paper, Stack, Text } from "@mantine/core";
+import "mapbox-gl/dist/mapbox-gl.css";
+import Map, {
+  AttributionControl,
+  Marker,
+  NavigationControl,
+  ScaleControl,
+} from "react-map-gl";
+import { ComponentAdminMap_Drawer } from "../component";
+
+export function UiAdminMap_MapBoxView({
+  mapboxToken,
+  dataMap,
+}: {
+  mapboxToken: string;
+  dataMap: MODEL_MAP[];
+}) {
+  const [mapId, setMapId] = useState("");
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState(dataMap);
+
+  if (!mapboxToken)
+    return <ComponentAdminGlobal_IsEmptyData text="Mapbox token not found" />;
+
+  return (
+    <>
+      <Stack
+        style={{
+          marginTop: "10px",
+          borderRadius: "5px",
+          backgroundColor: "gray",
+        }}
+      >
+        <Map
+          mapboxAccessToken={mapboxToken}
+          mapStyle={"mapbox://styles/mapbox/streets-v11"}
+          initialViewState={{
+            latitude: defaultLatLong[0],
+            longitude: defaultLatLong[1],
+            zoom: defaultMapZoom,
+          }}
+          style={{
+            cursor: "pointer",
+            width: "auto",
+            height: "82vh",
+            borderRadius: "5px",
+          }}
+          attributionControl={false}
+        >
+          {data.map((e, i) => (
+            <Stack key={i}>
+              <Marker
+                style={{
+                  width: 40,
+                  cursor: "pointer",
+                }}
+                latitude={e.latitude}
+                longitude={e.longitude}
+                anchor="bottom"
+                offset={[0, 0]}
+                scale={1}
+              >
+                <Stack
+                  spacing={0}
+                  align="center"
+                  onClick={() => {
+                    setMapId(e.id);
+                    setOpenDrawer(true);
+                  }}
+                >
+                  <Image
+                    w={"100%"}
+                    alt="image"
+                    src="https://cdn-icons-png.flaticon.com/512/5860/5860579.png"
+                  />
+                  <Text
+                    fz={"xs"}
+                    bg={"dark"}
+                    c={"white"}
+                    align="center"
+                    style={{
+                      borderRadius: "5px",
+                      padding: "5px",
+                      width: 50,
+                    }}
+                    lineClamp={2}
+                  >
+                    {e.namePin}
+                  </Text>
+                </Stack>
+              </Marker>
+            </Stack>
+          ))}
+
+          <NavigationControl />
+          <ScaleControl position="top-left" />
+          <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
+        </Map>
+      </Stack>
+
+      <ComponentAdminMap_Drawer
+      opened={openDrawer}
+      onClose={() => setOpenDrawer(false)}
+      data={mapId as any}
+      />
+    </>
+  );
+}