diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index 3554ee9..0bc2872 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -13,6 +13,7 @@ import caveIcon from '../../icons/cave-entrance-svgrepo-com.svg'; import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg'; import { Feature } from 'ol'; import memoize from 'memoizee'; +import { getState } from '../map'; interface StyleParameters { type: string; @@ -113,19 +114,28 @@ const styles = { }), }, wpt: { - image: (feature: Feature) => { + image: (feature: Feature, zoom: number) => { + const minZoom = feature.get('extensions')?.['dyo:minZoom']; + if (minZoom && zoom < minZoom) { + return null; + } const customIcon = icons[feature.get('sym') as keyof typeof icons]; const icon = customIcon ?? wptIconObj; return new Icon(icon); }, - text: (feature: Feature) => - new Text({ + text: (feature: Feature, zoom: number) => { + const minZoom = feature.get('extensions')?.['dyo:minZoom']; + if (minZoom && zoom < minZoom) { + return null; + } + return new Text({ font: '16px Calibri,sans-serif', text: feature.get('name'), fill: textFill, stroke: textStroke, offsetY: -40, - }), + }); + }, }, }, selected: { @@ -154,10 +164,24 @@ const styles = { }, }; +const styleRequiresFeatureAndZoom = memoize( + (type: keyof typeof styles.default) => { + const defaults = styles.default[type]; + const selected = styles.selected[type]; + const all = { ...selected, ...defaults }; + for (const key of Object.keys(all)) { + if (all[key] instanceof Function && all[key].length > 1) { + return true; + } + } + return false; + } +); + const styleRequiresFeature = memoize((type: keyof typeof styles.default) => { const defaults = styles.default[type]; const selected = styles.selected[type]; - const all = { ...defaults, ...selected }; + const all = { ...selected, ...defaults }; for (const key of Object.keys(all)) { if (all[key] instanceof Function) { return true; @@ -170,7 +194,8 @@ const getStyle = memoize( ( type: keyof typeof styles.default, isSelected: boolean = false, - params: any + feature: any, + zoom: any ) => { const defaults = styles.default[type]; const selected = styles.selected[type]; @@ -186,22 +211,26 @@ const getStyle = memoize( // }); for (const key of Object.keys(all)) { if (all[key] instanceof Function) { - all[key] = all[key](params); + all[key] = all[key](feature, zoom); } } return new Style(all); }, - { length: 3, max: 1024 } + { length: 4, max: 1024 } ); -export const style = (feature: Feature, resolution: number) => { +export const style = (feature: Feature) => { const type = feature.get('type'); const isSelected = feature.get('isSelected') === true; // console.log({ caller: 'style', type, isSelected }); - if (styleRequiresFeature(type)) { - return getStyle(type, isSelected, feature); + if (styleRequiresFeatureAndZoom(type)) { + const zoom = Math.floor(getState().zoom); + return getStyle(type, isSelected, feature, zoom); } - return getStyle(type, isSelected, null); + if (styleRequiresFeature(type)) { + return getStyle(type, isSelected, feature, null); + } + return getStyle(type, isSelected, null, null); }; export default style; diff --git a/src/components/wpt/Wpt.tsx b/src/components/wpt/Wpt.tsx index b5cbe92..c389a29 100644 --- a/src/components/wpt/Wpt.tsx +++ b/src/components/wpt/Wpt.tsx @@ -160,6 +160,17 @@ export const Wpt: Component = ({ vectorSource, wptId: wptId }) => { setEditedWpt({ ...editedWpt(), sym: value }); }} /> + { + const extensions = { + ...editedWpt()?.extensions, + 'dyo:minZoom': parseFloat(value), + }; + setEditedWpt({ ...editedWpt(), extensions }); + }} + />