All button to turn all markers / line on/off

zeldamods · Nov 10, 2023 · c3426c9 · c3426c9
1 parent dff5e43
commit c3426c9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/components/AppMap.ts b/src/components/AppMap.ts
@@ -680,6 +680,18 @@ export default class AppMap extends mixins(MixinUtil) {
       layer.addTo(this.map.m);
     }
   }
+  toggleAllLayers(on: boolean) {
+    this.drawLayerOpts.forEach((opt: any) => {
+      opt.visible = on
+      let layer = this.drawLayer.getLayer(opt.id);
+      if (!layer)
+        return;
+      if (on)
+        layer.addTo(this.map.m)
+      else
+        layer.remove()
+    })
+  }
 
   updateDrawLayers() {
     const activeLayer = this.map.activeLayer;
@@ -717,14 +729,16 @@ export default class AppMap extends mixins(MixinUtil) {
     const layerIDs = this.drawLayer.getLayers().map((layer: any) => {
       let props = layer.feature.properties;
       const id = this.drawLayer.getLayerId(layer);
+      const opt = this.drawLayerOpts.find(opt => opt.id == id);
+      const visible = (opt && opt.visible !== undefined) ? opt.visible : true;
       return {
         id,
         color: layer.options.color,
         order: props.order,
         title: props.title,
         text: props.text,
         length: (ui.leafletType(layer) == ui.LeafletType.Marker) ? "" : props.pathLength.toFixed(2),
-        visible: true,
+        visible,
         map_layer: props.map_layer,
       };
     })

diff --git a/src/components/AppMap.vue b/src/components/AppMap.vue
@@ -225,10 +225,14 @@
               <option value="always">Always show</option>
           </select>
           </div>
+          <div style="display: flex; flex-flow: row nowrap;">
+            <b-btn size="sm" variant="link" @click="toggleAllLayers(true)">All On</b-btn>
+            <b-btn size="sm" variant="link" @click="toggleAllLayers(false)">All Off</b-btn>
+          </div>
           <draggable v-model="drawLayerOpts" @update="updateDrawLayerOptsIndex">
             <div v-for="layer in drawLayerOpts" :key="layer.id" @model="drawLayerOpts" class="marker-row" draggable="true">
               <div>
-                <input type="checkbox" @input="toggleLayerVisibility" :id="layer.id" :checked="layer.visible" >
+                <input type="checkbox" @input="toggleLayerVisibility" :id="layer.id" v-model="layer.visible" >
                 <div v-if="layer.map_layer == 'Surface'" style="display: inline; padding-left: 0.3em;"> <i class="fa fa-tree fa-fw" style="color: lightgreen"></i></div>
                 <div v-else-if="layer.map_layer == 'Sky'"  style="display: inline; padding-left: 0.3em;"> <i class="fa fa-cloud fa-fw" style="color: lightblue"></i></div>
                 <div v-else-if="layer.map_layer == 'Depths'"  style="display: inline; padding-left: 0.3em;"><i class="fa fa-circle fa-fw" style="color: #D771DB;"></i></div>