feat: Plus und Minus Icons
This commit is contained in:
@@ -15,6 +15,8 @@ import InfoIcon from "@/components/icons/material-symbols/InfoIcon";
|
||||
import AlarmIcon from "@/components/icons/material-symbols/AlarmIcon";
|
||||
import MapMarkerIcon from "@/components/icons/material-symbols/MapMarkerIcon";
|
||||
import ExpandIcon from "@/components/icons/material-symbols/ExpandIcon";
|
||||
import PlusIcon from "@/components/icons/material-symbols/PlusIcon";
|
||||
import MinusIcon from "@/components/icons/material-symbols/MinusIcon";
|
||||
import PoiUpdateModal from "@/components/pois/poiUpdateModal/PoiUpdateModal.js";
|
||||
import { ToastContainer, toast } from "react-toastify";
|
||||
import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
|
||||
@@ -1266,6 +1268,27 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{/* Custom Zoom Controls bottom-right, styled in littwin-blue to match app icons */}
|
||||
<div className="absolute bottom-8 right-3 z-50 flex flex-col gap-1">
|
||||
<button
|
||||
data-testid="zoom-in"
|
||||
onClick={() => map?.zoomIn?.()}
|
||||
aria-label="Zoom in"
|
||||
className="rounded-md bg-white/90 hover:bg-white shadow-sm p-1"
|
||||
title="Zoom in"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5 text-littwin-blue" />
|
||||
</button>
|
||||
<button
|
||||
data-testid="zoom-out"
|
||||
onClick={() => map?.zoomOut?.()}
|
||||
aria-label="Zoom out"
|
||||
className="rounded-md bg-white/90 hover:bg-white shadow-sm p-1"
|
||||
title="Zoom out"
|
||||
>
|
||||
<MinusIcon className="h-5 w-5 text-littwin-blue" />
|
||||
</button>
|
||||
</div>
|
||||
{/* Marker/AreaDropdown Panel außerhalb der Button-Leiste platzieren, damit die Position mit den anderen Panels identisch ist */}
|
||||
{overlay === "area" && <AreaDropdown onClose={() => setOverlay(null)} />}
|
||||
{/* BaseMapPanel entfernt */}
|
||||
|
||||
Reference in New Issue
Block a user