Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use AdvancedMarkerElements and add index to markers on map #2109

Merged
merged 6 commits into from
Dec 11, 2024
Merged

Use AdvancedMarkerElements and add index to markers on map #2109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b94ed81
Use AdvancedMarkerElements and add index to markers on map
amysorto Nov 27, 2024
509b96d
Fix failing map component tests
amysorto Nov 27, 2024
c08a85b
Fix lint errors
amysorto Nov 27, 2024
3a3a1e9
Pull out some map setup logic into helper functions
amysorto Nov 27, 2024
95bcd1f
Merge branch 'master' into geo-annotations
rfontanarosa Nov 29, 2024
dd7748c
Merge branch 'master' into geo-annotations
gino-m Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/pretest.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
2 changes: 1 addition & 1 deletion web/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
62 changes: 21 additions & 41 deletions web/src/app/pages/main-page-container/main-page/map/map.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>;
Expand Down Expand Up @@ -179,6 +177,7 @@ describe('MapComponent', () => {
'NavigationService',
[
'getLocationOfInterestId$',
'getTaskId$',
'getSubmissionId$',
'selectLocationOfInterest',
'clearLocationOfInterestId',
Expand All @@ -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)
);
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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, [
Expand All @@ -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', {
Expand Down Expand Up @@ -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(() => {
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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(
Expand Down
Loading
Loading