From bda79d09b81e988fb272a8c076bfd385cf458d67 Mon Sep 17 00:00:00 2001
From: Arindam Bose <arindam.1993@gmail.com>
Date: Tue, 18 Feb 2025 18:03:38 +0530
Subject: [PATCH] Add hillshading

---
 src/components/BikeHopperMap.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/BikeHopperMap.tsx b/src/components/BikeHopperMap.tsx
index 56e5eff..0479bd9 100644
--- a/src/components/BikeHopperMap.tsx
+++ b/src/components/BikeHopperMap.tsx
@@ -636,7 +636,7 @@ const BikeHopperMap = forwardRef(function BikeHopperMapInternal(
           height: '100%',
         }}
         onLoad={handleMapLoad}
-        mapStyle="mapbox://styles/arindam1993/cm77a1cee01lj01sd6x37gfre"
+        mapStyle="mapbox://styles/arindam1993/cm7agbvz0003c01s86shbcfhg"
         transformRequest={transformRequest}
         interactiveLayerIds={INTERACTIVE_LAYER_IDS}
         onMouseMove={!_isTouch ? handleMapMouseMove : undefined}
@@ -724,6 +724,25 @@ const BikeHopperMap = forwardRef(function BikeHopperMapInternal(
             {...getTransitTilesStopNamesStyle(activeStops)}
           />
         </Source>
+        <Source
+          id="hillshadeSource"
+          type="raster-dem"
+          tiles={[
+            `https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.png?access_token=${import.meta.env.VITE_MAPBOX_TOKEN}
+        `,
+          ]}
+          tileSize={256}
+          minzoom={0}
+          maxzoom={14}
+        >
+          <Layer
+            type="hillshade"
+            paint={{
+              'hillshade-exaggeration': 0.2,
+              'hillshade-shadow-color': 'rgba(0,0,0,0.2)',
+            }}
+          />
+        </Source>
         {startCoords && (
           <Marker
             longitude={startCoords[0]}