Map: turn on 3D terrain when user tilts (#193)

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;
     }
   },
 }));