Dynamically use labeled icons

googlemaps · Jul 22, 2024 · 13e3e35 · 13e3e35
1 parent 45b9353
commit 13e3e35
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 36 deletions.
diff --git a/application/frontend/src/app/core/services/base-visit-request-layer.service.ts b/application/frontend/src/app/core/services/base-visit-request-layer.service.ts
@@ -129,6 +129,15 @@ export abstract class BaseVisitRequestLayer {
     return 1.75;
   }
 
+  protected getIcon(data): string {
+    const color = (data.color && data.color.name) || this.defaultSelectedColor;
+    const key = data.pickup ? `pickup-${color}` : `dropoff-${color}`;
+    return key in this.iconMapping
+      ? key
+      : data.pickup
+      ? `pickup-${this.defaultSelectedColor}`
+      : `dropoff-${this.defaultSelectedColor}`;
+  }
 
   abstract getDefaultIconFn(data): string;
   protected onDataFiltered(data): void {
@@ -162,18 +171,7 @@ export abstract class BaseVisitRequestLayer {
       data,
       iconAtlas: this.getIconAtlas(),
       iconMapping: this.getIconMapping(),
-      getIcon: (d) => {
-        // Clamp to 100, whereafter all labels are "99+"
-        const stopOrder = Math.min(d.stopOrder, 100);
-        const color = (d.color && d.color.name) || this.defaultSelectedColor;
-        const key = d.pickup ? `pickup-${color}-${stopOrder}` : `dropoff-${color}-${stopOrder}`;
-        return key;
-        // return key in this.iconMapping
-        //   ? key
-        //   : d.pickup
-        //   ? `pickup-${this.defaultSelectedColor}`
-        //   : `dropoff-${this.defaultSelectedColor}`;
-      },
+      getIcon: (d) => this.getIcon(d),
       getSize: 10,
       sizeScale: this.getSizeScale(),
       getPosition: (d) => d.arrivalPosition,
@@ -190,18 +188,7 @@ export abstract class BaseVisitRequestLayer {
       data,
       iconAtlas: this.getIconAtlas(),
       iconMapping: this.getIconMapping(),
-      getIcon: (d) => {
-        if (!d.selected) {
-          return this.getDefaultIconFn(d);
-        }
-        const color = (d.color && d.color.name) || this.defaultSelectedColor;
-        const key = d.pickup ? `pickup-${color}` : `dropoff-${color}`;
-        return key in this.iconMapping
-          ? key
-          : d.pickup
-          ? `pickup-${this.defaultSelectedColor}`
-          : `dropoff-${this.defaultSelectedColor}`;
-      },
+      getIcon: (d) => (d.selected ? this.getDefaultIconFn(data) : this.getIcon(data)),
       getSize: 12,
       sizeScale: this.getSizeScale(),
       getPosition: (d) => d.arrivalPosition,

diff --git a/application/frontend/src/app/core/services/post-solve-visit-request-layer.service.ts b/application/frontend/src/app/core/services/post-solve-visit-request-layer.service.ts
@@ -18,7 +18,6 @@ import { Injectable, NgZone } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { State } from 'src/app/reducers';
 import {
-  selectFilteredVisitRequestsSelected,
   selectFilteredVisitRequestsSelectedWithStopOrder,
   selectFilteredVisitRequestsWithStopOrder,
   selectMouseOverVisitRequest,
@@ -37,13 +36,13 @@ export class PostSolveVisitRequestLayer extends BaseVisitRequestLayer {
 
   canShowTextLayer = false;
 
-  readonly capsuleIconSize: [number, number] = [78, 31];
+  readonly capsuleIconSize: [number, number] = [78, 24.85714285714285];
   private capsuleIconMapping = {};
 
   constructor(mapService: MapService, store: Store<State>, zone: NgZone) {
     super(mapService, store, zone);
 
-     this.createLabeledIconMapping();
+    this.createLabeledIconMapping();
 
     combineLatest([
       this.store.pipe(select(selectFilteredVisitRequestsWithStopOrder)),
@@ -71,7 +70,7 @@ export class PostSolveVisitRequestLayer extends BaseVisitRequestLayer {
   }
 
   createLabeledIconMapping(): any {
-    this.capsuleIconMapping = {}
+    this.capsuleIconMapping = {};
     // dynamically create icon mapping based on sprite
     for (let i = 0; i < this.iconMappingOrder.length; i++) {
       for (let stopOrder = 1; stopOrder < 101; stopOrder++) {
@@ -82,22 +81,24 @@ export class PostSolveVisitRequestLayer extends BaseVisitRequestLayer {
           width: this.capsuleIconSize[0],
           // clip height by 1 pixel to reduce a noticeable artifact that's more
           // prominent on deliveries when zoomed out
-          height: this.capsuleIconSize[1] - 1,
+          height: this.capsuleIconSize[1],
         };
       }
     }
-    console.log(this.capsuleIconMapping)
   }
 
-
   getDefaultIconFn(data: any): string {
+    if (!this.canShowTextLayer) {
+      return data.pickup ? `pickup-${this.defaultColor}` : `dropoff-${this.defaultColor}`;
+    }
+    const stopOrder = Math.min(data.stopOrder, 100);
     return data.made
       ? data.pickup
-        ? `pickup-${this.defaultColor}`
-        : `dropoff-${this.defaultColor}`
+        ? `pickup-${this.defaultColor}-${stopOrder}`
+        : `dropoff-${this.defaultColor}-${stopOrder}`
       : data.pickup
-      ? `pickup-${this.defaultColor}-skipped`
-      : `dropoff-${this.defaultColor}-skipped`;
+      ? `pickup-${this.defaultColor}-skipped-${stopOrder}`
+      : `dropoff-${this.defaultColor}-skipped-${stopOrder}`;
   }
 
   protected getIconAtlas(): string {
@@ -107,10 +108,22 @@ export class PostSolveVisitRequestLayer extends BaseVisitRequestLayer {
   }
 
   protected getSizeScale(): number {
-    return this.canShowTextLayer ? 2.5 : super.getSizeScale();
+    return this.canShowTextLayer ? 2.0 : super.getSizeScale();
   }
 
   protected getIconMapping(): any {
     return this.canShowTextLayer ? this.capsuleIconMapping : this.iconMapping;
   }
+
+  protected getIcon(data: any): string {
+    if (!this.canShowTextLayer) {
+      return super.getIcon(data);
+    }
+
+    // Clamp to 100, whereafter all labels are "99+"
+    const stopOrder = Math.min(data.stopOrder, 100);
+    const color = (data.color && data.color.name) || this.defaultSelectedColor;
+    const key = data.pickup ? `pickup-${color}-${stopOrder}` : `dropoff-${color}-${stopOrder}`;
+    return key;
+  }
 }