1 | # Marker Clusterer for AGM
|
2 |
|
3 | -----
|
4 |
|
5 | this package levereges the [js-marker-clusterer][js-marker-clusterer] to add clustering support to
|
6 | [AGM][agm].
|
7 |
|
8 | ## Installation
|
9 |
|
10 | @agm/js-marker-clusterer has a peer depedency on [js-marker-clusterer][js-marker-clusterer]
|
11 |
|
12 | ```shell
|
13 | npm install js-marker-clusterer @agm/js-marker-clusterer --save
|
14 | # or
|
15 | yarn add js-marker-clusterer @agm/js-marker-clusterer
|
16 | ```
|
17 |
|
18 | ## Usage
|
19 |
|
20 | 1. Import the module
|
21 |
|
22 | ```typescript
|
23 | import { BrowserModule } from '@angular/platform-browser';
|
24 | import { NgModule } from '@angular/core';
|
25 | import { AppComponent } from './app.component';
|
26 |
|
27 | // add these imports
|
28 | import { AgmCoreModule } from '@agm/core';
|
29 | import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
|
30 |
|
31 | @NgModule({
|
32 | declarations: [
|
33 | AppComponent
|
34 | ],
|
35 | imports: [
|
36 | BrowserModule,
|
37 | AgmCoreModule.forRoot({
|
38 | apiKey: ['YOUR_API_KEY_HERE']
|
39 | }),
|
40 | AgmJsMarkerClustererModule
|
41 | ],
|
42 | providers: [],
|
43 | bootstrap: [AppComponent]
|
44 | })
|
45 | export class AppModule { }
|
46 | ```
|
47 | 2. use it in your template
|
48 |
|
49 | ```html
|
50 | <agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982">
|
51 | <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
|
52 | <agm-marker [latitude]="51.673858" [longitude]="7.815982">
|
53 | </agm-marker><!-- multiple markers -->
|
54 | </agm-marker-cluster>
|
55 | </agm-map>
|
56 | ```
|
57 |
|
58 |
|
59 | [js-marker-clusterer]: https://github.com/googlemaps/js-marker-clusterer
|
60 | [agm]: https://angular-maps.com/
|