feat: add area display/switcher

owlmaps · Jul 7, 2024 · 85841d6 · 85841d6
1 parent 6ce6385
commit 85841d6
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 1 deletion.
diff --git a/src/main.ts b/src/main.ts
@@ -14,10 +14,11 @@ class MapViewer {
   baseData: BaseData;
   latestData: any;
   layer_frontline: any;
+  layer_frontline_areas: any;
   layer_fortifications: any;
   layer_dragon_teeth: any;
   layer_units: any[];
-  layer_geos: [];
+  layer_geos: any[];
   maxCacheSize: number;
   cache: Map<string, any>;
   search: string;
@@ -27,6 +28,7 @@ class MapViewer {
     fortifications: boolean;
     dragon_teeth: boolean;
     timeline: boolean;
+    areas: boolean;
   };
   showPermanentUnitLabels: boolean;
   baseUnitIcon: any;
@@ -39,6 +41,7 @@ class MapViewer {
     this.baseData = null;
     this.latestData = null;
     this.layer_frontline = null;
+    this.layer_frontline_areas = [];
     this.layer_fortifications = null;
     this.layer_dragon_teeth = null;
     this.layer_units = [];
@@ -52,6 +55,7 @@ class MapViewer {
       fortifications: false,
       dragon_teeth: false,
       timeline: true,
+      areas: true,
     };
     this.showPermanentUnitLabels = false;
     this.baseUnitIcon = this.createUnitIconBaseClass();
@@ -96,6 +100,13 @@ class MapViewer {
       'timeline-toggle-button',
       this.layer_status.timeline
     );
+
+    this.addToggleButton(
+      this.toggleAreasLayer,
+      'Toggle Areas',
+      'areas-toggle-button',
+      this.layer_status.areas
+    );
 
     this.addToggleButton(
       this.toggleFortificationsLayer,
@@ -495,6 +506,24 @@ class MapViewer {
   // Toggle Timeline Layers Handler
   //=================================================
 
+  toggleAreasLayer = () => {
+    if (this.layer_fortifications === null) {
+      return;
+    }
+    const btn = document.querySelector('.areas-toggle-button');
+    if (this.map.hasLayer(this.layer_frontline_areas)) {
+      this.map.removeLayer(this.layer_frontline_areas);
+      btn?.classList.remove('active');
+      btn?.classList.add('inactive');
+      this.layer_status.areas = false;
+    } else {
+      this.map.addLayer(this.layer_frontline_areas);
+      btn?.classList.remove('inactive');
+      btn?.classList.add('active');
+      this.layer_status.areas = true;
+    }
+  };
+
   toggleGeosLayer = () => {
     if (this.layer_geos === null) {
       return;
@@ -770,6 +799,33 @@ class MapViewer {
     this.addFrontlineLayer();
   }
 
+  createFrontlineAreasLayer = () => {
+    const frontlineAreaOptions = {
+      weight: 0,
+      color: '#ff0000',
+      fillOpacity: 0.15,
+      interactive: false,
+    };
+    this.layer_frontline_areas = L.polygon(this.latestData['areas'], frontlineAreaOptions);
+
+  };
+
+  addFrontlineAreasLayer = () => {
+    this.layer_frontline_areas.addTo(this.map);
+  };
+
+  removeFrontlineAreasLayer = () => {
+    if (this.layer_frontline_areas !== null) {
+      this.map.removeLayer(this.layer_frontline_areas);
+    }
+  };
+
+  updateFrontlineAreasLayer() {
+    this.removeFrontlineAreasLayer();
+    this.createFrontlineAreasLayer();
+    this.addFrontlineAreasLayer();
+  }
+
   //---------------------------------------------------------
 
   createUnitLayers = () => {
@@ -906,6 +962,7 @@ class MapViewer {
   //=================================================
   updateDynamicLayers = () => {
     this.updateFrontlineLayer();
+    this.updateFrontlineAreasLayer();
     this.updateUnitsLayers();
     this.updateGeosLayers();
   };

diff --git a/src/styles/map/_controls.scss b/src/styles/map/_controls.scss
@@ -4,6 +4,10 @@
   // prettier-ignore
   @return url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="%23'+$color+'" d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9V168c0 13.3 10.7 24 24 24H134.1c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24V256c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65V152c0-13.3-10.7-24-24-24z"/></svg>');
 }
+@function svg-areas($color) {
+  // prettier-ignore
+  @return url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="%23'+$color+'" d="M0 64C0 28.7 28.7 0 64 0H352c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM160 352c0-17.7 14.3-32 32-32V304c0-44.2 35.8-80 80-80H416c17.7 0 32-14.3 32-32V160 69.5c37.3 13.2 64 48.7 64 90.5v32c0 53-43 96-96 96H272c-8.8 0-16 7.2-16 16v16c17.7 0 32 14.3 32 32V480c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V352z"/></svg>');
+}
 @function svg-fortifications($color) {
   // prettier-ignore
   @return url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="%23'+$color+'" d="M32 32C14.3 32 0 46.3 0 64V448c0 17.7 14.3 32 32 32s32-14.3 32-32V266.3L149.2 96H64V64c0-17.7-14.3-32-32-32zM405.2 96H330.8l-5.4 10.7L234.8 288h74.3l5.4-10.7L405.2 96zM362.8 288h74.3l5.4-10.7L533.2 96H458.8l-5.4 10.7L362.8 288zM202.8 96l-5.4 10.7L106.8 288h74.3l5.4-10.7L277.2 96H202.8zm288 192H576V448c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v53.7L490.8 288z"/></svg>');
@@ -44,6 +48,17 @@
     background-image: svg-timeline("000000");
   }
 }
+.areas-toggle-button {
+  background: #fff;
+  background-image: svg-areas("aaaaaa");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 50%;
+
+  &.active {
+    background-image: svg-areas("000000");
+  }
+}
 .fortifications-toggle-button {
   background: #fff;
   background-image: svg-fortifications("aaaaaa");