removed other map base options

src/interface/src/app/treatments/map-base-layer/map-base-layer.component.html

@@ -1,4 +1,14 @@
-<h4>Map Base</h4>
-<button *ngFor="let t of terrainTypes" [value]="t" (click)="updateBaseLayer(t)">
-  {{ t }}
-</button>
+<details open>
+  <summary>Map Base</summary>
+  <div class="base-options">
+    <div *ngFor="let t of baseLayers" class="base-option">
+      <input
+        type="radio"
+        [value]="t"
+        [id]="'layer-' + t"
+        name="baseLayer"
+        (click)="updateBaseLayer(t)" />
+      <label [for]="'layer-' + t">{{ t }}</label>
+    </div>
+  </div>
+</details>

src/interface/src/app/treatments/map-base-layer/map-base-layer.component.scss

@@ -1,3 +1,31 @@
 button {
   display: block;
 }
+
+summary {
+  border-bottom: 1px solid black;
+  padding: 0 14px;
+  cursor: pointer;
+}
+
+.base-options {
+  padding: 16px 14px;
+}
+
+.base-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+
+  input {
+    margin: 0;
+    cursor: pointer;
+  }
+
+  label {
+    cursor: pointer;
+
+  }
+}

src/interface/src/app/treatments/map-base-layer/map-base-layer.component.ts

@@ -14,7 +14,7 @@ import { NgForOf } from '@angular/common';
   styleUrl: './map-base-layer.component.scss',
 })
 export class MapBaseLayerComponent {
-  terrainTypes = Object.keys(baseLayerStyles) as BaseLayerType[];
+  baseLayers = Object.keys(baseLayerStyles) as BaseLayerType[];
 
   constructor(private mapConfigState: MapConfigState) {}
 

src/interface/src/app/treatments/treatment-map/map-config.state.ts

@@ -3,29 +3,19 @@ import { Injectable } from '@angular/core';
 import { environment } from '../../../environments/environment';
 import { MapOptions } from 'maplibre-gl';
 
-type StadiaBaseMap =
-  | 'stadiaSmooth'
-  | 'stamenTerrain'
-  | 'stadiaSatellite'
-  | 'stadiaOutdoors';
-type ArcgisBaseMap = 'arcgisTopographic' | 'arcgisImagery' | 'arcgisGray';
-type ArcgisRest = 'restTerrain' | 'restSatellite';
-type StadiaRest = 'stadiaRest';
+type StadiaBaseMap = 'road';
+type ArcgisRest = 'terrain' | 'satellite';
 
-const DEFAULT_BASE_MAP: StadiaBaseMap = 'stadiaSmooth';
-export type BaseLayerType =
-  | StadiaBaseMap
-  | ArcgisRest
-  | StadiaRest
-  | ArcgisBaseMap;
-
-const stadiaMaps = 'https://tiles.stadiamaps.com/styles/';
-const arcgis =
-  'https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/';
+const DEFAULT_BASE_MAP: StadiaBaseMap = 'road';
+export type BaseLayerType = StadiaBaseMap | ArcgisRest;
 
 function rasterSource(sourceName: string, url: string): MapOptions['style'] {
   return {
     version: 8,
+    metadata: {
+      'mapbox:autocomposite': true,
+    },
+    glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
     sources: {
       [sourceName]: {
         type: 'raster',
@@ -44,31 +34,18 @@ function rasterSource(sourceName: string, url: string): MapOptions['style'] {
 }
 
 export const baseLayerStyles: Record<BaseLayerType, MapOptions['style']> = {
-  stadiaSmooth:
-    stadiaMaps + 'alidade_smooth.json?api_key=' + environment.stadiamaps_key,
-  stamenTerrain:
-    stadiaMaps + 'stamen_terrain.json?api_key=' + environment.stadiamaps_key,
-  stadiaSatellite:
-    stadiaMaps + 'alidade_satellite.json?api_key=' + environment.stadiamaps_key,
-  stadiaOutdoors:
-    stadiaMaps + 'outdoors.json?api_key=' + environment.stadiamaps_key,
+  road:
+    'https://tiles.stadiamaps.com/styles/alidade_smooth.json?api_key=' +
+    environment.stadiamaps_key,
 
-  arcgisTopographic: arcgis + 'topographic?token=' + environment.arcgis_key,
-  arcgisImagery: arcgis + 'imagery?token=' + environment.arcgis_key,
-  arcgisGray: arcgis + 'light-gray?token=' + environment.arcgis_key,
-
-  restTerrain: rasterSource(
+  terrain: rasterSource(
     'worldTerrain',
     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}'
   ),
-  restSatellite: rasterSource(
+  satellite: rasterSource(
     'restSatellite',
     'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
   ),
-  stadiaRest: rasterSource(
-    'stadia',
-    'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}@2x.png'
-  ),
 };
 
 @Injectable()

src/interface/src/app/treatments/treatment-overview/treatment-overview.component.scss

@@ -4,5 +4,5 @@
 }
 
 .left-side {
-  padding: 20px;
+  width: 200px;
 }