Spaces:
Running
Running
File size: 3,017 Bytes
394073d 18dfe1b 394073d 18dfe1b 394073d 18dfe1b 394073d 18dfe1b 394073d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import { useRef, useState, useEffect } from 'react'
import { useConfig } from '../../hooks/useConfig'
import { useMap } from '../../hooks/useMap'
import { useAnalysisLayers } from '../../hooks/useAnalysisLayers'
import MapLegend from '../MapLegend/MapLegend'
import LayerOpacitySlider from '../LayerOpacitySlider/LayerOpacitySlider'
import { IconPlus, IconMinus, IconMapPin } from '@tabler/icons-react'
import { Tooltip } from '@mantine/core'
import styles from './MapView.module.css';
function MapView({
selectedLocation,
onLocationSelect,
analysisResult,
layersConfig
}) {
const mapContainerRef = useRef(null);
const { mapboxAccessToken } = useConfig();
const [localOpacity, setLocalOpacity] = useState(0.5);
const { mapInstance, isMapLoaded, handleZoomIn, handleZoomOut, handleFlyBackToAnalysis } = useMap(
mapContainerRef,
mapboxAccessToken,
selectedLocation,
analysisResult
);
useAnalysisLayers(
mapInstance,
isMapLoaded,
analysisResult,
layersConfig,
localOpacity,
);
useEffect(() => {
if (!isMapLoaded || !mapInstance) return;
const handleMapClick = (e) => {
const { lng, lat } = e.lngLat;
onLocationSelect({ lat, lng, isSearch: false });
};
mapInstance.on('click', handleMapClick);
return () => mapInstance.off('click', handleMapClick);
}, [isMapLoaded, mapInstance, onLocationSelect]);
return (
<div className={styles.mapWrapper}>
<div className={styles.mapContainer} ref={mapContainerRef} />
{analysisResult && (
<>
<MapLegend analysisResult={analysisResult} />
<LayerOpacitySlider
opacity={localOpacity}
onChange={setLocalOpacity}
/>
</>
)}
<div className={styles.mapActionsPanel}>
<Tooltip label="Zoom In" position="left" withArrow offset={15} openDelay={500} closeDelay={200} classNames={{ tooltip: styles.customTooltip }}>
<button onClick={handleZoomIn} className={styles.mapActionButton}>
<IconPlus size={20} stroke={1.5} />
</button>
</Tooltip>
<div className={styles.actionDivider} />
<Tooltip label="Zoom Out" position="left" withArrow offset={15} openDelay={500} closeDelay={200} classNames={{ tooltip: styles.customTooltip }}>
<button onClick={handleZoomOut} className={styles.mapActionButton}>
<IconMinus size={20} stroke={1.5} />
</button>
</Tooltip>
<div className={styles.actionDivider} />
<Tooltip label="Fly Back to Analysis" position="left" withArrow offset={15} openDelay={500} closeDelay={200} classNames={{ tooltip: styles.customTooltip }}>
<button onClick={handleFlyBackToAnalysis} className={styles.mapActionButton}>
<IconMapPin size={20} stroke={1.5} />
</button>
</Tooltip>
</div>
</div>
);
}
export default MapView;
|