refacto: simplify cross icon

benoitdemaegdt · May 5, 2024 · 740a244 · 740a244
1 parent 2cd39c0
commit 740a244
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 31 deletions.
diff --git a/composables/useColors.ts b/composables/useColors.ts
@@ -1,21 +1,4 @@
 export const useColors = () => {
-  function getAllColors(): string[] {
-    const colors = [
-      '#60A75B',
-      '#AC4D35',
-      '#3B7B64',
-      '#DC8953',
-      '#AF7392',
-      '#396083',
-      '#75BCAE',
-      '#7E6D98',
-      '#EAAB50',
-      '#9A8A4B',
-      '#4DADC9',
-      '#DBABB7'
-    ];
-    return colors;
-  }
   function getLineColor(line: number): string {
     const colors = new Map();
     colors.set(1, '#60A75B');
@@ -33,5 +16,5 @@ export const useColors = () => {
     return colors.get(line);
   }
 
-  return { getAllColors, getLineColor };
+  return { getLineColor };
 };
diff --git a/composables/useMap.ts b/composables/useMap.ts
@@ -25,7 +25,7 @@ function sortByLine(featureA: LineStringFeature, featureB: LineStringFeature) {
   return sortOrder.indexOf(lineA) - sortOrder.indexOf(lineB);
 }
 
-function getCrossIconUrl(color: string): string {
+function getCrossIconUrl(): string {
   const canvas = document.createElement('canvas');
   canvas.width = 8; // Set the desired width of your icon
   canvas.height = 8; // Set the desired height of your icon
@@ -38,16 +38,14 @@ function getCrossIconUrl(color: string): string {
   context.beginPath();
   context.moveTo(0, 0);
   context.lineTo(canvas.width, canvas.height);
-  context.lineWidth = 2;
-  context.strokeStyle = color; // Set the strokeStyle to apply the color
+  context.lineWidth = 3;
   context.stroke();
 
   // Draw the second diagonal line of the "X"
   context.beginPath();
   context.moveTo(0, canvas.height);
   context.lineTo(canvas.width, 0);
-  context.lineWidth = 2;
-  context.strokeStyle = color; // Set the strokeStyle to apply the color
+  context.lineWidth = 3;
   context.stroke();
 
   return canvas.toDataURL();
@@ -68,7 +66,7 @@ function groupFeaturesByColor(features: ColoredLineStringFeature[]) {
 }
 
 export const useMap = () => {
-  const { getAllColors, getLineColor } = useColors();
+  const { getLineColor } = useColors();
 
   function addLineColor(feature: LineStringFeature): ColoredLineStringFeature {
     return {
@@ -97,12 +95,9 @@ export const useMap = () => {
     const camera = await map.loadImage('/icons/camera.png');
     map.addImage('camera-icon', camera.data, { sdf: true });
 
-    const colors = getAllColors();
-    for (const color of colors) {
-      const crossIconUrl = getCrossIconUrl(color);
-      const cross = await map.loadImage(crossIconUrl);
-      map.addImage(`cross-icon-${color}`, cross.data);
-    }
+    const crossIconUrl = getCrossIconUrl();
+    const cross = await map.loadImage(crossIconUrl);
+    map.addImage('cross-icon', cross.data, { sdf: true });
   }
 
   function plotUnderlinedSections({ map, features }: { map: Map; features: LineStringFeature[] }) {
@@ -431,8 +426,11 @@ export const useMap = () => {
         layout: {
           'symbol-placement': 'line',
           'symbol-spacing': 1,
-          'icon-image': `cross-icon-${color}`,
+          'icon-image': 'cross-icon',
           'icon-size': 1.2
+        },
+        paint: {
+          'icon-color': color
         }
       });
       map.addLayer({