diff --git a/components/data/dataset.js b/components/data/dataset.js index 4f2ad84..e82acf1 100644 --- a/components/data/dataset.js +++ b/components/data/dataset.js @@ -66,12 +66,10 @@ class Dataset { name: variableName, selectors, centerPoint: level0.centerPoint, - lockZoom: this.pyramid ? false : level0.lockZoom, } this.variableMetadata[variableName] = metadata } - this.lockZoom = metadata.lockZoom this.variable = variableName return { centerPoint: metadata.centerPoint, selectors: metadata.selectors } diff --git a/components/data/level.js b/components/data/level.js index 53b28cc..1b42266 100644 --- a/components/data/level.js +++ b/components/data/level.js @@ -29,7 +29,6 @@ class Level { const { centerPoint, axes, - lockZoom, nullValue, northPole, chunk_separator, @@ -42,7 +41,6 @@ class Level { name: variableName, centerPoint, axes, - lockZoom, nullValue, northPole, chunk_separator, diff --git a/components/map-container.js b/components/map-container.js index b536e5d..fa2bcc5 100644 --- a/components/map-container.js +++ b/components/map-container.js @@ -8,7 +8,6 @@ const MapContainer = ({ children, setMapProps }) => { const moveListener = useRef(null) const [cursor, setCursor] = useState('grab') const hasData = useStore((state) => !!state.data) - const lockZoom = useStore((state) => state.dataset?.lockZoom ?? true) const panMap = useCallback((offset) => { setMapProps((prev) => ({ @@ -17,25 +16,6 @@ const MapContainer = ({ children, setMapProps }) => { })) }, []) - const zoomMap = useCallback( - (delta, offset = [0, 0]) => { - if (lockZoom) return - setMapProps((prev) => { - delta = delta * prev.scale - const updatedScale = - prev.scale + delta < 0 ? prev.scale : prev.scale + delta - return { - ...prev, - scale: updatedScale, - translate: prev.translate.map( - (d, i) => offset[i] - ((offset[i] - d) / prev.scale) * updatedScale - ), - } - }) - }, - [lockZoom] - ) - const handler = useCallback( ({ key, keyCode, metaKey, ...rest }) => { if (document.activeElement !== container.current) { @@ -57,16 +37,10 @@ const MapContainer = ({ children, setMapProps }) => { } panMap(offset) - } else if (key === '=') { - // zoom in - zoomMap(1) - } else if (key === '-') { - // zoom out - zoomMap(-1) } } }, - [hasData, panMap, zoomMap] + [hasData, panMap] ) useEffect(() => { window.addEventListener('keydown', handler) @@ -104,21 +78,6 @@ const MapContainer = ({ children, setMapProps }) => { } }) - const handleWheel = useCallback( - (event) => { - const height = container.current.clientHeight - const width = container.current.clientWidth - const { x, y } = container.current.getBoundingClientRect() - const point = [event.clientX - x, event.clientY - y] - - const offset = [(point[0] / width) * 2 - 1, (point[1] / height) * 2 - 1] - const delta = event.deltaY / -150 - - zoomMap(delta, offset) - }, - [panMap, zoomMap] - ) - return ( { tabIndex={0} onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} - onWheel={handleWheel} id='container' > {children} diff --git a/components/nav.js b/components/nav.js index b482021..f7a234b 100644 --- a/components/nav.js +++ b/components/nav.js @@ -90,7 +90,10 @@ const Nav = ({ mapProps, setMapProps, sx }) => { const mapProjection = getProjection(mapProps) const mapPoint = mapProjection(center) - const offset = [1 - (mapPoint[0] / 800) * 2, 1 - (mapPoint[1] / 400) * 2] + const offset = [ + 1 - (mapPoint[0] / 800) * 2, + 1 - (mapPoint[1] / (800 * ASPECTS[mapProjection.id])) * 2, + ] setMapProps((prev) => ({ ...prev, diff --git a/components/proxy-map.js b/components/proxy-map.js index 5bf7fc2..2a282a4 100644 --- a/components/proxy-map.js +++ b/components/proxy-map.js @@ -28,7 +28,7 @@ const ProxyMap = () => { count: 255, format: 'rgb', }) - const { northPole, nullValue, lockZoom } = useStore( + const { northPole, nullValue } = useStore( (state) => state.dataset?.level?.variable || {} ) const clim = useStore((state) => state.clim) @@ -48,22 +48,12 @@ const ProxyMap = () => { useEffect(() => { if (!mapPropsInitialized.current && chunkBounds) { - const bounds = lockZoom - ? chunkBounds - : { - lat: [-90, 90], - lon: [-180, 180], - } - const p = getMapProps(bounds, projectionName) + const p = getMapProps(chunkBounds, projectionName) - if (p.scale < 1) { - setMapProps({ ...p, scale: 1, translate: [0, 0] }) - } else { - setMapProps(p) - } + setMapProps(p) mapPropsInitialized.current = true } - }, [!!chunkBounds, projectionName, lockZoom]) + }, [!!chunkBounds, projectionName]) useEffect(() => { if (!dataset) { @@ -141,7 +131,6 @@ const ProxyMap = () => { position: 'fixed', bottom: '18px', right: '18px', - opacity: lockZoom ? 1 : 0, transition: '0.1s', }} /> diff --git a/components/utils/data.js b/components/utils/data.js index a6ec414..9c6c595 100644 --- a/components/utils/data.js +++ b/components/utils/data.js @@ -293,10 +293,6 @@ export const getVariableLevelInfo = async ( } }, {}) - const lockZoom = [axes.X.index, axes.Y.index].some( - (index) => arrays[name].shape[index] / arrays[name].chunk_shape[index] > 4 - ) - return { centerPoint: [ axes.X.array.data[Math.round((axes.X.array.data.length - 1) / 2)], @@ -312,7 +308,6 @@ export const getVariableLevelInfo = async ( ] : undefined, axes, - lockZoom, chunk_separator, chunk_shape, nullValue, @@ -713,6 +708,8 @@ const inferCfAxes = (metadata, pyramid) => { return { ...base, X: 'lon', Y: 'lat' } } else if (['latitude', 'longitude'].every((d) => dims.includes(d))) { return { ...base, X: 'longitude', Y: 'latitude' } + } else if (['nlat', 'nlon'].every((d) => dims.includes(d))) { + return { ...base, X: 'nlon', Y: 'nlat' } } else if (!pyramid && ['rlat', 'rlon'].every((d) => dims.includes(d))) { // For non-pyramids, also check for rotated X/Y coordinate names return { ...base, X: 'rlon', Y: 'rlat' }