Use AdvancedMarkerElements and add index to markers on map (#2109)

Co-authored-by: Roberto Fontanarosa <[email protected]> Co-authored-by: Gino Miceli <[email protected]>
google · Dec 11, 2024 · 093c337 · 093c337
1 parent a700d6c
commit 093c337
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 137 deletions.
diff --git a/web/pretest.sh b/web/pretest.sh
@@ -16,5 +16,5 @@
 echo "Running 'pretest.sh' script to download Google Maps API for testing..."
 rm google-maps-api.js
 date +"// Download time: %Y-%m-%d %H:%M" >> google-maps-api.js
-curl 'https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry' >> google-maps-api.js
+curl 'https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,marker' >> google-maps-api.js
 echo "'pretest.sh' finished"
diff --git a/web/src/app/app.component.ts b/web/src/app/app.component.ts
@@ -39,7 +39,7 @@ export class AppComponent {
   private initGoogleMap(): void {
     const script = this.doc.createElement('script');
     script.type = 'text/javascript';
-    script.src = `https://maps.googleapis.com/maps/api/js?key=${environment.googleMapsApiKey}`;
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${environment.googleMapsApiKey}&libraries=marker`;
     const head = this.doc.getElementsByTagName('head')[0];
     head.appendChild(script);
   }

diff --git a/web/src/app/pages/main-page-container/main-page/map/map.component.spec.ts b/web/src/app/pages/main-page-container/main-page/map/map.component.spec.ts
@@ -32,15 +32,12 @@ import {MultiPolygon} from 'app/models/geometry/multi-polygon';
 import {Point} from 'app/models/geometry/point';
 import {Job} from 'app/models/job.model';
 import {LocationOfInterest} from 'app/models/loi.model';
-import {Submission} from 'app/models/submission/submission.model';
 import {DataSharingType, Survey} from 'app/models/survey.model';
 import {AuthService} from 'app/services/auth/auth.service';
 import {
   DrawingToolsService,
   EditMode,
 } from 'app/services/drawing-tools/drawing-tools.service';
-import {GroundPinService} from 'app/services/ground-pin/ground-pin.service';
-import {LoadingState} from 'app/services/loading-state.model';
 import {LocationOfInterestService} from 'app/services/loi/loi.service';
 import {NavigationService} from 'app/services/navigation/navigation.service';
 import {SubmissionService} from 'app/services/submission/submission.service';
@@ -56,6 +53,7 @@ describe('MapComponent', () => {
   let mockLois$: BehaviorSubject<List<LocationOfInterest>>;
   let loiServiceSpy: jasmine.SpyObj<LocationOfInterestService>;
   let mockLocationOfInterestId$: BehaviorSubject<string | null>;
+  let mockTaskId$: BehaviorSubject<string | null>;
   let navigationServiceSpy: jasmine.SpyObj<NavigationService>;
   let submissionServiceSpy: jasmine.SpyObj<SubmissionService>;
   let mockEditMode$: BehaviorSubject<EditMode>;
@@ -179,6 +177,7 @@ describe('MapComponent', () => {
       'NavigationService',
       [
         'getLocationOfInterestId$',
+        'getTaskId$',
         'getSubmissionId$',
         'selectLocationOfInterest',
         'clearLocationOfInterestId',
@@ -189,6 +188,8 @@ describe('MapComponent', () => {
     navigationServiceSpy.getLocationOfInterestId$.and.returnValue(
       mockLocationOfInterestId$
     );
+    mockTaskId$ = new BehaviorSubject<string | null>(null);
+    navigationServiceSpy.getTaskId$.and.returnValue(mockTaskId$);
     navigationServiceSpy.getSubmissionId$.and.returnValue(
       of<string | null>(null)
     );
@@ -258,12 +259,12 @@ describe('MapComponent', () => {
     expect(component.markers.size).toEqual(2);
     const marker1 = component.markers.get(poiId1)!;
     assertMarkerLatLng(marker1, new google.maps.LatLng(4.56, 1.23));
-    assertMarkerIcon(marker1, jobColor1, 30);
-    expect(marker1.getMap()).toEqual(component.map.googleMap!);
+    expect(marker1.element.innerHTML).toContain(`fill="${jobColor1}"`);
+    expect(marker1.map).toEqual(component.map.googleMap!);
     const marker2 = component.markers.get(poiId2)!;
     assertMarkerLatLng(marker2, new google.maps.LatLng(45.6, 12.3));
-    assertMarkerIcon(marker2, jobColor2, 30);
-    expect(marker2.getMap()).toEqual(component.map.googleMap!);
+    expect(marker2.element.innerHTML).toContain(`fill="${jobColor2}"`);
+    expect(marker2.map).toEqual(component.map.googleMap!);
   });
 
   it('should render polygons on map - polygon loi', () => {
@@ -324,8 +325,8 @@ describe('MapComponent', () => {
       expect(component.markers.size).toEqual(1);
       const marker1 = component.markers.get(poiId1)!;
       assertMarkerLatLng(marker1, new google.maps.LatLng(4.56, 1.23));
-      assertMarkerIcon(marker1, jobColor1, 30);
-      expect(marker1.getMap()).toEqual(component.map.googleMap!);
+      expect(marker1.element.innerHTML).toContain(`fill="${jobColor1}"`);
+      expect(marker1.map).toEqual(component.map.googleMap!);
     }));
 
     it('should fit the map when survey changed', fakeAsync(() => {
@@ -362,12 +363,12 @@ describe('MapComponent', () => {
       expect(component.markers.size).toEqual(2);
       const marker1 = component.markers.get(poiId2)!;
       assertMarkerLatLng(marker1, new google.maps.LatLng(45.7, 12.3));
-      assertMarkerIcon(marker1, jobColor2, 30);
-      expect(marker1.getMap()).toEqual(component.map.googleMap!);
+      expect(marker1.element.innerHTML).toContain(`fill="${jobColor2}"`);
+      expect(marker1.map).toEqual(component.map.googleMap!);
       const marker2 = component.markers.get(poiId3)!;
       assertMarkerLatLng(marker2, new google.maps.LatLng(78.9, 78.9));
-      assertMarkerIcon(marker2, jobColor2, 30);
-      expect(marker2.getMap()).toEqual(component.map.googleMap!);
+      expect(marker2.element.innerHTML).toContain(`fill="${jobColor2}"`);
+      expect(marker2.map).toEqual(component.map.googleMap!);
       expect(component.polygons.size).toEqual(1);
       const [polygon] = component.polygons.get(polygonLoiId1)!;
       assertPolygonPaths(polygon, [
@@ -393,14 +394,6 @@ describe('MapComponent', () => {
     ).toHaveBeenCalledOnceWith(poiId1);
   });
 
-  it('should enlarge the marker when loi is selected', fakeAsync(() => {
-    mockLocationOfInterestId$.next(poiId1);
-    tick();
-
-    const marker1 = component.markers.get(poiId1)!;
-    assertMarkerIcon(marker1, jobColor1, 50);
-  }));
-
   it('should select loi when polygon is clicked', () => {
     const [polygon] = component.polygons.get(polygonLoiId1)!;
     google.maps.event.trigger(polygon, 'click', {
@@ -435,17 +428,17 @@ describe('MapComponent', () => {
 
   it('markers are not draggable by default', () => {
     const marker1 = component.markers.get(poiId1)!;
-    expect(marker1.getDraggable()).toBeFalse();
+    expect(marker1.gmpDraggable).toBeFalse();
     const marker2 = component.markers.get(poiId2)!;
-    expect(marker2.getDraggable()).toBeFalse();
+    expect(marker2.gmpDraggable).toBeFalse();
   });
 
   it('should set marker draggable when loi is selected', fakeAsync(() => {
     mockLocationOfInterestId$.next(poiId1);
     tick();
 
     const marker1 = component.markers.get(poiId1)!;
-    expect(marker1.getDraggable()).toBeTrue();
+    expect(marker1.gmpDraggable).toBeTrue();
   }));
 
   it('should not set marker draggable when loi is selected and drawing tools turned off', fakeAsync(() => {
@@ -454,7 +447,7 @@ describe('MapComponent', () => {
     tick();
 
     const marker1 = component.markers.get(poiId1)!;
-    expect(marker1.getDraggable()).toBeFalse();
+    expect(marker1.gmpDraggable).toBeFalse();
   }));
 
   it('reposition dialog is not displayed by default', () => {
@@ -662,24 +655,11 @@ describe('MapComponent', () => {
   }));
 
   function assertMarkerLatLng(
-    marker: google.maps.Marker,
+    marker: google.maps.marker.AdvancedMarkerElement,
     latLng: google.maps.LatLng
   ): void {
-    expect(marker.getPosition()?.lat()).toEqual(latLng.lat());
-    expect(marker.getPosition()?.lng()).toEqual(latLng.lng());
-  }
-
-  function assertMarkerIcon(
-    marker: google.maps.Marker,
-    iconColor: string,
-    iconSize: number
-  ): void {
-    const icon = marker.getIcon() as google.maps.Icon;
-    expect(atob(icon.url.slice(GroundPinService.urlPrefix.length))).toContain(
-      iconColor
-    );
-    expect(icon.scaledSize?.height).toEqual(iconSize);
-    expect(icon.scaledSize?.width).toEqual(iconSize);
+    expect(marker.position?.lat).toEqual(latLng.lat());
+    expect(marker.position?.lng).toEqual(latLng.lng());
   }
 
   function assertPolygonPaths(