From 1394349ab324d7373d2f668332b689a7bc42135f Mon Sep 17 00:00:00 2001
From: Josh Lee <jleedev@gmail.com>
Date: Mon, 23 Sep 2024 12:00:01 -0400
Subject: [PATCH] Extract colors; disable by default

---
 src/americana.js                              |  2 +-
 src/constants/color.js                        |  3 +++
 .../{icon_control.js => hillshade_control.js} | 22 ++++++++++++-------
 src/layer/hillshade.js                        |  9 ++++++--
 4 files changed, 25 insertions(+), 11 deletions(-)
 rename src/js/{icon_control.js => hillshade_control.js} (79%)

diff --git a/src/americana.js b/src/americana.js
index 93f507439..dd8b23234 100644
--- a/src/americana.js
+++ b/src/americana.js
@@ -11,7 +11,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
 import * as search from "./search.js";
 
 import LegendControl from "./js/legend_control.js";
-import { HillshadeControl } from "./js/icon_control.js";
+import { HillshadeControl } from "./js/hillshade_control.js";
 import * as LegendConfig from "./js/legend_config.js";
 import SampleControl from "openmapsamples-maplibre/OpenMapSamplesControl.js";
 import { default as OpenMapTilesSamples } from "openmapsamples/samples/OpenMapTiles/index.js";
diff --git a/src/constants/color.js b/src/constants/color.js
index e2bf7bdc7..e088e5ca9 100644
--- a/src/constants/color.js
+++ b/src/constants/color.js
@@ -1,6 +1,9 @@
 export const backgroundFill = `hsl(30, 44%, 96%)`;
 export const backgroundFillTranslucent = `hsla(30, 44%, 96%, 0.8)`;
 
+export const hillshadeShadow = "hsla(30, 14%, 63%, 1)";
+export const hillshadeHighlight = "hsla(30, 44%, 99%, 1)";
+
 export const waterFill = "hsl(211, 50%, 85%)";
 export const waterFillTranslucent = "hsla(211, 50%, 85%, 0.5)";
 export const waterIntermittentFill = "hsla(211, 60%, 85%, 0.3)";
diff --git a/src/js/icon_control.js b/src/js/hillshade_control.js
similarity index 79%
rename from src/js/icon_control.js
rename to src/js/hillshade_control.js
index b8e7be5a3..84fe00c7d 100644
--- a/src/js/icon_control.js
+++ b/src/js/hillshade_control.js
@@ -3,16 +3,23 @@ export class HillshadeControl {
     this._layerId = layerId;
   }
 
-  _onClick = () => {
+  _updateButton() {
     if (this._map.getLayoutProperty(this._layerId, "visibility") == "none") {
-      this._map.setLayoutProperty(this._layerId, "visibility", "visible");
-      this._button.classList.add("maplibregl-ctrl-terrain-enabled");
-      this._button.title = "Disable terrain";
-    } else {
-      this._map.setLayoutProperty(this._layerId, "visibility", "none");
       this._button.classList.remove("maplibregl-ctrl-terrain-enabled");
       this._button.title = "Enable terrain";
+    } else {
+      this._button.classList.add("maplibregl-ctrl-terrain-enabled");
+      this._button.title = "Disable terrain";
     }
+  }
+
+  _onClick = () => {
+    const newValue =
+      this._map.getLayoutProperty(this._layerId, "visibility") == "none"
+        ? "visible"
+        : "none";
+    this._map.setLayoutProperty(this._layerId, "visibility", newValue);
+    this._updateButton();
   };
 
   onAdd(map) {
@@ -23,8 +30,7 @@ export class HillshadeControl {
 
     this._button = document.createElement("button");
     this._button.className = "maplibregl-ctrl-terrain";
-    this._button.classList.add("maplibregl-ctrl-terrain-enabled");
-    this._button.title = "Disable terrain";
+    this._updateButton();
     this._button.addEventListener("click", this._onClick);
     this._container.append(this._button);
 
diff --git a/src/layer/hillshade.js b/src/layer/hillshade.js
index 56fa155a5..52d969602 100644
--- a/src/layer/hillshade.js
+++ b/src/layer/hillshade.js
@@ -1,7 +1,12 @@
+import { hillshadeShadow, hillshadeHighlight } from "../constants/color";
+
 export const hillshading = {
   id: "hillshading",
   type: "hillshade",
   source: "dem",
+  layout: {
+    visibility: "none",
+  },
   paint: {
     "hillshade-exaggeration": [
       "interpolate",
@@ -12,7 +17,7 @@ export const hillshading = {
       17,
       0.1,
     ],
-    "hillshade-shadow-color": "hsla(30, 14%, 63%, 1)",
-    "hillshade-highlight-color": "hsla(30, 44%, 99%, 1)",
+    "hillshade-shadow-color": hillshadeShadow,
+    "hillshade-highlight-color": hillshadeHighlight,
   },
 };