@deliverysolutions/ng-map-overlays

ng-maps-overlays

Custom marker overlay for the @ng-maps/core package

Table of Contents

• Dependencies
• Install
• Import
• Usage
  • Zoom Sizing
• Clustering Demo
• Resources
• Inspired By
• Credits and Collaborators
• Also Try

Dependencies

Please be sure you have installed:

• @ng-maps/core
• @angular/core
• @angular/platform-browser

Install

Open a command terminal and type the following

npm i @deliverysolutions/ng-maps-overlays

Import

import { NgMapOverlay } from "@deliverysolutions/ng-maps-overlays"
import { NgModule } from "@angular/core"
import { BrowserModule } from '@angular/platform-browser'

@NgModule({
  imports:[
    BrowserModule,
    NgMapsOverlays,
    NgMapsCoreModule,
  ],
  providers: [
    {
      provide: GOOGLE_MAPS_API_CONFIG,
      useValue: {
        apiKey: 'YOUR_API_KEY'
      }
    }
  ]
}) export class AppModule {}

Usage

Multiple Custom Overlays

<map-view style="height:300px;display:block;">
  <ng-maps-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>
  </ng-maps-overlay>
</map-view>

With multiple custom overlays, the zoom is auto set by the bounds calculated amongst all custom overlays

Single Custom Overlay

<map-view
  [zoom] = "12"
  style  = "height:300px;display:block;"
  [latitude]  = "item.latitude"
  [longitude] = "item.longitude"
>
  <ng-maps-overlay
    [latitude]  = "item.latitude"
    [longitude] = "item.longitude"
  >
    <!-- blue html square -->
    <div style="width:15px;height:15px;background-color:blue;"></div>
  </ng-maps-overlay>
</map-view>

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

<map-view
  [zoom] = "12"
  style  = "height:300px;display:block;"
  [latitude]  = "item.latitude"
  [longitude] = "item.longitude"
>
  <ng-maps-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>
  </ng-maps-overlay>
</map-view>

Clustering Demo

Clustering is NOT a responsibility of this package, however it can be done

<map-view
  [latitude]  = "latLngArray[0].latitude"
  [longitude] = "latLngArray[1].latitude"
>
  <map-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
    <ng-maps-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>
    </ng-maps-overlay>
  </map-marker-cluster>
</map-view>

Resources

• @ng-maps/core installed

Thanks to & Inspired by the original package - agm-overlays

• Acker Apple
• Todd Greenberg

Credits and Collaborators

• Arbaaz Din
• Rushabh Vora