Styles...

src/components/gpx/styles.ts

@@ -351,28 +351,39 @@ const styles = {
       if (icon === undefined) {
         return undefined;
       }
-      return new Style({
+      return [
-        image: new Icon({
+        new Style({
-          src: icon,
+          image: new Circle({
-          scale: isHighlighted ? 2 : 1,
+            radius: 28,
-          opacity: 1,
+            fill: new Fill({
-          color: isHighlighted ? 'red' : 'black',
+              color: isHighlighted ? [174, 33, 219, 0.7] : [255, 255, 255, 0.3],
-          //          anchor: [0, 0],
+            }),
+            displacement: isHighlighted ? [0, +0] : [0, +3],
+          }),
         }),
-        text:
+        new Style({
-          name && !isTextHidden
+          image: new Icon({
-            ? new Text({
+            src: icon,
-                text: name,
+            scale: isHighlighted ? 2 : 1,
-                font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
+            opacity: 1,
-                offsetY: +40,
+            color: isHighlighted ? 'red' : 'black',
-                padding: [0, 0, 0, 0],
+            //          anchor: [0, 0],
-                fill: new Fill({
+          }),
-                  color: 'black',
+          text:
-                }),
+            name && !isTextHidden
-                backgroundFill: poiTextFill,
+              ? new Text({
-              })
+                  text: name,
-            : undefined,
+                  font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
-      });
+                  offsetY: +40,
+                  padding: [0, 0, 0, 0],
+                  fill: new Fill({
+                    color: 'black',
+                  }),
+                  backgroundFill: poiTextFill,
+                })
+              : undefined,
+        }),
+      ];
     }, memoizeOptions),
   },
   cluster: {
@@ -389,13 +400,13 @@ const styles = {
       const { nbFeatures } = params;
       return new Style({
         image: new Circle({
-          radius: 15,
+          radius: 12,
           fill: new Fill({ color: [174, 33, 219, 0.7] }),
         }),
         text: new Text({
           text: `${nbFeatures}`,
-          font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
+          font: 'bold 18px "Open Sans", "Arial Unicode MS", "sans-serif"',
-          offsetY: +0,
+          offsetY: +2,
           padding: [0, 0, 0, 0],
           fill: new Fill({
             color: 'black',

src/components/map-tile-provider/MapTileProvider.tsx

@@ -50,7 +50,7 @@ export const mapTileProviders: TileProviders = {
     language: 'int',
     source: new XYZ({
       minZoom: 0,
-      maxZoom: 20,
+      maxZoom: 16,
       url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',
     }),
   },