Package Exports
- agm-overlays
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (agm-overlays) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
agm-overlays
Custom marker overlay for the @agm/core package
Source Repository : master branch here
Table of Contents
Dependencies
Please be sure you have installed:
Install
Open a command terminal and type the following
npm install agm-overlays --save-devImport
import { AgmOverlays } from "agm-overlays"
import { NgModule } from "@angular/core"
import { BrowserModule } from '@angular/platform-browser'
@NgModule({
imports:[
BrowserModule,
AgmOverlays,
AgmCoreModule.forRoot({
apiKey: '...your-key-here...'
})
]
}) export class AppModule {}Usage
Multiple Custom Overlays
<agm-map style="height:300px;display:block;">
<agm-overlay
*ngFor = "let item of latLngArray"
[latitude] = "item.latitude"
[longitude] = "item.longitude"
>
<!-- blue html square -->
<div style="width:15px;height:15px;background-color:blue;"></div>
</agm-overlay>
</agm-map>With multiple custom overlays, the zoom is auto set by the bounds calculated amongst all custom overlays
Single Custom Overlay
<agm-map
[zoom] = "12"
style = "height:300px;display:block;"
[latitude] = "item.latitude"
[longitude] = "item.longitude"
>
<agm-overlay
[latitude] = "item.latitude"
[longitude] = "item.longitude"
>
<!-- blue html square -->
<div style="width:15px;height:15px;background-color:blue;"></div>
</agm-overlay>
</agm-map>Zoom Sizing
By default, markers are always the same size regardless of zoom. Change that!
The following example expands the latitude(0.003) and the longitude(0.0052) in both directions
<agm-map
[zoom] = "12"
style = "height:300px;display:block;"
[latitude] = "item.latitude"
[longitude] = "item.longitude"
>
<agm-overlay
[latitude] = "item.latitude"
[longitude] = "item.longitude"
[bounds] = "{x:{latitude:-0.003,longitude:-0.0052},y:{latitude:0.003,longitude:0.0052}}"
>
<!-- blue html square -->
<div style="width:15px;height:15px;background-color:blue;"></div>
</agm-overlay>
</agm-map>Clustering Demo
Clustering is NOT a responsibility of this package, however it can be done
demo page This demo uses @agm/js-marker-clusterer to demonstrate how to do clustering
<agm-map
[latitude] = "latLngArray[0].latitude"
[longitude] = "latLngArray[1].latitude"
>
<agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-overlay
*ngFor = "let item of latLngArray;let i=index"
[latitude] = "item.latitude"
[longitude] = "item.longitude"
>
<!-- blue html square -->
<div class="block">
<strong style="color:white;">{{i}}</strong>
</div>
</agm-overlay>
</agm-marker-cluster>
</agm-map>Resources
- @agm/core installed