1 | # agm-overlays
|
2 | Custom marker overlay for the @agm/core package
|
3 |
|
4 | [demo page](https://ackerapple.github.io/agm-overlays/)
|
5 |
|
6 | [![hire me](https://ackerapple.github.io/resume/assets/images/hire-me-badge.svg)](https://ackerapple.github.io/resume/)
|
7 | [![npm version](https://badge.fury.io/js/agm-overlays.svg)](http://badge.fury.io/js/agm-overlays)
|
8 | [![npm downloads](https://img.shields.io/npm/dm/agm-overlays.svg)](https://npmjs.org/agm-overlays)
|
9 | [![Dependency Status](https://david-dm.org/ackerapple/agm-overlays.svg)](https://david-dm.org/ackerapple/agm-overlays)
|
10 |
|
11 | > Source Repository : [master branch here](https://github.com/AckerApple/agm-overlays/tree/master)
|
12 |
|
13 | <details>
|
14 | <summary>Table of Contents</summary>
|
15 |
|
16 | - [Dependencies](#dependencies)
|
17 | - [Install](#install)
|
18 | - [Import](#import)
|
19 | - [Usage](#usage)
|
20 | - [Zoom Sizing](#zoom-sizing)
|
21 | - [Clustering Demo](#clustering-demo)
|
22 | - [Resources](#resources)
|
23 | - [Credits and Collaborators](#credits-and-collaborators)
|
24 | - [Also Try](#also-try)
|
25 |
|
26 | </details>
|
27 |
|
28 | # Dependencies
|
29 |
|
30 | Please be sure you have installed:
|
31 | - [@agm/core](https://www.npmjs.com/package/@agm/core)
|
32 | - [@angular/core](https://www.npmjs.com/package/@angular/core)
|
33 | - [@angular/platform-browser](https://www.npmjs.com/package/@angular/platform-browser)
|
34 |
|
35 | # Install
|
36 | Open a command terminal and type the following
|
37 | ```bash
|
38 | npm install agm-overlays --save-dev
|
39 | ```
|
40 |
|
41 | # Import
|
42 | ```typescript
|
43 | import { AgmOverlays } from "agm-overlays"
|
44 | import { NgModule } from "@angular/core"
|
45 | import { BrowserModule } from '@angular/platform-browser'
|
46 |
|
47 | @NgModule({
|
48 | imports:[
|
49 | BrowserModule,
|
50 | AgmOverlays,
|
51 | AgmCoreModule.forRoot({
|
52 | apiKey: '...your-key-here...'
|
53 | })
|
54 | ]
|
55 | }) export class AppModule {}
|
56 | ```
|
57 |
|
58 | # Usage
|
59 | **Multiple Custom Overlays**
|
60 | ```html
|
61 | <agm-map style="height:300px;display:block;">
|
62 | <agm-overlay
|
63 | *ngFor = "let item of latLngArray"
|
64 | [latitude] = "item.latitude"
|
65 | [longitude] = "item.longitude"
|
66 | >
|
67 | <!-- blue html square -->
|
68 | <div style="width:15px;height:15px;background-color:blue;"></div>
|
69 | </agm-overlay>
|
70 | </agm-map>
|
71 | ```
|
72 | > With multiple custom overlays, the zoom is auto set by the bounds calculated amongst all custom overlays
|
73 |
|
74 | **Single Custom Overlay**
|
75 | ```html
|
76 | <agm-map
|
77 | [zoom] = "12"
|
78 | style = "height:300px;display:block;"
|
79 | [latitude] = "item.latitude"
|
80 | [longitude] = "item.longitude"
|
81 | >
|
82 | <agm-overlay
|
83 | [latitude] = "item.latitude"
|
84 | [longitude] = "item.longitude"
|
85 | >
|
86 | <!-- blue html square -->
|
87 | <div style="width:15px;height:15px;background-color:blue;"></div>
|
88 | </agm-overlay>
|
89 | </agm-map>
|
90 | ```
|
91 |
|
92 | ### Zoom Sizing
|
93 | By default, markers are always the same size regardless of zoom. Change that!
|
94 |
|
95 | > The following example expands the latitude(0.003) and the longitude(0.0052) in both directions
|
96 |
|
97 | ```html
|
98 | <agm-map
|
99 | [zoom] = "12"
|
100 | style = "height:300px;display:block;"
|
101 | [latitude] = "item.latitude"
|
102 | [longitude] = "item.longitude"
|
103 | >
|
104 | <agm-overlay
|
105 | [latitude] = "item.latitude"
|
106 | [longitude] = "item.longitude"
|
107 | [bounds] = "{x:{latitude:-0.003,longitude:-0.0052},y:{latitude:0.003,longitude:0.0052}}"
|
108 | >
|
109 | <!-- blue html square -->
|
110 | <div style="width:15px;height:15px;background-color:blue;"></div>
|
111 | </agm-overlay>
|
112 | </agm-map>
|
113 | ```
|
114 |
|
115 |
|
116 | # Clustering Demo
|
117 | Clustering is NOT a responsibility of this package, however it can be done
|
118 |
|
119 | [demo page](https://ackerapple.github.io/agm-overlays/)
|
120 | This demo uses [@agm/js-marker-clusterer](https://www.npmjs.com/package/@agm/js-marker-clusterer) to demonstrate how to do clustering
|
121 |
|
122 | ```html
|
123 | <agm-map
|
124 | [latitude] = "latLngArray[0].latitude"
|
125 | [longitude] = "latLngArray[1].latitude"
|
126 | >
|
127 | <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
|
128 | <agm-overlay
|
129 | *ngFor = "let item of latLngArray;let i=index"
|
130 | [latitude] = "item.latitude"
|
131 | [longitude] = "item.longitude"
|
132 | >
|
133 | <!-- blue html square -->
|
134 | <div class="block">
|
135 | <strong style="color:white;">{{i}}</strong>
|
136 | </div>
|
137 | </agm-overlay>
|
138 | </agm-marker-cluster>
|
139 | </agm-map>
|
140 | ```
|
141 |
|
142 |
|
143 | # Resources
|
144 | - [@agm/core](https://www.npmjs.com/package/@agm/core) installed
|
145 |
|
146 | # Credits and Collaborators
|
147 | - [Acker Apple](https://github.com/AckerApple)
|
148 | - [Todd Greenberg](https://github.com/tsgreenberg1217)
|
149 |
|
150 | # Also Try
|
151 | - [ack-angular-webcam](https://www.npmjs.com/package/ack-angular-webcam)
|
152 | - [ack-angular-fx](https://www.npmjs.com/package/ack-angular-fx)
|
153 | - [angular-file](https://www.npmjs.com/package/angular-file)
|
154 | - [ack-angular](https://www.npmjs.com/package/ack-angular)
|