Make map size dynamic

dfpc-coe · Sep 5, 2024 · 35d41dc · 35d41dc
1 parent 26b9e05
commit 35d41dc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/api/web/src/stores/overlays/base.ts b/api/web/src/stores/overlays/base.ts
@@ -7,6 +7,8 @@ import mapgl from 'maplibre-gl'
 import type { LayerSpecification } from 'maplibre-gl'
 import cotStyles from './styles.ts'
 import { std, stdurl } from '../../std.js';
+import { useProfileStore } from '../profile.js';
+
 
 /**
  * @class
@@ -157,6 +159,11 @@ export default class Overlay {
             }
         }
 
+        const profileStore = useProfileStore();
+        let size = 8
+        if (profileStore.profile.display_text === 'Small') size = 4;
+        if (profileStore.profile.display_text === 'Large') size = 16;
+
         if (!opts.layers && this.type === 'raster') {
             opts.layers =  [{
                 'id': String(this.id),
@@ -168,7 +175,7 @@ export default class Overlay {
                 sourceLayer: 'out',
                 group: false,
                 icons: false,
-                labels: true
+                labels: { size }
             });
 
             if (opts.clickable === undefined)  {
@@ -180,7 +187,7 @@ export default class Overlay {
             opts.layers = cotStyles(String(this.id), {
                 group: this.mode !== "mission",
                 icons: true,
-                labels: true
+                labels: { size }
             });
 
             if (opts.clickable === undefined)  {

diff --git a/api/web/src/stores/overlays/styles.ts b/api/web/src/stores/overlays/styles.ts
@@ -10,14 +10,11 @@ import type {
 export default function styles(id: string, opts: {
     sourceLayer?: string;
     group?: boolean;
-    labels?: boolean;
+    labels?: {
+        size: number
+    };
     icons?: boolean;
-} = {
-    sourceLayer: undefined,
-    group: false,
-    labels: false,
-    icons: false
-}): Array<LayerSpecification> {
+} = {}): Array<LayerSpecification> {
     const styles: Array<LayerSpecification> = [];
 
     const poly: FillLayerSpecification = {
@@ -202,8 +199,8 @@ export default function styles(id: string, opts: {
                     'interpolate',
                     ['linear'],
                     ['zoom'],
-                    8, 8,
-                    15, 15
+                    8, opts.labels.size,
+                    15, opts.labels.size + 7
                 ],
                 'text-offset': [0, 2],
                 'text-font': ['Open Sans Bold'],