Extract colors; disable by default

osm-americana · Sep 23, 2024 · 1394349 · 1394349
1 parent 607eeff
commit 1394349
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git 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
@@ -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 → src/js/hillshade_control.js b/src/js/icon_control.js → 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
@@ -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,
   },
 };