feat: support google maps drawing library (#1749)

Add Drawing library to support DrawingManager

Author: doom777

README.md

@@ -23,6 +23,7 @@ This project is a mono repo and hosts multiple packages:
 | @agm/core                | [![@agm/core](https://img.shields.io/npm/dm/@agm/core.svg)](https://www.npmjs.com/package/@agm/core)                                              |
 | @agm/snazzy-info-window  | [![@agm/snazzy-info-window](https://img.shields.io/npm/dm/@agm/snazzy-info-window.svg)](https://www.npmjs.com/package/@agm/snazzy-info-window)    |
 | @agm/js-marker-clusterer | [![@agm/js-marker-clusterer](https://img.shields.io/npm/dm/@agm/js-marker-clusterer.svg)](https://www.npmjs.com/package/@agm/js-marker-clusterer) |
+| @agm/drawing | [![@agm/drawing](https://img.shields.io/npm/dm/@agm/drawing.svg)](https://www.npmjs.com/package/@agm/drawing) |
 
 ---
 
@@ -34,7 +35,7 @@ If you just want to play with AGM and don't want to set up a full project, you c
 
 ## Installation
 
-`AGM` gets shipped via the Node Package Manager. So make sure that you have [NodeJS](https://nodejs.org) installed.  
+`AGM` gets shipped via the Node Package Manager. So make sure that you have [NodeJS](https://nodejs.org) installed.
 You can install the package with the following command:
 
 ```shell

docs/content/api-docs/index.md

@@ -6,9 +6,11 @@ title = "API Docs for Angular Google Maps"
 
 **Here you find the API docs for the @agm Packages:**
 
-* [@agm/core](https://angular-maps.com/api-docs/agm-core/modules/AgmCoreModule.html)  
+* [@agm/core](https://angular-maps.com/api-docs/agm-core/modules/AgmCoreModule.html)
   Provides Angular integration solutions for the official Google Maps Core API v3
-* [@agm/snazzy-info-window](https://angular-maps.com/api-docs/agm-snazzy-info-window/modules/AgmSnazzyInfoWindowModule.html)  
+* [@agm/snazzy-info-window](https://angular-maps.com/api-docs/agm-snazzy-info-window/modules/AgmSnazzyInfoWindowModule.html)
   Styled Info Windows with [Snazzy Info Window](https://github.com/atmist/snazzy-info-window)
-* [@agm/js-marker-clusterer](https://angular-maps.com/api-docs/js-marker-clusterer/modules/AgmJsMarkerClustererModule.html)  
-  Clustered markers with [googlemaps/js-marker-clusterer](https://github.com/googlemaps/js-marker-clusterer)
+* [@agm/js-marker-clusterer](https://angular-maps.com/api-docs/js-marker-clusterer/modules/AgmJsMarkerClustererModule.html)
+  Clustered markers with [googlemaps/js-marker-clusterer](https://github.com/googlemaps/js-marker-clusterer)
+* [@agm/drawing](https://angular-maps.com/api-docs/drawing/modules/AgmDrawingModule.html)
+  Drawing on the map with

docs/content/guides/drawing/drawing.md

@@ -0,0 +1,63 @@
++++
+date = "2017-08-31T13:51:15-05:00"
+draft = false
+title = "google.maps.drawing.DrawingManager in AGM"
++++
+
+Angular Google Maps provides a package that allows users to draw new shapes on the map, integrating google.maps.drawing.DrawingManager
+
+## Install the needed packages
+First make sure that you install the following NPM packages:
+
+```bash
+npm install @agm/core @agm/drawing
+```
+
+## Loading the modules
+
+Update your root component (e.g. src/app/app.module.ts) and import the following modules:
+
+```typescript
+import { AgmCoreModule } from '@agm/core';
+import { AgmDrawingModule } from '@agm/drawing';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AgmCoreModule.forRoot({
+      apiKey: ['YOUR_API_KEY_HERE']
+    }),
+    AgmDrawingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+## Using the directive
+
+When you import the `AgmDrawingManager`, you can use the `agm-drawing-manager` directive  in your
+template. Agm-drawing-manager takes form of an html elements outside the `agm-map` component, where
+it is configured with properties. It is connected to the map via `agmDrawingManager` trigger
+directive, similar to MatAutocomplete from angular/components library.
+
+```html
+<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982" [agmDrawingManager]="drawing">
+</agm-map>
+<agm-drawing-manager #drawing="agmDrawingManager" (circleComplete)="circleAdded($event)" [drawingMode]="'circle'" [circleOptions]="{fillColor:'red', radius: 150}"></agm-drawing-manager>
+```
+
+### Customizing drawn figures
+
+If you want to control how the figures the user draws will look like, specifically colors,
+line thickness, opacity, et cetera, you can provide CircleOptions or PolylineOptions
+to the drawing manager, similar how you would do in vanilla javascript with Google Maps javascript.
+
+### Ignored properties
+
+These \*Options interfaces are originally made for the developer displaying the shapes, so they have
+properties useless to us such as `map` and `center`. These properties are ignored.

package.json

@@ -20,16 +20,18 @@
   "packages": [
     "packages/core",
     "packages/js-marker-clusterer",
-    "packages/snazzy-info-window"
+    "packages/snazzy-info-window",
+    "packages/drawing-manager"
   ],
   "scripts": {
     "clean": "rimraf dist node_modules/@agm 'packages/**/*.ngfactory.ts' && mkdirp dist",
     "prebuild": "yarn clean",
     "build": "yarn lint && yarn build:all",
-    "build:all": "yarn build:core && yarn packagejson && mkdirp node_modules/@agm/core && ncp dist/@agm/core node_modules/@agm/core && yarn build:js-marker-clusterer && yarn build:snazzy-info-window && yarn packagejson",
+    "build:all": "yarn build:core && yarn packagejson && mkdirp node_modules/@agm/core && ncp dist/@agm/core node_modules/@agm/core && yarn build:js-marker-clusterer && yarn build:snazzy-info-window && yarn build:drawing && yarn packagejson",
     "build:core": "ng-packagr -p packages/core/package.json",
     "build:js-marker-clusterer": "ng-packagr -p packages/js-marker-clusterer/package.json",
     "build:snazzy-info-window": "ng-packagr -p packages/snazzy-info-window/package.json",
+    "build:drawing": "ng-packagr -p packages/drawing/package.json",
     "lint": "tslint --project tsconfig.json -c tslint.json 'packages/**/*.ts'",
     "packagejson": "node ./scripts/update-package-json.js",
     "clang:format": "clang-format --glob=packages/**/*.ts -i",
@@ -39,10 +41,11 @@
     "docs:clean": "rimraf docs/public",
     "docs:hugo": "cd docs && hugo",
     "docs:injectga": "node scripts/inject-google-analytics.js",
-    "docs": "yarn docs:hugo && yarn apidocs:core && yarn apidocs:snazzy && yarn apidocs:jsmarkerclusterer",
+    "docs": "yarn docs:hugo && yarn apidocs:core && yarn apidocs:snazzy && yarn apidocs:jsmarkerclusterer && yarn apidocs:drawing",
     "apidocs:core": "compodoc -p packages/core/tsconfig.compodoc.json --name @agm/core --output docs/public/api-docs/agm-core/  --hideGenerator --disableCoverage",
     "apidocs:snazzy": "compodoc -p packages/snazzy-info-window/tsconfig.compodoc.json --name @agm/snazzy-info-window  --output docs/public/api-docs/agm-snazzy-info-window/ --hideGenerator --disableCoverage",
-    "apidocs:jsmarkerclusterer": "compodoc -p packages/js-marker-clusterer/tsconfig.compodoc.json --name @agm/js-marker-clusterer  --output docs/public/api-docs/js-marker-clusterer/ --hideGenerator --disableCoverage"
+    "apidocs:jsmarkerclusterer": "compodoc -p packages/js-marker-clusterer/tsconfig.compodoc.json --name @agm/js-marker-clusterer  --output docs/public/api-docs/js-marker-clusterer/ --hideGenerator --disableCoverage",
+    "apidocs:drawing": "compodoc -p packages/drawing/tsconfig.compodoc.json --name @agm/drawing  --output docs/public/api-docs/drawing/ --hideGenerator --disableCoverage"
   },
   "author": "Sebastian Holstein <[email protected]>",
   "license": "MIT",
@@ -97,4 +100,4 @@
   "dependencies": {
     "yarn": "^1.17.3"
   }
-}
+}

packages/core/directives/marker.ts

@@ -1,6 +1,6 @@
 import { AfterContentInit, ContentChildren, Directive, EventEmitter, forwardRef, Input, OnChanges, OnDestroy, Output, QueryList, SimpleChange } from '@angular/core';
 import { Observable, ReplaySubject, Subscription } from 'rxjs';
-import { MarkerLabel, MouseEvent } from '../map-types';
+import { MouseEvent } from '../map-types';
 import { FitBoundsAccessor, FitBoundsDetails } from '../services/fit-bounds';
 import * as mapTypes from '../services/google-maps-types';
 import { MarkerManager } from '../services/managers/marker-manager';
@@ -61,7 +61,7 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit, FitBou
   /**
    * The label (a single uppercase character) for the marker.
    */
-  @Input() label: string | MarkerLabel;
+  @Input() label: string | mapTypes.MarkerLabel;
 
   /**
    * If true, the marker can be dragged. Default value is false.

packages/core/index.ts

@@ -3,9 +3,6 @@ export * from './directives';
 export * from './services';
 export * from './map-types';
 
-// Google Maps types
-export { LatLngBounds, LatLng, LatLngLiteral, MapTypeStyle, Padding, PolyMouseEvent } from './services/google-maps-types';
-
 // core module
 // we explicitly export the module here to prevent this Ionic 2 bug:
 // http://stevemichelotti.com/integrate-angular-2-google-maps-into-ionic-2/

packages/core/map-types.ts

@@ -18,6 +18,30 @@ export {
   GeocoderRequest,
   GeocoderResult,
   GeocoderStatus,
+  MapTypeStyle,
+  Padding,
+  ControlPosition,
+  OverviewMapControlOptions,
+  PanControlOptions,
+  RotateControlOptions,
+  MapTypeControlOptions,
+  MapTypeId,
+  ScaleControlOptions,
+  ScaleControlStyle,
+  StreetViewControlOptions,
+  ZoomControlOptions,
+  ZoomControlStyle,
+  FullscreenControlOptions,
+  CircleOptions,
+  Circle,
+  Polyline,
+  PolylineOptions,
+  Polygon,
+  PolygonOptions,
+  Rectangle,
+  RectangleOptions,
+  Marker,
+  MarkerOptions,
 } from './services/google-maps-types';
 
 /**

packages/drawing/LICENSE

@@ -0,0 +1 @@
+../../LICENSE

packages/drawing/README.md

@@ -0,0 +1,52 @@
+# Map Drawing for AGM
+
+-----
+
+this package adds drawing support to [AGM][agm].
+
+## Installation
+
+```sh
+npm install @agm/drawing
+# or
+yarn add @agm/drawing
+```
+
+## Usage
+
+1. Import the module
+
+```typescript
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component
+// add these imports
+import { AgmCoreModule } from '@agm/core';
+import { AgmDrawingModule } from '@agm/drawing
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AgmCoreModule.forRoot({
+      apiKey: ['YOUR_API_KEY_HERE']
+    }),
+    AgmDrawingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+2. use it in your template
+
+```html
+<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982" [agmDrawingManager]="drawing">
+</agm-map>
+<agm-drawing-manager #drawing="agmDrawingManager" [drawingMode]="'circle'" [circleOptions]="{fillColor:'red', radius: 150}"></agm-drawing-manager>
+```
+
+
+[drawing-manager]: https://developers.google.com/maps/documentation/javascript/reference/#drawing
+[agm]: https://angular-maps.com/

packages/drawing/directives/drawing-manager-trigger.ts

@@ -0,0 +1,26 @@
+import { AgmMap } from '@agm/core';
+import { AfterViewInit, Directive, Host, Input, OnDestroy } from '@angular/core';
+import { first } from 'rxjs/operators';
+import { AgmDrawingManager } from './drawing-manager';
+
+@Directive({
+  selector: 'agm-map[agmDrawingManager]',
+  exportAs: 'matDrawingManagerTrigger',
+})
+export class AgmDrawingManagerTrigger implements AfterViewInit, OnDestroy{
+
+  /** The drawing manager to be attached to this trigger. */
+  // tslint:disable-next-line: no-input-rename
+  @Input('agmDrawingManager') drawingManager: AgmDrawingManager;
+
+  constructor(@Host() private _agmMap: AgmMap) {
+  }
+
+  ngAfterViewInit(): void {
+    this._agmMap.mapReady.pipe(first()).subscribe(map => this.drawingManager.setMap(map));
+  }
+
+  ngOnDestroy() {
+    this._agmMap.mapReady.pipe(first()).subscribe(() => this.drawingManager.setMap(null));
+  }
+}