diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index 7e11dfe..85a7b43 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -351,28 +351,39 @@ const styles = { if (icon === undefined) { return undefined; } - return new Style({ - image: new Icon({ - src: icon, - scale: isHighlighted ? 2 : 1, - opacity: 1, - color: isHighlighted ? 'red' : 'black', - // anchor: [0, 0], + 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], + }), }), - text: - name && !isTextHidden - ? new Text({ - text: name, - 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, - }); + new Style({ + image: new Icon({ + src: icon, + scale: isHighlighted ? 2 : 1, + opacity: 1, + color: isHighlighted ? 'red' : 'black', + // anchor: [0, 0], + }), + text: + name && !isTextHidden + ? new Text({ + text: name, + 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"', - offsetY: +0, + font: 'bold 18px "Open Sans", "Arial Unicode MS", "sans-serif"', + offsetY: +2, padding: [0, 0, 0, 0], fill: new Fill({ color: 'black', diff --git a/src/components/map-tile-provider/MapTileProvider.tsx b/src/components/map-tile-provider/MapTileProvider.tsx index be990cf..a2d9bc2 100644 --- a/src/components/map-tile-provider/MapTileProvider.tsx +++ b/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', }), },