agm-overlays

Custom marker overlay for the @agm/core package

demo page

Source Repository : master branch here

Table of Contents

Dependencies
Install
Import
Usage
- Zoom Sizing
Clustering Demo
Resources
Credits and Collaborators
Also Try

Dependencies

Please be sure you have installed:

Install

Open a command terminal and type the following

npm install agm-overlays --save-dev

Import

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

devumair/agm-overlays