Highlighting housing

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;

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],
         }),