From 3524983dbe8c0af047188ede339e01da1054f3ab Mon Sep 17 00:00:00 2001
From: Brian Savage <savage13@gmail.com>
Date: Fri, 2 Aug 2024 18:56:43 -0400
Subject: [PATCH] Add Option to fill visible map areas

---
 src/components/AppMap.ts  | 11 ++++++++---
 src/components/AppMap.vue |  3 +++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/AppMap.ts b/src/components/AppMap.ts
index 2b6a56d..01e9843 100644
--- a/src/components/AppMap.ts
+++ b/src/components/AppMap.ts
@@ -414,6 +414,7 @@ export default class AppMap extends mixins(MixinUtil) {
   showMapUnitGrid = false;
   private revivalMapUnitGrid = new ui.Unobservable(L.layerGroup());
   showRevivalMapUnitGrid = false;
+  showAreaColor = true;
 
   private mapSafeAreas = new ui.Unobservable(L.layerGroup());
   showSafeAreas = false;
@@ -1688,6 +1689,10 @@ export default class AppMap extends mixins(MixinUtil) {
       areas = this.featureCollectionToPolygons(areas as any)
     }
     const entries = Object.entries(areas);
+
+    let fillOpacity = (this.showAreaColor) ? 0.2 : 0.0
+    let fillOpacityOver = (this.showAreaColor) ? 0.3 : 0.0
+
     let i = 0;
     for (const [data, features] of entries) {
       const layers: L.GeoJSON[] = features.map((feature: any) => {
@@ -1698,7 +1703,7 @@ export default class AppMap extends mixins(MixinUtil) {
           },
           style: function(_) {
             let color = feature.properties.color || ui.genColor(entries.length, i);
-            return { weight: 2, fillOpacity: 0.2, color }
+            return { weight: 2, fillOpacity, color }
           },
           // @ts-ignore
           contextmenu: true,
@@ -1710,11 +1715,11 @@ export default class AppMap extends mixins(MixinUtil) {
       for (const layer of layers) {
         layer.on('mouseover', () => {
           layers.forEach(l => {
-            l.setStyle({ weight: 4, fillOpacity: 0.3 });
+            l.setStyle({ weight: 4, fillOpacity: fillOpacityOver });
           });
         });
         layer.on('mouseout', () => {
-          layers.forEach(l => l.setStyle({ weight: 2, fillOpacity: 0.2 }));
+          layers.forEach(l => l.setStyle({ weight: 2, fillOpacity }));
         });
         if (name == "MapTower" || name == "sky_polys" || name == "cave_polys") {
           layer.bindTooltip(features[0].properties.title);
diff --git a/src/components/AppMap.vue b/src/components/AppMap.vue
index cea0af9..8e6dc32 100644
--- a/src/components/AppMap.vue
+++ b/src/components/AppMap.vue
@@ -151,6 +151,9 @@
 
           <!-- <b-radio value="LoadBalancer">Load balancer areas</b-radio> -->
         </b-radio-group>
+        <h4 class="subsection-heading">Visible map area fill</h4>
+        <b-checkbox switch v-model="showAreaColor" @change="onShownAreaMapChanged">Fill map areas with color</b-checkbox>
+        <br/>
         <h4 class="subsection-heading">Map grids</h4>
         <b-checkbox switch v-model="showMapUnitGrid" @change="onShowMapUnitGridChanged">Show map unit grid</b-checkbox>
         <b-checkbox switch v-model="showRevivalMapUnitGrid" @change="onShowMapUnitGridChanged">Show revival map grid</b-checkbox>