climbingTiles: custom geojson tiles from DB 🎉

.env

@@ -24,3 +24,6 @@ NEXT_PUBLIC_API_KEY_GRAPHHOPPER=f189b841-6529-46c6-8a91-51f17477dcda
 # Umami anylytics is used to track server load only. We don't want to track clicks in browser.
 # optional, fill blank to disable
 UMAMI_WEBSITE_ID=5e4d4917-9031-42f1-a26a-e71d7ab8e3fe
+
+# Use climbingTiles loaded from openclimbing.org (instead of Overpass version)
+#NEXT_PUBLIC_ENABLE_CLIMBING_TILES=true

package.json

@@ -55,6 +55,8 @@
     "open-location-code": "^1.0.3",
     "opening_hours": "^3.8.0",
     "osm-auth": "^2.5.0",
+    "pg": "^8.13.1",
+    "pg-format": "^1.0.4",
     "react": "^18.3.1",
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^18.3.1",
@@ -69,6 +71,7 @@
     "@types/jest": "^29.5.13",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.10",
+    "@types/pg-format": "^1.0.5",
     "@types/react-custom-scrollbars": "^4.0.13",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/typescript-estree": "^8.8.1",

pages/api/climbing-tiles/refresh.ts

@@ -0,0 +1,17 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { refreshClimbingTiles } from '../../../src/server/climbing-tiles/refreshClimbingTiles';
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    if (!process.env.XATA_PASSWORD) {
+      throw new Error('XATA_PASSWORD must be set');
+    }
+
+    const log = await refreshClimbingTiles();
+
+    res.status(200).send(log);
+  } catch (err) {
+    console.error(err); // eslint-disable-line no-console
+    res.status(err.code ?? 400).send(String(err));
+  }
+};

pages/api/climbing-tiles/tile.ts

@@ -0,0 +1,41 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { getClimbingTile } from '../../../src/server/climbing-tiles/getClimbingTile';
+import { Tile } from '../../../src/types';
+
+const CORS_ORIGINS = [
+  'http://localhost:3000',
+  'http://127.0.0.1:3000',
+  'https://osmapp.org',
+];
+
+const addCorsHeaders = (req: NextApiRequest, res: NextApiResponse) => {
+  const origin = req.headers.origin;
+  if (CORS_ORIGINS.includes(origin)) {
+    res.setHeader('Access-Control-Allow-Origin', origin);
+  }
+  res.setHeader('Content-Type', 'application/json');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+};
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  addCorsHeaders(req, res);
+  try {
+    if (!process.env.XATA_PASSWORD) {
+      throw new Error('XATA_PASSWORD must be set');
+    }
+
+    const tileNumber: Tile = {
+      z: Number(req.query.z),
+      x: Number(req.query.x),
+      y: Number(req.query.y),
+    };
+
+    const geojson = await getClimbingTile(tileNumber);
+
+    res.status(200).send(geojson);
+  } catch (err) {
+    console.error(err); // eslint-disable-line no-console
+    res.status(err.code ?? 400).send(String(err));
+  }
+};

src/components/Map/TopMenu/HamburgerMenu.tsx

