Skip to content
This repository was archived by the owner on Jun 23, 2025. It is now read-only.

Commit a1a17a6

Browse files
authored
feat: support google maps drawing library (#1749)
Add Drawing library to support DrawingManager
1 parent 56a858e commit a1a17a6

File tree

17 files changed

+470
-15
lines changed

17 files changed

+470
-15
lines changed

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ This project is a mono repo and hosts multiple packages:
2323
| @agm/core | [![@agm/core](https://img.shields.io/npm/dm/@agm/core.svg)](https://www.npmjs.com/package/@agm/core) |
2424
| @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) |
2525
| @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) |
26+
| @agm/drawing | [![@agm/drawing](https://img.shields.io/npm/dm/@agm/drawing.svg)](https://www.npmjs.com/package/@agm/drawing) |
2627

2728
---
2829

@@ -34,7 +35,7 @@ If you just want to play with AGM and don't want to set up a full project, you c
3435

3536
## Installation
3637

37-
`AGM` gets shipped via the Node Package Manager. So make sure that you have [NodeJS](https://nodejs.org) installed.
38+
`AGM` gets shipped via the Node Package Manager. So make sure that you have [NodeJS](https://nodejs.org) installed.
3839
You can install the package with the following command:
3940

4041
```shell

docs/content/api-docs/index.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ title = "API Docs for Angular Google Maps"
66

77
**Here you find the API docs for the @agm Packages:**
88

9-
* [@agm/core](https://angular-maps.com/api-docs/agm-core/modules/AgmCoreModule.html)
9+
* [@agm/core](https://angular-maps.com/api-docs/agm-core/modules/AgmCoreModule.html)
1010
Provides Angular integration solutions for the official Google Maps Core API v3
11-
* [@agm/snazzy-info-window](https://angular-maps.com/api-docs/agm-snazzy-info-window/modules/AgmSnazzyInfoWindowModule.html)
11+
* [@agm/snazzy-info-window](https://angular-maps.com/api-docs/agm-snazzy-info-window/modules/AgmSnazzyInfoWindowModule.html)
1212
Styled Info Windows with [Snazzy Info Window](https://github.com/atmist/snazzy-info-window)
13-
* [@agm/js-marker-clusterer](https://angular-maps.com/api-docs/js-marker-clusterer/modules/AgmJsMarkerClustererModule.html)
14-
Clustered markers with [googlemaps/js-marker-clusterer](https://github.com/googlemaps/js-marker-clusterer)
13+
* [@agm/js-marker-clusterer](https://angular-maps.com/api-docs/js-marker-clusterer/modules/AgmJsMarkerClustererModule.html)
14+
Clustered markers with [googlemaps/js-marker-clusterer](https://github.com/googlemaps/js-marker-clusterer)
15+
* [@agm/drawing](https://angular-maps.com/api-docs/drawing/modules/AgmDrawingModule.html)
16+
Drawing on the map with
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
+++
2+
date = "2017-08-31T13:51:15-05:00"
3+
draft = false
4+
title = "google.maps.drawing.DrawingManager in AGM"
5+
+++
6+
7+
Angular Google Maps provides a package that allows users to draw new shapes on the map, integrating google.maps.drawing.DrawingManager
8+
9+
## Install the needed packages
10+
First make sure that you install the following NPM packages:
11+
12+
```bash
13+
npm install @agm/core @agm/drawing
14+
```
15+
16+
## Loading the modules
17+
18+
Update your root component (e.g. src/app/app.module.ts) and import the following modules:
19+
20+
```typescript
21+
import { AgmCoreModule } from '@agm/core';
22+
import { AgmDrawingModule } from '@agm/drawing';
23+
24+
@NgModule({
25+
declarations: [
26+
AppComponent
27+
],
28+
imports: [
29+
BrowserModule,
30+
AgmCoreModule.forRoot({
31+
apiKey: ['YOUR_API_KEY_HERE']
32+
}),
33+
AgmDrawingModule
34+
],
35+
providers: [],
36+
bootstrap: [AppComponent]
37+
})
38+
export class AppModule { }
39+
```
40+
41+
## Using the directive
42+
43+
When you import the `AgmDrawingManager`, you can use the `agm-drawing-manager` directive in your
44+
template. Agm-drawing-manager takes form of an html elements outside the `agm-map` component, where
45+
it is configured with properties. It is connected to the map via `agmDrawingManager` trigger
46+
directive, similar to MatAutocomplete from angular/components library.
47+
48+
```html
49+
<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982" [agmDrawingManager]="drawing">
50+
</agm-map>
51+
<agm-drawing-manager #drawing="agmDrawingManager" (circleComplete)="circleAdded($event)" [drawingMode]="'circle'" [circleOptions]="{fillColor:'red', radius: 150}"></agm-drawing-manager>
52+
```
53+
54+
### Customizing drawn figures
55+
56+
If you want to control how the figures the user draws will look like, specifically colors,
57+
line thickness, opacity, et cetera, you can provide CircleOptions or PolylineOptions
58+
to the drawing manager, similar how you would do in vanilla javascript with Google Maps javascript.
59+
60+
### Ignored properties
61+
62+
These \*Options interfaces are originally made for the developer displaying the shapes, so they have
63+
properties useless to us such as `map` and `center`. These properties are ignored.

package.json

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,18 @@
2020
"packages": [
2121
"packages/core",
2222
"packages/js-marker-clusterer",
23-
"packages/snazzy-info-window"
23+
"packages/snazzy-info-window",
24+
"packages/drawing-manager"
2425
],
2526
"scripts": {
2627
"clean": "rimraf dist node_modules/@agm 'packages/**/*.ngfactory.ts' && mkdirp dist",
2728
"prebuild": "yarn clean",
2829
"build": "yarn lint && yarn build:all",
29-
"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",
30+
"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",
3031
"build:core": "ng-packagr -p packages/core/package.json",
3132
"build:js-marker-clusterer": "ng-packagr -p packages/js-marker-clusterer/package.json",
3233
"build:snazzy-info-window": "ng-packagr -p packages/snazzy-info-window/package.json",
34+
"build:drawing": "ng-packagr -p packages/drawing/package.json",
3335
"lint": "tslint --project tsconfig.json -c tslint.json 'packages/**/*.ts'",
3436
"packagejson": "node ./scripts/update-package-json.js",
3537
"clang:format": "clang-format --glob=packages/**/*.ts -i",
@@ -39,10 +41,11 @@
3941
"docs:clean": "rimraf docs/public",
4042
"docs:hugo": "cd docs && hugo",
4143
"docs:injectga": "node scripts/inject-google-analytics.js",
42-
"docs": "yarn docs:hugo && yarn apidocs:core && yarn apidocs:snazzy && yarn apidocs:jsmarkerclusterer",
44+
"docs": "yarn docs:hugo && yarn apidocs:core && yarn apidocs:snazzy && yarn apidocs:jsmarkerclusterer && yarn apidocs:drawing",
4345
"apidocs:core": "compodoc -p packages/core/tsconfig.compodoc.json --name @agm/core --output docs/public/api-docs/agm-core/ --hideGenerator --disableCoverage",
4446
"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",
45-
"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"
47+
"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",
48+
"apidocs:drawing": "compodoc -p packages/drawing/tsconfig.compodoc.json --name @agm/drawing --output docs/public/api-docs/drawing/ --hideGenerator --disableCoverage"
4649
},
4750
"author": "Sebastian Holstein <info@sebastian-holstein.de>",
4851
"license": "MIT",
@@ -97,4 +100,4 @@
97100
"dependencies": {
98101
"yarn": "^1.17.3"
99102
}
100-
}
103+
}

packages/core/directives/marker.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { AfterContentInit, ContentChildren, Directive, EventEmitter, forwardRef, Input, OnChanges, OnDestroy, Output, QueryList, SimpleChange } from '@angular/core';
22
import { Observable, ReplaySubject, Subscription } from 'rxjs';
3-
import { MarkerLabel, MouseEvent } from '../map-types';
3+
import { MouseEvent } from '../map-types';
44
import { FitBoundsAccessor, FitBoundsDetails } from '../services/fit-bounds';
55
import * as mapTypes from '../services/google-maps-types';
66
import { MarkerManager } from '../services/managers/marker-manager';
@@ -61,7 +61,7 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit, FitBou
6161
/**
6262
* The label (a single uppercase character) for the marker.
6363
*/
64-
@Input() label: string | MarkerLabel;
64+
@Input() label: string | mapTypes.MarkerLabel;
6565

6666
/**
6767
* If true, the marker can be dragged. Default value is false.

packages/core/index.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@ export * from './directives';
33
export * from './services';
44
export * from './map-types';
55

6-
// Google Maps types
7-
export { LatLngBounds, LatLng, LatLngLiteral, MapTypeStyle, Padding, PolyMouseEvent } from './services/google-maps-types';
8-
96
// core module
107
// we explicitly export the module here to prevent this Ionic 2 bug:
118
// http://stevemichelotti.com/integrate-angular-2-google-maps-into-ionic-2/

packages/core/map-types.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,30 @@ export {
1818
GeocoderRequest,
1919
GeocoderResult,
2020
GeocoderStatus,
21+
MapTypeStyle,
22+
Padding,
23+
ControlPosition,
24+
OverviewMapControlOptions,
25+
PanControlOptions,
26+
RotateControlOptions,
27+
MapTypeControlOptions,
28+
MapTypeId,
29+
ScaleControlOptions,
30+
ScaleControlStyle,
31+
StreetViewControlOptions,
32+
ZoomControlOptions,
33+
ZoomControlStyle,
34+
FullscreenControlOptions,
35+
CircleOptions,
36+
Circle,
37+
Polyline,
38+
PolylineOptions,
39+
Polygon,
40+
PolygonOptions,
41+
Rectangle,
42+
RectangleOptions,
43+
Marker,
44+
MarkerOptions,
2145
} from './services/google-maps-types';
2246

2347
/**

packages/drawing/LICENSE

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../LICENSE

packages/drawing/README.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Map Drawing for AGM
2+
3+
-----
4+
5+
this package adds drawing support to [AGM][agm].
6+
7+
## Installation
8+
9+
```sh
10+
npm install @agm/drawing
11+
# or
12+
yarn add @agm/drawing
13+
```
14+
15+
## Usage
16+
17+
1. Import the module
18+
19+
```typescript
20+
import { BrowserModule } from '@angular/platform-browser';
21+
import { NgModule } from '@angular/core';
22+
import { AppComponent } from './app.component
23+
// add these imports
24+
import { AgmCoreModule } from '@agm/core';
25+
import { AgmDrawingModule } from '@agm/drawing
26+
@NgModule({
27+
declarations: [
28+
AppComponent
29+
],
30+
imports: [
31+
BrowserModule,
32+
AgmCoreModule.forRoot({
33+
apiKey: ['YOUR_API_KEY_HERE']
34+
}),
35+
AgmDrawingModule
36+
],
37+
providers: [],
38+
bootstrap: [AppComponent]
39+
})
40+
export class AppModule { }
41+
```
42+
2. use it in your template
43+
44+
```html
45+
<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982" [agmDrawingManager]="drawing">
46+
</agm-map>
47+
<agm-drawing-manager #drawing="agmDrawingManager" [drawingMode]="'circle'" [circleOptions]="{fillColor:'red', radius: 150}"></agm-drawing-manager>
48+
```
49+
50+
51+
[drawing-manager]: https://developers.google.com/maps/documentation/javascript/reference/#drawing
52+
[agm]: https://angular-maps.com/
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { AgmMap } from '@agm/core';
2+
import { AfterViewInit, Directive, Host, Input, OnDestroy } from '@angular/core';
3+
import { first } from 'rxjs/operators';
4+
import { AgmDrawingManager } from './drawing-manager';
5+
6+
@Directive({
7+
selector: 'agm-map[agmDrawingManager]',
8+
exportAs: 'matDrawingManagerTrigger',
9+
})
10+
export class AgmDrawingManagerTrigger implements AfterViewInit, OnDestroy{
11+
12+
/** The drawing manager to be attached to this trigger. */
13+
// tslint:disable-next-line: no-input-rename
14+
@Input('agmDrawingManager') drawingManager: AgmDrawingManager;
15+
16+
constructor(@Host() private _agmMap: AgmMap) {
17+
}
18+
19+
ngAfterViewInit(): void {
20+
this._agmMap.mapReady.pipe(first()).subscribe(map => this.drawingManager.setMap(map));
21+
}
22+
23+
ngOnDestroy() {
24+
this._agmMap.mapReady.pipe(first()).subscribe(() => this.drawingManager.setMap(null));
25+
}
26+
}

0 commit comments

Comments
 (0)