layers: show climbing=area + number in supscript (#307)

zbycz · Apr 16, 2024 · 91b8c17 · 91b8c17
1 parent 82c053f
commit 91b8c17
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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,22 +34,30 @@ 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,
 ): Feature => {
   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
@@ -88,6 +88,7 @@ export interface Feature {
     [key: string]: string | number;
     osmappRouteCount?: number;
     osmappType?: 'node' | 'way' | 'relation';
+    osmappLabel?: string;
   };
   center: Position;
   roundedCenter?: LonLatRounded;