feat(map): legend displayed over map; exposes option to display map layer controls in dropdown

src/app/shared/components/template/components/map/map.component.html

@@ -37,8 +37,32 @@
     </div>
   </div>
   <div class="map-controls">
-    <div class="layer-control"></div>
-    @if (mapLayers.length > 0) {
+    @if (params.controlsStyle === "dropdown") {
+      @if (mapLayers.length > 0) {
+        <ion-select
+          label="Visible Layers:"
+          interface="modal"
+          fill="outline"
+          placeholder="Select map layers to view"
+          [multiple]="true"
+          (ionChange)="handleDropdownChange($event)"
+          [value]="visibleLayerNames"
+        >
+          @for (mapLayer of mapLayersReversed; track $index) {
+            <ion-select-option [value]="mapLayer.get('name')">
+              <ion-item>
+                <ion-label>
+                  {{
+                    mapLayer.get("name") +
+                      (mapLayer.get("description") ? " – " + mapLayer.get("description") : "")
+                  }}
+                </ion-label>
+              </ion-item>
+            </ion-select-option>
+          }
+        </ion-select>
+      }
+    } @else if (params.controlsStyle === "list") {
       <ion-list>
         @for (mapLayer of mapLayersReversed; track $index) {
           <ion-item>

src/app/shared/components/template/components/map/map.component.scss

@@ -1,4 +1,4 @@
-$map-height: 80vh;
+$map-height: 70vh;
 
 .map-container {
   width: 100%;
@@ -9,6 +9,7 @@ $map-height: 80vh;
   flex-direction: column;
   width: 100%;
   min-height: $map-height;
+  position: relative;
 }
 
 .map {
@@ -17,18 +18,23 @@ $map-height: 80vh;
 }
 
 .legend {
+  z-index: 100;
+  position: absolute;
+  bottom: 0;
+  height: auto;
+  background-color: rgba(255, 255, 255, 0.6);
   display: flex;
   flex-direction: column;
-  width: auto;
-  padding: 0 12px;
+  width: 100%;
+  padding: 0 24px;
 
   .legend-item {
     display: flex;
     flex-direction: column;
-    padding: 8px 0;
+    padding: 2px 0;
     .title {
       width: 100%;
-      margin-bottom: 8px;
+      margin-bottom: 2px;
     }
 
     .scale-container {
@@ -53,7 +59,7 @@ $map-height: 80vh;
     .colour-scale {
       width: 100%;
       height: 12px;
-      margin-bottom: 8px;
+      margin-bottom: 4px;
     }
 
     ion-range {
@@ -65,6 +71,7 @@ $map-height: 80vh;
       --bar-height: 12px;
       --knob-background: var(--ion-color-primary);
       --knob-size: 28px;
+      --height: 18px;
     }
   }
 }

src/app/shared/components/template/components/map/map.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, ViewChild } from "@angular/core";
 import { TemplateBaseComponent } from "../base";
 import { TemplateAssetService } from "../../services/template-asset.service";
 import { getParamFromTemplateRow, getStringParamFromTemplateRow } from "src/app/shared/utils";
@@ -56,6 +56,11 @@ interface IMapParams {
    * A data list or data list name containing a list of layers to be added to the map. Format IMapLayer
    */
   layers: IMapLayer[];
+  /**
+   * TEMPLATE PARAMETER: controls_style
+   * The style in which to display the list of viewable layers. Default "dropdown".
+   */
+  controlsStyle: "dropdown" | "list";
 }
 
 @Component({
@@ -70,11 +75,17 @@ export class TmplMapComponent extends TemplateBaseComponent implements AfterView
   get mapLayersReversed(): any[] {
     return [...this.mapLayers].reverse();
   }
+  get visibleLayerNames(): any[] {
+    return this.mapLayersReversed
+      .filter((layer) => layer.getVisible())
+      .map((layer) => layer.get("name"));
+  }
   @ViewChild("mapElement") mapElement!: ElementRef<HTMLElement>;
 
   constructor(
     private templateAssetService: TemplateAssetService,
-    private appDataService: AppDataService
+    private appDataService: AppDataService,
+    private cdr: ChangeDetectorRef
   ) {
     super();
   }
@@ -131,6 +142,16 @@ export class TmplMapComponent extends TemplateBaseComponent implements AfterView
     });
   }
 
+  public handleDropdownChange(event: any) {
+    this.makeLayersVisible(event.detail.value);
+  }
+
+  private makeLayersVisible(layers: string[]) {
+    this.mapLayers.forEach((layer) => {
+      layer.setVisible(layers.includes(layer.get("name")));
+    });
+  }
+
   private async initialiseMap() {
     this.map = new Map({
       layers: [
@@ -171,6 +192,12 @@ export class TmplMapComponent extends TemplateBaseComponent implements AfterView
     if (extentRaw) {
       this.params.extent = extentRaw.split(",").map((num) => parseFloat(num.trim()));
     }
+
+    this.params.controlsStyle = getStringParamFromTemplateRow(
+      this._row,
+      "controls_style",
+      "dropdown"
+    ) as IMapParams["controlsStyle"];
   }
 
   private parseLayerParams(layer: any) {
@@ -376,6 +403,9 @@ export class TmplMapComponent extends TemplateBaseComponent implements AfterView
   private addLayer(layer: BaseLayer) {
     this.map.addLayer(layer);
     this.mapLayers.push(layer);
+    console.log("maplayers", this.mapLayers);
+    console.log("maplayers length", this.mapLayers.length);
+    this.cdr.markForCheck();
   }
 
   private setCustomLayerProperties(