From aa8c3ab5fedad9e9ce42b3d06b79c7395249c9dd Mon Sep 17 00:00:00 2001
From: Azgaar <azgaar.fmg@yandex.com>
Date: Tue, 10 Sep 2024 12:39:29 +0200
Subject: [PATCH] refactor - change layers

---
 index.html           |  2 +-
 main.js              |  1 +
 modules/ui/layers.js | 31 ++++++++++++++++++++++++-------
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 739b1614..880521c0 100644
--- a/index.html
+++ b/index.html
@@ -439,7 +439,7 @@
           <select
             data-tip="Select a map layers preset"
             id="layersPreset"
-            onchange="changeLayersPreset(this.value)"
+            onchange="handleLayersPresetChange(this.value)"
             style="width: 45%"
           >
             <option value="political" selected>Political map</option>
diff --git a/main.js b/main.js
index eefdcb55..08296b39 100644
--- a/main.js
+++ b/main.js
@@ -315,6 +315,7 @@ async function generateMapOnLoad() {
   await applyStyleOnLoad(); // apply previously selected default or custom style
   await generate(); // generate map
   applyLayersPreset(); // apply saved layers preset and reder layers
+  drawLayers();
   fitMapToScreen();
   focusOn(); // focus on point, cell or burg from MFCG based on url searchParams
 }
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 3d354529..c863c6d0 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -101,20 +101,37 @@ function restoreCustomPresets() {
 // run on map generation
 function applyLayersPreset() {
   const preset = localStorage.getItem("preset") || byId("layersPreset").value;
-  changeLayersPreset(preset);
+  setLayersPreset(preset);
+
+  const layers = presets[preset]; // layers to be turned on
+  document.querySelectorAll("#mapLayers > li").forEach(el => {
+    const shouldBeOn = layers.includes(el.id);
+    if (shouldBeOn) el.classList.remove("buttonoff");
+    else el.classList.add("buttonoff");
+  });
 }
 
-// toggle layers on preset change
-function changeLayersPreset(preset) {
-  const layers = presets[preset]; // layers to be turned on
-  layersPreset.value = preset;
+function setLayersPreset(preset) {
+  byId("layersPreset").value = preset;
   localStorage.setItem("preset", preset);
+
   const isDefault = getDefaultPresets()[preset];
   byId("removePresetButton").style.display = isDefault ? "none" : "inline-block";
   byId("savePresetButton").style.display = "none";
+}
+
+// toggle layers on manual preset change
+function handleLayersPresetChange(preset) {
+  setLayersPreset(preset);
+
+  const layers = presets[preset]; // layers to be turned on
+  document.querySelectorAll("#mapLayers > li").forEach(el => {
+    const isOn = layerIsOn(el.id);
+    const shouldBeOn = layers.includes(el.id);
+    if (shouldBeOn && !isOn) el.click();
+    if (isOn && !shouldBeOn) el.click();
+  });
 
-  document.querySelectorAll("#mapLayers > li").forEach(e => (e.className = layers.includes(e.id) ? null : "buttonoff"));
-  drawLayers();
   if (byId("canvas3d")) setTimeout(() => ThreeD.update(), 400);
 }