NgxLeafletPingLayer

This library was generated with Angular CLI version 13.0.0.

General information

Service to wrap leaflet ping layer. See documentation https://github.com/Asymmetrik/leaflet-d3

Installation

npm i @geosdi/ngx-leaflet-ping-layer-plugin --save

It depends on :

"@angular/common": ">=13.0.0",
"@angular/core": ">=13.0.0",
"typescript": ">=4.4.0",
"leaflet": ">=1.7.1",
"rxjs": "^7.4.0",
"@asymmetrik/leaflet-d3": ">=4.4.0",
"@asymmetrik/ngx-leaflet": ">=6.0.1",
"@asymmetrik/leaflet-d3": "^4.4.0",

Usage

import { Injectable } from '@angular/core'; 
import {NgxLeafletPingLayerPluginService} from "./ngx-leaflet-ping-layer-plugin.service"; 

@Injectable({
 providedIn: 'root'
})
export class Service {

   constructor(private lLeafletPingLayerPluginService: NgxLeafletPingLayerPluginService) {
   }

  public addPlugin() {
   this.lLeafletPingLayerPluginService.withMap(this.map)
     .withOpacityScale([1, 0])
     .withRadiusScale([2, 18])
     .withStyle('ping-blue')
     .applyPingLayer();
   this.lLeafletPingLayerPluginService.initPingLayer.next([15, 40]);

   setTimeout(() => {
     this.lLeafletPingLayerPluginService.stopPingLayer$.next(null);
   }, 3000);

   setTimeout(() => {
     this.lLeafletPingLayerPluginService.initPingLayer.next([15, 40]);
   }, 8000);
   }

}

Methods

| Method | action | ------------- | ------------- | | withRadiusScale(radiusScale: number[]): INgxLeafletPingLayerService | the circle dimensions range| | withOpacityScale(opacityScale: number[]): INgxLeafletPingLayerService | the circle opacity range | | withStyle(style: string): INgxLeafletPingLayerService | css style class| | withMap(map: any): INgxLeafletPingLayerService | map to apply plugin| | applyPingLayer(): void| add plugin|

Events

| Event | action | ------------- | ------------- | | initPingLayer: Subject<number[]>| lng and lat to put ping layer on map| | stopPingLayer$: Subject>| stop ping layer|