Add Option to fill visible map areas

zeldamods · Aug 2, 2024 · 3524983 · 3524983
1 parent 1be5025
commit 3524983
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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>