98 lines
3.3 KiB
TypeScript
Executable File
98 lines
3.3 KiB
TypeScript
Executable File
import { Button } from "@/shared/components/ui/button";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/shared/components/ui/popover";
|
|
import { useAtom } from "jotai";
|
|
import { Map } from "lucide-react";
|
|
import { mapTypeAtom } from "../state/map-type";
|
|
import { basemapConfig } from "../config/basemap-config";
|
|
import { activeBasemapAtom, BasemapType } from "../state/active-basemap";
|
|
import { useState } from "react";
|
|
import { featureFlags } from "@/shared/config/feature-flag";
|
|
|
|
const MapSettings = () => {
|
|
const [mapType, setMapType] = useAtom(mapTypeAtom);
|
|
const [activeBasemap, setActiveBasemap] = useAtom(activeBasemapAtom);
|
|
const [activeBasemapName, setActiveBasemapName] = useState(
|
|
basemapConfig[activeBasemap].name
|
|
);
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant={"default"}>
|
|
<Map />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
className="z-[403] p-2 mr-4 text-sm"
|
|
side="left"
|
|
align="start"
|
|
>
|
|
<div className="grid gap-2">
|
|
{featureFlags.advancedMaps.isActive && (
|
|
<div className="space-y-2">
|
|
<h4 className="font-medium leading-none">Map View</h4>
|
|
<p className="text-muted-foreground grid grid-cols-2 gap-2">
|
|
<Button
|
|
className="text-xs rounded"
|
|
size={"sm"}
|
|
variant={mapType === "leaflet" ? "default" : "secondary"}
|
|
onClick={() => setMapType("leaflet")}
|
|
>
|
|
2D
|
|
</Button>
|
|
<Button
|
|
className="text-xs rounded"
|
|
size={"sm"}
|
|
variant={mapType === "cesium" ? "default" : "secondary"}
|
|
onClick={() => setMapType("cesium")}
|
|
>
|
|
3D
|
|
</Button>
|
|
</p>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<div>Base Map</div>
|
|
<div className="text-xs">{activeBasemapName}</div>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<div className="grid grid-cols-4 items-center gap-2">
|
|
{Object.entries(basemapConfig).map(
|
|
([key, { thumbnail, name }]) => (
|
|
<button
|
|
key={key}
|
|
onMouseEnter={() => setActiveBasemapName(name)}
|
|
onMouseLeave={() =>
|
|
setActiveBasemapName(basemapConfig[activeBasemap].name)
|
|
}
|
|
onClick={() => {
|
|
setActiveBasemap(key as BasemapType);
|
|
}}
|
|
className={`cursor-pointer w-16 h-16 rounded text-xs break-words bg-gray-300 bg-cover bg-center hover:border border-primary ${
|
|
activeBasemap === key && "border"
|
|
}`}
|
|
style={{
|
|
backgroundImage: `url(${
|
|
thumbnail ? `/${thumbnail}` : ""
|
|
})`,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
}}
|
|
></button>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
export default MapSettings;
|