From 711fc229c3429ed1b20bb8e4bbb3b46c54cb63fc Mon Sep 17 00:00:00 2001
From: nilsnolde <nilsnolde@proton.me>
Date: Sun, 26 Apr 2026 23:56:04 +0200
Subject: [PATCH] add x-client-id header

---
 src/components/map/index.tsx           | 16 +++++++++++++---
 src/components/route-planner.tsx       |  6 ++++--
 src/hooks/use-directions-queries.ts    |  6 +++++-
 src/hooks/use-isochrones-queries.ts    |  2 ++
 src/hooks/use-optimized-route-query.ts |  6 +++++-
 src/utils/valhalla.ts                  |  4 ++++
 6 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx
index 2816eb4c..f4a3e4e7 100644
--- a/src/components/map/index.tsx
+++ b/src/components/map/index.tsx
@@ -15,7 +15,11 @@ import type maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 import { throttle } from 'throttle-debounce';
-import { getValhallaUrl, buildHeightRequest } from '@/utils/valhalla';
+import {
+  getValhallaUrl,
+  buildHeightRequest,
+  VALHALLA_CLIENT_HEADERS,
+} from '@/utils/valhalla';
 import { buildHeightgraphData } from '@/utils/heightgraph';
 import HeightGraph from '@/components/heightgraph';
 import { DrawControl } from './draw-control';
@@ -287,7 +291,10 @@ export const MapComponent = () => {
     try {
       const response = await fetch(`${getValhallaUrl()}/height`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: {
+          'Content-Type': 'application/json',
+          ...VALHALLA_CLIENT_HEADERS,
+        },
         body: JSON.stringify(buildHeightRequest([[lat, lng]])),
       });
 
@@ -340,7 +347,10 @@ export const MapComponent = () => {
       try {
         const response = await fetch(`${getValhallaUrl()}/height`, {
           method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
+          headers: {
+            'Content-Type': 'application/json',
+            ...VALHALLA_CLIENT_HEADERS,
+          },
           body: JSON.stringify(heightPayloadNew),
         });
 
diff --git a/src/components/route-planner.tsx b/src/components/route-planner.tsx
index a492fa44..f8b7c714 100644
--- a/src/components/route-planner.tsx
+++ b/src/components/route-planner.tsx
@@ -8,7 +8,7 @@ const TilesControl = lazy(() =>
   import('./tiles/tiles').then((module) => ({ default: module.TilesControl }))
 );
 import { useCommonStore } from '@/stores/common-store';
-import { getValhallaUrl } from '@/utils/valhalla';
+import { getValhallaUrl, VALHALLA_CLIENT_HEADERS } from '@/utils/valhalla';
 import {
   Sheet,
   SheetContent,
@@ -61,7 +61,9 @@ export const RoutePlanner = () => {
   } = useQuery({
     queryKey: ['lastUpdate'],
     queryFn: async () => {
-      const response = await fetch(`${getValhallaUrl()}/status`);
+      const response = await fetch(`${getValhallaUrl()}/status`, {
+        headers: VALHALLA_CLIENT_HEADERS,
+      });
       const data = await response.json();
       return new Date(data.tileset_last_modified * 1000);
     },
diff --git a/src/hooks/use-directions-queries.ts b/src/hooks/use-directions-queries.ts
index cf6b7cf8..9c6b7928 100644
--- a/src/hooks/use-directions-queries.ts
+++ b/src/hooks/use-directions-queries.ts
@@ -11,6 +11,7 @@ import {
   buildDirectionsRequest,
   parseDirectionsGeometry,
   showValhallaWarnings,
+  VALHALLA_CLIENT_HEADERS,
 } from '@/utils/valhalla';
 import { forward_geocode, parseGeocodeResponse } from '@/utils/nominatim';
 import { filterProfileSettings } from '@/utils/filter-profile-settings';
@@ -48,7 +49,10 @@ async function fetchDirections() {
   });
 
   const response = await fetch(`${getValhallaUrl()}/route?${params}`, {
-    headers: { 'Content-Type': 'application/json' },
+    headers: {
+      'Content-Type': 'application/json',
+      ...VALHALLA_CLIENT_HEADERS,
+    },
   });
 
   if (!response.ok) {
diff --git a/src/hooks/use-isochrones-queries.ts b/src/hooks/use-isochrones-queries.ts
index c538c212..4a90a0f0 100644
--- a/src/hooks/use-isochrones-queries.ts
+++ b/src/hooks/use-isochrones-queries.ts
@@ -10,6 +10,7 @@ import {
   getValhallaUrl,
   buildIsochronesRequest,
   showValhallaWarnings,
+  VALHALLA_CLIENT_HEADERS,
 } from '@/utils/valhalla';
 import {
   reverse_geocode,
@@ -52,6 +53,7 @@ async function fetchIsochrones() {
   const response = await fetch(`${getValhallaUrl()}/isochrone?${params}`, {
     headers: {
       'Content-Type': 'application/json',
+      ...VALHALLA_CLIENT_HEADERS,
     },
   });
 
diff --git a/src/hooks/use-optimized-route-query.ts b/src/hooks/use-optimized-route-query.ts
index 32060f38..78b1d3f0 100644
--- a/src/hooks/use-optimized-route-query.ts
+++ b/src/hooks/use-optimized-route-query.ts
@@ -6,6 +6,7 @@ import {
   buildOptimizedRouteRequest,
   parseDirectionsGeometry,
   showValhallaWarnings,
+  VALHALLA_CLIENT_HEADERS,
 } from '@/utils/valhalla';
 import { filterProfileSettings } from '@/utils/filter-profile-settings';
 import { useCommonStore } from '@/stores/common-store';
@@ -55,7 +56,10 @@ export function useOptimizedRouteQuery() {
       });
 
       const response = await fetch(
-        `${getValhallaUrl()}/optimized_route?${params}`
+        `${getValhallaUrl()}/optimized_route?${params}`,
+        {
+          headers: VALHALLA_CLIENT_HEADERS,
+        }
       );
 
       if (!response.ok) {
diff --git a/src/utils/valhalla.ts b/src/utils/valhalla.ts
index f536cdb6..a795bc8f 100644
--- a/src/utils/valhalla.ts
+++ b/src/utils/valhalla.ts
@@ -12,6 +12,10 @@ import { getBaseUrl } from './base-url';
 
 export const getValhallaUrl = () => getBaseUrl();
 
+export const VALHALLA_CLIENT_HEADERS = {
+  'X-Client-Id': 'public-web-app',
+} as const;
+
 export const buildLocateRequest = (
   latLng: { lat: number; lng: number },
   profile: Profile