diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index a3a97db..5b9e3a2 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -271,6 +271,49 @@ const styles = { }, way: { strokes: { + veryLowZoom: { + iwn: [ + new Style({ + stroke: new Stroke({ + color: [255, 0, 0, 1], + width: 1, + }), + }), + ], + nwn: [ + new Style({ + stroke: new Stroke({ + color: [255, 0, 0, 1], + width: 1, + }), + }), + ], + rwn: [ + new Style({ + stroke: new Stroke({ + color: [255, 128, 0, 1], + width: 1, + }), + }), + ], + lwn: [ + new Style({ + stroke: new Stroke({ + color: [255, 255, 0, 1], + width: 1, + }), + }), + ], + default: [ + new Style({ + stroke: new Stroke({ + color: [255, 255, 0, 1], + width: 1, + lineDash: [10, 10], + }), + }), + ], + }, lowZoom: { iwn: [ new Style({ @@ -301,6 +344,7 @@ const styles = { stroke: new Stroke({ color: [255, 255, 0, 0.6], width: 3, + lineDash: [10, 10], }), }), ], @@ -308,7 +352,7 @@ const styles = { new Style({ stroke: new Stroke({ color: [255, 255, 0, 0.6], - width: 3, + width: 1, lineDash: [10, 10], }), }), @@ -428,7 +472,12 @@ const styles = { // isSelected: feature.get('isSelected') ?? false, name: feature.get('name'), network, - zoom: getZoomInteger() >= 12 ? 'highZoom' : 'lowZoom', + zoom: + getZoomInteger() >= 12 + ? 'highZoom' + : getZoomInteger() >= 8 + ? 'lowZoom' + : 'veryLowZoom', }; }, getStyle: memoize((params: any) => {