Custom marker overlay for the @agm/core package
Source Repository : master branch here
Table of Contents
Please be sure you have installed:
Open a command terminal and type the following
npm install agm-overlays --save-devimport { 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 {}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>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 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>- @agm/core installed