52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import type {
|
|
ScaleControlProps,
|
|
GeolocateControlProps,
|
|
FullscreenControlProps,
|
|
NavigationControlProps,
|
|
} from 'react-map-gl/mapbox';
|
|
|
|
import {
|
|
ScaleControl,
|
|
GeolocateControl,
|
|
NavigationControl,
|
|
FullscreenControl,
|
|
} from 'react-map-gl/mapbox';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export type MapControlsProps = {
|
|
hideScale?: boolean;
|
|
hideGeolocate?: boolean;
|
|
hideFullscreen?: boolean;
|
|
hideNavigation?: boolean;
|
|
slotProps?: {
|
|
scale?: ScaleControlProps;
|
|
geolocate?: GeolocateControlProps;
|
|
fullscreen?: FullscreenControlProps;
|
|
navigation?: NavigationControlProps;
|
|
};
|
|
};
|
|
|
|
export function MapControls({
|
|
hideScale,
|
|
hideGeolocate,
|
|
hideFullscreen,
|
|
hideNavigation,
|
|
slotProps,
|
|
}: MapControlsProps) {
|
|
return (
|
|
<>
|
|
{!hideGeolocate && (
|
|
<GeolocateControl
|
|
position="top-left"
|
|
{...slotProps?.geolocate}
|
|
positionOptions={{ enableHighAccuracy: true, ...slotProps?.geolocate?.positionOptions }}
|
|
/>
|
|
)}
|
|
{!hideFullscreen && <FullscreenControl position="top-left" {...slotProps?.fullscreen} />}
|
|
{!hideScale && <ScaleControl position="bottom-left" {...slotProps?.scale} />}
|
|
{!hideNavigation && <NavigationControl position="bottom-left" {...slotProps?.navigation} />}
|
|
</>
|
|
);
|
|
}
|