layers: show climbing=area + number in supscript

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

Hide file tree

Showing 2 changed files with 23 additions and 8 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/fetchCrags.tsx b/src/services/fetchCrags.tsx
@@ -28,22 +28,32 @@ function getItems(elements) {
   return { nodes, ways, relations };
 }
 
+const numberToSuperScript = (number: number) =>
+  number.toString().replace(/\d/g, (d) => '⁰¹²³⁴⁵⁶⁷⁸⁹'[+d]);
+
+const getLabel = (tags: {}, osmappRouteCount) =>
+  `${tags.name}${
+    osmappRouteCount ? `\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 +120,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 +204,7 @@ export const fetchCrags = async () => {
       nwr["climbing"](49.64474,14.21855,49.67273,14.28025);
       >;<;
       rel["climbing"="crag"];
+      rel["climbing"="area"];
     );
     (
       ._;