Vector tiles (adjusting styles)

src/components/gpx/styles.ts

@@ -140,6 +140,10 @@ const circleStroke = new Stroke({
   width: 1.25,
 });
 
+const poiTextFill = new Fill({
+  color: 'white',
+});
+
 const circle = new Circle({
   fill: circleFill,
   stroke: circleStroke,
@@ -317,31 +321,38 @@ const styles = {
         isSelected: feature.get('isSelected') ?? false,
         name: feature.get('name'),
         klass: feature.get('class'),
+        isHidden: zoom() < 14,
       };
     },
     getStyle: memoize((params: any) => {
       console.log({ caller: 'getStyle', params });
-      const { isSelected, name, klass } = params;
+      const { isSelected, name, klass, isHidden } = params;
+      if (isHidden) {
+        return null;
+      }
       const icon = osmIcons[klass];
       if (icon === undefined) {
-        return null;
+        return undefined;
       }
       return new Style({
         image: new Icon({
           src: icon,
           scale: 1.5,
-          opacity: 0.9,
+          opacity: 1,
           //          anchor: [0, 0],
         }),
-        text: new Text({
+        text: name
+          ? new Text({
               text: name,
               font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
               offsetY: +20,
-          padding: [2, 2, 2, 2],
+              padding: [0, 0, 0, 0],
               fill: new Fill({
                 color: 'black',
               }),
-        }),
+              backgroundFill: poiTextFill,
+            })
+          : undefined,
       });
     }, memoizeOptions),
   },
@@ -362,7 +373,7 @@ export const style = (feature: Feature, resolution: number) => {
   const getStyle = styles[type].getStyle;
   const style = getStyle(params);
   console.log({ caller: 'style', feature, type, params, style });
-  if (style === null) {
+  if (style === undefined) {
     return createDefaultStyle(feature, resolution)[0];
   }
   return style;