diff --git a/src/components/Map/styles/layers/climbingLayers.ts b/src/components/Map/styles/layers/climbingLayers.ts index 4c2cfecc7..135cff3b4 100644 --- a/src/components/Map/styles/layers/climbingLayers.ts +++ b/src/components/Map/styles/layers/climbingLayers.ts @@ -89,7 +89,7 @@ const crags: LayerSpecification = { 'text-font': ['Noto Sans Bold'], 'text-anchor': 'top', 'icon-image': 'circle_11', - 'text-field': '{name}\n{osmappRouteCount}', + 'text-field': '{osmappLabel}', 'text-offset': [ 'step', ['zoom'], @@ -130,7 +130,7 @@ const areas: LayerSpecification = { 'text-font': ['Noto Sans Bold'], 'text-anchor': 'top', 'icon-image': 'square_11', - 'text-field': '{name}\n{osmappRouteCount}', + 'text-field': '{osmappLabel}', 'text-offset': [0, 0.6], 'text-size': ['interpolate', ['linear'], ['zoom'], 11.5, 14], // 'icon-size': 1.5, diff --git a/src/services/__tests__/fetchCrags.test.ts b/src/services/__tests__/fetchCrags.test.ts index 1ed19d1a8..88ba19df0 100644 --- a/src/services/__tests__/fetchCrags.test.ts +++ b/src/services/__tests__/fetchCrags.test.ts @@ -62,6 +62,7 @@ const geojson = [ subclass: 'route_bottom', climbing: 'route_bottom', name: 'Detonátor', + osmappLabel: 'Detonátor', osmappType: 'node', }, tags: { climbing: 'route_bottom', name: 'Detonátor' }, @@ -79,6 +80,7 @@ const geojson = [ osmappRouteCount: 30, osmappType: 'node', subclass: 'crag', + osmappLabel: '³⁰', }, tags: { climbing: 'crag', @@ -97,7 +99,7 @@ const geojson = [ }, id: 2221, osmMeta: { id: 222, type: 'way' }, - properties: { class: 'information', osmappType: 'way' }, + properties: { class: 'information', osmappType: 'way', osmappLabel: '' }, tags: {}, type: 'Feature', }, @@ -120,6 +122,7 @@ const geojson = [ subclass: 'area', climbing: 'area', name: 'Lomy nad Velkou', + osmappLabel: 'Lomy nad Velkou\n³¹', osmappType: 'relation', osmappRouteCount: 31, }, @@ -143,6 +146,7 @@ const geojson = [ subclass: 'crag', climbing: 'crag', name: 'Borová věž', + osmappLabel: 'Borová věž\n¹', osmappType: 'relation', osmappRouteCount: 1, }, @@ -180,7 +184,11 @@ test('conversion with centers instead of geometries', () => { geometries: [{ coordinates: [14, 51], type: 'Point' }], type: 'GeometryCollection', }, - properties: { class: 'information', osmappType: 'relation' }, + properties: { + class: 'information', + osmappType: 'relation', + osmappLabel: '', + }, tags: {}, members: [{ type: 'relation', ref: 17089246, role: '' }], }, @@ -190,7 +198,11 @@ test('conversion with centers instead of geometries', () => { id: 170892464, center: [14, 51], geometry: { coordinates: [14, 51], type: 'Point' }, - properties: { class: 'information', osmappType: 'relation' }, + properties: { + class: 'information', + osmappType: 'relation', + osmappLabel: '', + }, tags: {}, members: [], }, diff --git a/src/services/fetchCrags.tsx b/src/services/fetchCrags.tsx index 04c0dc827..9e40f1e01 100644 --- a/src/services/fetchCrags.tsx +++ b/src/services/fetchCrags.tsx @@ -1,9 +1,15 @@ import { fetchJson } from './fetch'; -import { Feature, FeatureGeometry, LineString, Point } from './types'; +import { + Feature, + FeatureGeometry, + FeatureTags, + LineString, + Point, +} from './types'; import { getPoiClass } from './getPoiClass'; import { getCenter } from './getCenter'; import { OsmApiId } from './helpers'; -import { publishDbgObject } from '../utils'; +import { join, publishDbgObject } from '../utils'; // inspired by overpassSearch - but this computes all geometries (doesnt fetch them by 'geom' modifier) @@ -28,6 +34,12 @@ function getItems(elements) { return { nodes, ways, relations }; } +const numberToSuperScript = (number?: number) => + number?.toString().replace(/\d/g, (d) => '⁰¹²³⁴⁵⁶⁷⁸⁹'[+d]); + +const getLabel = (tags: FeatureTags, osmappRouteCount) => + join(tags.name, '\n', numberToSuperScript(osmappRouteCount)); + const convert = ( element: any, geometryFn: (element: any) => FeatureGeometry, @@ -35,15 +47,17 @@ const convert = ( const { type, id, tags = {} } = element; const geometry = geometryFn(element); const center = getCenter(geometry) ?? undefined; + const osmappRouteCount = + element.tags.climbing === 'crag' + ? element.members?.length ?? + parseInt(element.tags['climbing:sport'] ?? 0, 10) + : undefined; const properties = { ...getPoiClass(tags), ...tags, osmappType: type, - osmappRouteCount: - element.tags.climbing === 'crag' - ? element.members?.length ?? - parseInt(element.tags['climbing:sport'] ?? 0, 10) - : undefined, + osmappRouteCount, + osmappLabel: getLabel(tags, osmappRouteCount), }; return { @@ -110,7 +124,11 @@ const getRelationWithAreaCount = ( const osmappRouteCount = cragsCount.reduce((acc, count) => acc + count); return { ...relation, - properties: { ...relation.properties, osmappRouteCount }, + properties: { + ...relation.properties, + osmappRouteCount, + osmappLabel: getLabel(relation.tags, osmappRouteCount), + }, }; } @@ -190,6 +208,7 @@ export const fetchCrags = async () => { nwr["climbing"](49.64474,14.21855,49.67273,14.28025); >;<; rel["climbing"="crag"]; + rel["climbing"="area"]; ); ( ._; diff --git a/src/services/types.ts b/src/services/types.ts index d657e8335..8070b1a96 100644 --- a/src/services/types.ts +++ b/src/services/types.ts @@ -88,6 +88,7 @@ export interface Feature { [key: string]: string | number; osmappRouteCount?: number; osmappType?: 'node' | 'way' | 'relation'; + osmappLabel?: string; }; center: Position; roundedCenter?: LonLatRounded;