From 356c4b0eba7fabaab6bfc80f4da1c4714d8504a4 Mon Sep 17 00:00:00 2001 From: evlist Date: Mon, 16 Jan 2023 16:28:34 +0100 Subject: [PATCH] Highlighting housing --- src/components/gpx/osm-icons.ts | 12 ++++++++++++ src/components/gpx/styles.ts | 14 +++++++++----- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/components/gpx/osm-icons.ts b/src/components/gpx/osm-icons.ts index 6f0d34d..61977a1 100644 --- a/src/components/gpx/osm-icons.ts +++ b/src/components/gpx/osm-icons.ts @@ -98,4 +98,16 @@ export const osmIcons = { wilderness_hut, }; +export const highlight = { + hotel, + alpine_hut, + apartment, + camp_site, + chalet, + guest_house, + hostel, + motel, + wilderness_hut, +}; + export default osmIcons; diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index f1bf2cb..ee1d689 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -20,7 +20,7 @@ import { Point } from 'ol/geom'; import { Coordinate } from 'ol/coordinate'; import { createDefaultStyle } from 'ol/style/Style'; -import osmIcons from './osm-icons'; +import osmIcons, { highlight } from './osm-icons'; import { indexOf } from 'lodash'; interface StyleParameters { @@ -328,17 +328,21 @@ const styles = { MultiLineString: {}, Point: { getParameters: (feature: Feature) => { + const klass: string = feature.get('class'); + const isHighlighted = highlight.hasOwnProperty(klass); return { isSelected: feature.get('isSelected') ?? false, name: feature.get('name'), - klass: feature.get('class'), + klass, + isHighlighted, isTextHidden: zoom() < 19, - isHidden: zoom() < 16, + isHidden: !isHighlighted && zoom() < 16, }; }, getStyle: memoize((params: any) => { console.log({ caller: 'getStyle', params }); - const { isSelected, name, klass, isHidden, isTextHidden } = params; + const { isSelected, name, klass, isHidden, isTextHidden, isHighlighted } = + params; if (isHidden) { return null; } @@ -349,7 +353,7 @@ const styles = { return new Style({ image: new Icon({ src: icon, - scale: 1.5, + scale: isHighlighted ? 3 : 1.5, opacity: 1, // anchor: [0, 0], }),