From 410faaf00e407934a509d3ce7e73efbeb3582881 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pavel=20Zbytovsk=C3=BD?= <zbytovsky@gmail.com>
Date: Sat, 7 Oct 2023 08:37:53 +0200
Subject: [PATCH] Map: turn on 3D terrain when user tilts (#193)

---
 .../Map/behaviour/useToggleTerrainControl.tsx | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/components/Map/behaviour/useToggleTerrainControl.tsx b/src/components/Map/behaviour/useToggleTerrainControl.tsx
index 05dd38f91..82a1adc10 100644
--- a/src/components/Map/behaviour/useToggleTerrainControl.tsx
+++ b/src/components/Map/behaviour/useToggleTerrainControl.tsx
@@ -2,37 +2,43 @@
 import maplibregl from 'maplibre-gl';
 import { useAddMapEvent } from '../../helpers';
 
+const TERRAIN = {
+  source: 'terrain',
+  exaggeration: 1,
+};
+
+const turnOnTerrain = (map) => {
+  map.setTerrain(TERRAIN);
+  map.setMaxPitch(85);
+};
+
+const turnOffTerrain = (map) => {
+  map.setTerrain(null);
+  map.setMaxPitch(60);
+};
+
 class OsmappTerrainControl extends maplibregl.TerrainControl {
   _toggleTerrain = () => {
     if (this._map.getTerrain()) {
-      this._map.setTerrain(null);
-      this._map.setMaxPitch(60);
+      turnOffTerrain(this._map);
     } else {
-      this._map.setTerrain(this.options);
-      this._map.setMaxPitch(85);
+      turnOnTerrain(this._map);
     }
     this._updateTerrainIcon();
   };
 }
 
-const terrainControl = new OsmappTerrainControl({
-  source: 'terrain',
-  exaggeration: 1,
-});
+const terrainControl = new OsmappTerrainControl(TERRAIN);
 
 let added = false;
 
 export const useToggleTerrainControl = useAddMapEvent((map) => ({
   eventType: 'move',
   eventHandler: () => {
-    if (map.getPitch() > 0) {
-      if (!added) {
-        map.addControl(terrainControl);
-        added = true;
-      }
-    } else if (added) {
-      map.removeControl(terrainControl);
-      added = false;
+    if (map.getPitch() > 0 && !added) {
+      map.addControl(terrainControl);
+      turnOnTerrain(map);
+      added = true;
     }
   },
 }));