refactor - change layers

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>

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
 }

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