Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(google-maps): Add Layer components. (#19604)
* feat(google-maps): Add Layer components. Implement components to easily add a traffic, transit or bicycling layer to an Angular Google Map. * feat(google-maps): Add Layer components. Fix comment for autoRefresh property of Traffic Layer. * feat(google-maps): Add layer components Add a base class for the transit and bicycling layers. * feat(google-maps): Add Layer components. Fix circleci error with MapBaseLayer not being part of a module. * feat(google-maps): Add Layer components Update public api with base layer class.
- Loading branch information
Showing
13 changed files
with
602 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265 | ||
/// <reference types="googlemaps" /> | ||
|
||
import {Directive, NgZone, OnDestroy, OnInit} from '@angular/core'; | ||
|
||
import {GoogleMap} from './google-map/google-map'; | ||
|
||
@Directive({ | ||
selector: 'map-base-layer', | ||
exportAs: 'mapBaseLayer', | ||
}) | ||
export class MapBaseLayer implements OnInit, OnDestroy { | ||
constructor(protected readonly _map: GoogleMap, protected readonly _ngZone: NgZone) {} | ||
|
||
ngOnInit() { | ||
if (this._map._isBrowser) { | ||
this._ngZone.runOutsideAngular(() => { | ||
this._initializeObject(); | ||
}); | ||
this._assertInitialized(); | ||
this._setMap(); | ||
} | ||
} | ||
|
||
ngOnDestroy() { | ||
this._unsetMap(); | ||
} | ||
|
||
private _assertInitialized() { | ||
if (!this._map.googleMap) { | ||
throw Error( | ||
'Cannot access Google Map information before the API has been initialized. ' + | ||
'Please wait for the API to load before trying to interact with it.'); | ||
} | ||
} | ||
|
||
protected _initializeObject() {} | ||
protected _setMap() {} | ||
protected _unsetMap() {} | ||
} |
54 changes: 54 additions & 0 deletions
54
src/google-maps/map-bicycling-layer/map-bicycling-layer.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import {Component} from '@angular/core'; | ||
import {async, TestBed} from '@angular/core/testing'; | ||
|
||
import {DEFAULT_OPTIONS} from '../google-map/google-map'; | ||
import {GoogleMapsModule} from '../google-maps-module'; | ||
import { | ||
createBicyclingLayerConstructorSpy, | ||
createBicyclingLayerSpy, | ||
createMapConstructorSpy, | ||
createMapSpy, | ||
} from '../testing/fake-google-map-utils'; | ||
|
||
describe('MapBicyclingLayer', () => { | ||
let mapSpy: jasmine.SpyObj<google.maps.Map>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
imports: [GoogleMapsModule], | ||
declarations: [TestApp], | ||
}); | ||
})); | ||
|
||
beforeEach(() => { | ||
TestBed.compileComponents(); | ||
|
||
mapSpy = createMapSpy(DEFAULT_OPTIONS); | ||
createMapConstructorSpy(mapSpy).and.callThrough(); | ||
}); | ||
|
||
afterEach(() => { | ||
delete window.google; | ||
}); | ||
|
||
it('initializes a Google Map Bicycling Layer', () => { | ||
const bicyclingLayerSpy = createBicyclingLayerSpy(); | ||
const bicyclingLayerConstructorSpy = | ||
createBicyclingLayerConstructorSpy(bicyclingLayerSpy).and.callThrough(); | ||
|
||
const fixture = TestBed.createComponent(TestApp); | ||
fixture.detectChanges(); | ||
|
||
expect(bicyclingLayerConstructorSpy).toHaveBeenCalled(); | ||
expect(bicyclingLayerSpy.setMap).toHaveBeenCalledWith(mapSpy); | ||
}); | ||
}); | ||
|
||
@Component({ | ||
selector: 'test-app', | ||
template: `<google-map> | ||
<map-bicycling-layer></map-bicycling-layer> | ||
</google-map>`, | ||
}) | ||
class TestApp { | ||
} |
55 changes: 55 additions & 0 deletions
55
src/google-maps/map-bicycling-layer/map-bicycling-layer.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265 | ||
/// <reference types="googlemaps" /> | ||
|
||
import {Directive} from '@angular/core'; | ||
|
||
import {MapBaseLayer} from '../map-base-layer'; | ||
|
||
/** | ||
* Angular component that renders a Google Maps Bicycling Layer via the Google Maps JavaScript API. | ||
* | ||
* See developers.google.com/maps/documentation/javascript/reference/map#BicyclingLayer | ||
*/ | ||
@Directive({ | ||
selector: 'map-bicycling-layer', | ||
exportAs: 'mapBicyclingLayer', | ||
}) | ||
export class MapBicyclingLayer extends MapBaseLayer { | ||
/** | ||
* The underlying google.maps.BicyclingLayer object. | ||
* | ||
* See developers.google.com/maps/documentation/javascript/reference/map#BicyclingLayer | ||
*/ | ||
bicyclingLayer?: google.maps.BicyclingLayer; | ||
|
||
protected _initializeObject() { | ||
this.bicyclingLayer = new google.maps.BicyclingLayer(); | ||
} | ||
|
||
protected _setMap() { | ||
this._assertLayerInitialized(); | ||
this.bicyclingLayer.setMap(this._map.googleMap!); | ||
} | ||
|
||
protected _unsetMap() { | ||
if (this.bicyclingLayer) { | ||
this.bicyclingLayer.setMap(null); | ||
} | ||
} | ||
|
||
private _assertLayerInitialized(): asserts this is {bicyclingLayer: google.maps.BicyclingLayer} { | ||
if (!this.bicyclingLayer) { | ||
throw Error( | ||
'Cannot interact with a Google Map Bicycling Layer before it has been initialized. ' + | ||
'Please wait for the Transit Layer to load before trying to interact with it.'); | ||
} | ||
} | ||
} |
58 changes: 58 additions & 0 deletions
58
src/google-maps/map-traffic-layer/map-traffic-layer.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import {Component} from '@angular/core'; | ||
import {async, TestBed} from '@angular/core/testing'; | ||
|
||
import {DEFAULT_OPTIONS} from '../google-map/google-map'; | ||
import {GoogleMapsModule} from '../google-maps-module'; | ||
import { | ||
createMapConstructorSpy, | ||
createMapSpy, | ||
createTrafficLayerConstructorSpy, | ||
createTrafficLayerSpy, | ||
} from '../testing/fake-google-map-utils'; | ||
|
||
describe('MapTrafficLayer', () => { | ||
let mapSpy: jasmine.SpyObj<google.maps.Map>; | ||
const trafficLayerOptions: google.maps.TrafficLayerOptions = {autoRefresh: false}; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
imports: [GoogleMapsModule], | ||
declarations: [TestApp], | ||
}); | ||
})); | ||
|
||
beforeEach(() => { | ||
TestBed.compileComponents(); | ||
|
||
mapSpy = createMapSpy(DEFAULT_OPTIONS); | ||
createMapConstructorSpy(mapSpy).and.callThrough(); | ||
}); | ||
|
||
afterEach(() => { | ||
delete window.google; | ||
}); | ||
|
||
it('initializes a Google Map Traffic Layer', () => { | ||
const trafficLayerSpy = createTrafficLayerSpy(trafficLayerOptions); | ||
const trafficLayerConstructorSpy = | ||
createTrafficLayerConstructorSpy(trafficLayerSpy).and.callThrough(); | ||
|
||
const fixture = TestBed.createComponent(TestApp); | ||
fixture.componentInstance.autoRefresh = false; | ||
fixture.detectChanges(); | ||
|
||
expect(trafficLayerConstructorSpy).toHaveBeenCalledWith(trafficLayerOptions); | ||
expect(trafficLayerSpy.setMap).toHaveBeenCalledWith(mapSpy); | ||
}); | ||
}); | ||
|
||
@Component({ | ||
selector: 'test-app', | ||
template: `<google-map> | ||
<map-traffic-layer [autoRefresh]="autoRefresh"> | ||
</map-traffic-layer> | ||
</google-map>`, | ||
}) | ||
class TestApp { | ||
autoRefresh?: boolean; | ||
} |
Oops, something went wrong.