chore: made terradraw rectangle style to match training area aoi

hotosm · Nov 16, 2024 · a192d79 · a192d79
1 parent 48f34a2
commit a192d79
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/frontend/src/components/map/setup-terra-draw.ts b/frontend/src/components/map/setup-terra-draw.ts
@@ -5,6 +5,7 @@ import {
   TerraDrawRectangleMode,
 } from "terra-draw";
 import maplibregl from "maplibre-gl";
+import { TRAINING_AREAS_AOI_FILL_COLOR, TRAINING_AREAS_AOI_FILL_OPACITY, TRAINING_AREAS_AOI_OUTLINE_COLOR, TRAINING_AREAS_AOI_OUTLINE_WIDTH } from "@/utils";
 
 export function setupTerraDraw(map: maplibregl.Map) {
   return new TerraDraw({
@@ -47,16 +48,16 @@ export function setupTerraDraw(map: maplibregl.Map) {
         },
         styles: {
           // Fill colour (a string containing a 6 digit Hex color)
-          fillColor: "#d63f40",
+          fillColor: TRAINING_AREAS_AOI_FILL_COLOR,
 
           // Fill opacity (0 - 1)
-          fillOpacity: 0.3,
+          fillOpacity: TRAINING_AREAS_AOI_FILL_OPACITY,
 
           // Outline colour (Hex color)
-          outlineColor: "#d63f40",
+          outlineColor: TRAINING_AREAS_AOI_OUTLINE_COLOR,
 
           //Outline width (Integer)
-          outlineWidth: 4,
+          outlineWidth: TRAINING_AREAS_AOI_OUTLINE_WIDTH,
         },
       }),
     ],

diff --git a/frontend/src/features/model-creation/components/training-area/training-area-map.tsx b/frontend/src/features/model-creation/components/training-area/training-area-map.tsx
@@ -17,9 +17,13 @@ import {
   MIN_TRAINING_AREA_SIZE,
   snapGeoJSONGeometryToClosestTile,
   TRAINING_AREAS_AOI_FILL_COLOR,
+  TRAINING_AREAS_AOI_FILL_OPACITY,
   TRAINING_AREAS_AOI_LABELS_FILL_COLOR,
+  TRAINING_AREAS_AOI_LABELS_FILL_OPACITY,
   TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR,
+  TRAINING_AREAS_AOI_LABELS_OUTLINE_WIDTH,
   TRAINING_AREAS_AOI_OUTLINE_COLOR,
+  TRAINING_AREAS_AOI_OUTLINE_WIDTH,
   TRAINING_LABELS_MIN_ZOOM_LEVEL,
   validateGeoJSONArea,
 } from "@/utils";
@@ -169,7 +173,7 @@ const TrainingAreaMap = ({
         source: trainingAreasSourceId,
         paint: {
           "fill-color": TRAINING_AREAS_AOI_FILL_COLOR,
-          "fill-opacity": 0.4,
+          "fill-opacity": TRAINING_AREAS_AOI_FILL_OPACITY,
         },
         layout: { visibility: "visible" },
       });
@@ -181,7 +185,7 @@ const TrainingAreaMap = ({
         source: trainingAreasSourceId,
         paint: {
           "line-color": TRAINING_AREAS_AOI_OUTLINE_COLOR,
-          "line-width": 4,
+          "line-width": TRAINING_AREAS_AOI_OUTLINE_WIDTH,
         },
         layout: { visibility: "visible" },
       });
@@ -194,7 +198,7 @@ const TrainingAreaMap = ({
         source: trainingDatasetLabelsSourceId,
         paint: {
           "fill-color": TRAINING_AREAS_AOI_LABELS_FILL_COLOR,
-          "fill-opacity": 0.3,
+          "fill-opacity": TRAINING_AREAS_AOI_LABELS_FILL_OPACITY,
         },
         minzoom: TRAINING_LABELS_MIN_ZOOM_LEVEL,
         layout: { visibility: "visible" },
@@ -207,7 +211,7 @@ const TrainingAreaMap = ({
         source: trainingDatasetLabelsSourceId,
         paint: {
           "line-color": TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR,
-          "line-width": 2,
+          "line-width": TRAINING_AREAS_AOI_LABELS_OUTLINE_WIDTH,
         },
         minzoom: TRAINING_LABELS_MIN_ZOOM_LEVEL,
         layout: { visibility: "visible" },
@@ -421,22 +425,22 @@ const TrainingAreaMap = ({
         { value: "TMS Layer", subLayers: [TMSLayerId] },
         ...(data?.results?.features?.length
           ? [
-              {
-                value: "Training Areas",
-                subLayers: [trainingAreasLayerId, trainingAreasFillLayerId],
-              },
-            ]
+            {
+              value: "Training Areas",
+              subLayers: [trainingAreasLayerId, trainingAreasFillLayerId],
+            },
+          ]
           : []),
         ...(labels && labels?.features.length > 0
           ? [
-              {
-                value: "Training Labels",
-                subLayers: [
-                  trainingDatasetLabelsLayerId,
-                  trainingDatasetLabelsOutlineLayerId,
-                ],
-              },
-            ]
+            {
+              value: "Training Labels",
+              subLayers: [
+                trainingDatasetLabelsLayerId,
+                trainingDatasetLabelsOutlineLayerId,
+              ],
+            },
+          ]
           : []),
       ]}
     >

diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
@@ -83,9 +83,13 @@ export const MAX_ZOOM_LEVEL = 22;
 export const TRAINING_LABELS_MIN_ZOOM_LEVEL = 18;
 
 /**
- * Training area and labels colors in hex codes.
+ * Training area and labels styles.
  */
 export const TRAINING_AREAS_AOI_FILL_COLOR = "#92B48766";
 export const TRAINING_AREAS_AOI_OUTLINE_COLOR = "#92B48766";
+export const TRAINING_AREAS_AOI_OUTLINE_WIDTH = 4;
+export const TRAINING_AREAS_AOI_FILL_OPACITY = 0.4;
+export const TRAINING_AREAS_AOI_LABELS_FILL_OPACITY = 0.3;
+export const TRAINING_AREAS_AOI_LABELS_OUTLINE_WIDTH = 2
 export const TRAINING_AREAS_AOI_LABELS_FILL_COLOR = "#D73434";
 export const TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR = "#D73434";