@@ -204,12 +204,6 @@ export const HamburgerMenu = () => {
         <InstallLink closeMenu={close} />
         <AboutLink closeMenu={close} />
         <GithubLink closeMenu={close} />
-        {isOpenClimbing && (
-          <>
-            <ClimbingAreasLink closeMenu={close} />
-            <ClimbingGradesTableLink closeMenu={close} />
-          </>
-        )}
         <StyledDivider />
         <LangSwitcher />
       </Menu>

src/components/Map/behaviour/useUpdateStyle.tsx

@@ -22,6 +22,7 @@ import { setUpHover } from './featureHover';
 import { layersWithOsmId } from '../helpers';
 import { Theme } from '../../../helpers/theme';
 import { addIndoorEqual, removeIndoorEqual } from './indoor';
+import { addClimbingTilesSource } from '../climbingTiles/climbingTilesSource';
 
 const ofrBasicStyle = {
   ...basicStyle,
@@ -85,12 +86,18 @@ const addOverlaysToStyle = (
   overlays: string[],
   currentTheme: Theme,
 ) => {
+  // removeClimbingTilesSource(); // TODO call when climbing removed
+
   overlays
     .filter((key: string) => osmappLayers[key]?.type === 'overlay')
     .forEach((key: string) => {
       switch (key) {
         case 'climbing':
-          addClimbingOverlay(style, map);
+          if (process.env.NEXT_PUBLIC_ENABLE_CLIMBING_TILES) {
+            addClimbingTilesSource(style);
+          } else {
+            addClimbingOverlay(style, map); // TODO remove this when climbingTiles are tested
+          }
           break;
 
         case 'indoor':

src/components/Map/climbingTiles/climbingLayers.ts

@@ -0,0 +1,223 @@
+import {
+  ExpressionSpecification,
+  LayerSpecification,
+  SymbolLayerSpecification,
+} from '@maplibre/maplibre-gl-style-spec';
+import type { DataDrivenPropertyValueSpecification } from 'maplibre-gl';
+import { AREA, CRAG } from '../MapFooter/ClimbingLegend';
+
+export const CLIMBING_TILES_SOURCE = 'climbing-tiles';
+
+export const CLIMBING_SPRITE = {
+  id: 'climbing',
+  url: `${window.location.protocol}//${window.location.host}/icons-climbing/sprites/climbing`,
+};
+
+const linear = (
+  from: number,
+  a: number | ExpressionSpecification,
+  mid: number,
+  b: number | ExpressionSpecification,
+  to?: number,
+  c?: number | ExpressionSpecification,
+): ExpressionSpecification => [
+  'interpolate',
+  ['linear'],
+  ['zoom'],
+  from,
+  a,
+  mid,
+  b,
+  ...(to && c ? [to, c] : []),
+];
+
+const linearByRouteCount = (
+  from: number,
+  a: number | ExpressionSpecification,
+  to: number,
+  b: number | ExpressionSpecification,
+): ExpressionSpecification => [
+  'interpolate',
+  ['linear'],
+  ['coalesce', ['get', 'osmappRouteCount'], 0],
+  from,
+  a,
+  to,
+  b,
+];
+
+const ifHasImages = (
+  value: string,
+  elseValue: string,
+): ExpressionSpecification => [
+  'case',
+  ['get', 'osmappHasImages'],
+  value,
+  elseValue,
+];
+
+const byHasImages = (
+  spec: typeof AREA | typeof CRAG,
+  property: 'IMAGE' | 'COLOR',
+): ExpressionSpecification =>
+  ifHasImages(spec.HAS_IMAGES[property], spec.NO_IMAGES[property]);
+
+const ifCrag = (
+  value: ExpressionSpecification | number,
+  elseValue: ExpressionSpecification | number,
+): ExpressionSpecification => [
+  'case',
+  ['==', ['get', 'climbing'], 'crag'],
+  value,
+  elseValue,
+];
+
+const sortKey = [
+  '*',
+  -1,
+  [
+    '+',
+    ['to-number', ['get', 'osmappRouteCount']],
+    ['case', ['get', 'osmappHasImages'], 10000, 0], // preference for items with images
+    ['case', ['to-boolean', ['get', 'name']], 2, 0], // prefer items with name
+  ],
+] as DataDrivenPropertyValueSpecification<number>;
+
+const hover = (basic: number, hovered: number): ExpressionSpecification => [
+  'case',
+  ['boolean', ['feature-state', 'hover'], false],
+  hovered,
+  basic,
+];
+const step = (
+  a: unknown,
+  from: number,
+  b: unknown,
+): ExpressionSpecification => [
+  'step',
+  ['zoom'],
+  ['literal', a],
+  from,
+  ['literal', b],
+];
+
+export const routes: LayerSpecification[] = [
+  {
+    id: 'climbing routes (line)',
+    type: 'line',
+    source: CLIMBING_TILES_SOURCE,
+    minzoom: 16,
+    filter: ['all', ['==', 'type', 'route']],
+    paint: {
+      'line-width': 2,
+    },
+  },
+  {
+    id: 'climbing routes (circle)',
+    type: 'circle',
+    source: CLIMBING_TILES_SOURCE,
+    minzoom: 16,
+    filter: ['all', ['==', 'type', 'route']],
+    paint: {
+      'circle-color': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        '#4150a0',
+        '#ea5540',
+      ],
+      'circle-radius': linear(16, 1, 21, 6),
+      'circle-opacity': linear(16, 0.4, 21, 1),
+    },
+  } as LayerSpecification,
+  {
+    id: 'climbing routes (labels)',
+    type: 'symbol',
+    source: CLIMBING_TILES_SOURCE,
+    minzoom: 19,
+    filter: ['all', ['==', 'type', 'route']],
+    layout: {
+      'text-padding': 2,
+      'text-font': ['Noto Sans Medium'],
+      'text-anchor': 'left',
+      'text-field': '{name} {climbing:grade:uiaa}',
+      'text-offset': [1, 0],
+      'text-size': linear(20, 12, 26, 30),
+      'text-max-width': 9,
+      'text-allow-overlap': false,
+      'text-optional': true,
+    },
+    paint: {
+      'text-halo-blur': 0.5,
+      'text-color': '#666',
+      'text-halo-width': 1,
+      'text-halo-color': '#ffffff',
+    },
+  },
+];
+
+const COMMON_LAYOUT: SymbolLayerSpecification['layout'] = {
+  'icon-optional': false,
+  'icon-ignore-placement': false,
+  'icon-allow-overlap': ['step', ['zoom'], true, 4, false],
+  'text-field': ['step', ['zoom'], '', 4, ['get', 'osmappLabel']],
+  'text-padding': 2,
+  'text-font': ['Noto Sans Bold'],
+  'text-anchor': 'top',
+  'text-max-width': 9,
+  'text-ignore-placement': false,
+  'text-allow-overlap': false,
+  'text-optional': true,
+  'symbol-sort-key': sortKey,
+};
+
+const COMMON_PAINT: SymbolLayerSpecification['paint'] = {
+  'text-halo-color': '#ffffff',
+  'text-halo-width': 2,
+};
+
+const areaSize = linearByRouteCount(0, 0.4, 400, 1);
+const cragSize = linearByRouteCount(0, 0.4, 50, 0.7);
+const cragSizeBig = 1;
+
+const mixed: LayerSpecification = {
+  id: 'climbing crags and areas',
+  type: 'symbol',
+  source: CLIMBING_TILES_SOURCE,
+  maxzoom: 20,
+  filter: ['all', ['==', 'type', 'group']],
+  layout: {
+    'icon-image': ifCrag(
+      byHasImages(CRAG, 'IMAGE'),
+      byHasImages(AREA, 'IMAGE'),
+    ),
+    'icon-size': linear(
+      6,
+      0.4,
+      8,
+      ifCrag(cragSize, areaSize),
+      21,
+      ifCrag(cragSizeBig, areaSize),
+    ),
+    'text-size': linear(
+      5,
+      ifCrag(12, 12),
+      15,
+      ifCrag(12, 14),
+      21,
+      ifCrag(20, 14),
+    ),
+    'text-offset': [0, 0.6],
+    ...COMMON_LAYOUT,
+  },
+  paint: {
+    'icon-opacity': hover(1, 0.6),
+    'text-opacity': hover(1, 0.6),
+    'text-color': ifCrag(
+      byHasImages(CRAG, 'COLOR'),
+      byHasImages(AREA, 'COLOR'),
+    ),
+    ...COMMON_PAINT,
+  },
+};
+
+export const climbingLayers: LayerSpecification[] = [...routes, mixed];