Styles...

src/components/gpx/styles.ts

@@ -351,7 +351,17 @@ const styles = {
       if (icon === undefined) {
         return undefined;
       }
-      return new Style({
+      return [
+        new Style({
+          image: new Circle({
+            radius: 28,
+            fill: new Fill({
+              color: isHighlighted ? [174, 33, 219, 0.7] : [255, 255, 255, 0.3],
+            }),
+            displacement: isHighlighted ? [0, +0] : [0, +3],
+          }),
+        }),
+        new Style({
           image: new Icon({
             src: icon,
             scale: isHighlighted ? 2 : 1,
@@ -372,7 +382,8 @@ const styles = {
                   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"',
-          offsetY: +0,
+          font: 'bold 18px "Open Sans", "Arial Unicode MS", "sans-serif"',
+          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',
     }),
   },