npm package: @geosdi/ngx-leaflet-layers-plugin
Description: Service to create base layer for Leaflet Map
Author: Salvia Vito
Latest version: 1.2.0

# NgxLeafletLayers

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.0.

# General information

* Service to create a store of BaseLayer interface for switching on a leaflet map

## Installation

`npm i @geosdi/ngx-leaflet-layers-plugin --save`

It depends on :

    "@angular/common": ">=12.0.0",
    "@angular/core": ">=12.0.0",
    "typescript": ">=4.0.0",
    "leaflet": ">=1.7.1",
    "leaflet-bing-layer": ">=3.3.0",
    "rxjs": ">= 7.0.0"

## Usage

### BaseLayer interface
 ```typescript

export interface BaseLayer {
  key: string;
  label: string;
  layer: any;
  logo_src: string;
  logo_mobile_src: string;
  contrast: string;
}
 ```

|  | key  | label | layer | logo_src | logo_mobile_src| logo_mobile_src
| ------------- | ------------- | ------------- | ------------- | ------------- | ------------- | ------------- |
| OPEN STREET MAP | OPEN_STREET_MAP | OpenStreetMap | L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {maxZoom: 18,attribution: 'OpenStreetMap',id: 'OPEN_STREET_MAP'}) | logo_black.png | logo_black_mobile.png | #000 | 
| BING AERIAL | BING_AERIAL | Bing Aerial Layer | (L as any).tileLayer.bing({maxZoom: 18,bingMapsKey: bingKey,attribution: 'Bing Aerial Layer',imagerySet: 'Aerial',id: 'BING_AERIAL'}) | logo_white.png | logo_white_mobile.png | #fff | 
| BING ROAD LAYER | BING_ROAD_LAYER | Bing Road Layer | (L as any).tileLayer.bing({maxZoom: 18,bingMapsKey: bingKey,attribution: 'Bing Road Layer',imagerySet: 'Road',id: 'BING_ROAD_LAYER'}) | logo_black.png | logo_black_mobile.png | #000 | 
| BING HYBRID | BING_HYBRID | Bing Road Layer | (L as any).tileLayer.bing({maxZoom: 18,bingMapsKey: bingKey,imagerySet: 'AerialWithLabels',attribution: 'Bing Hybrid Layer',id: 'BING_HYBRID'}) | logo_white.png | logo_white_mobile.png | #fff | 
| METACARTA | METACARTA | Metacarta | L.tileLayer.wms('http://vmap0.tiles.osgeo.org/wms/vmap0', {maxZoom: 18,layers: 'basic',format: 'image/png',attribution: 'Metacarta', transparent: true,crs: L.CRS.EPSG4326,id: 'METACARTA'}) | logo_black.png | logo_black_mobile.png | #000 | 
| GEOSDI_BASE | GEOSDI_BASE | geoSdi |  L.tileLayer.wms('http://dpc.geosdi.org/geoserver/wms', {maxZoom: 18,layers: 'Mappa_di_Base',format: 'image/png',attribution: 'geoSdi',transparent: true,crs: L.CRS.EPSG4326,id: 'GEOSDI_BASE'}) | logo_black.png | logo_black_mobile.png | #000 | 
| GEOSDI_NULL_BASE | GEOSDI_NULL_BASE | geoSdi No Map | L.tileLayer.wms('http://dpc.geosdi.org/geoserver/wms', {maxZoom: 18,layers: 'StratiDiBase:nullMap',format: 'image/png',attribution: 'geoSdi No Map',transparent: true,id: 'GEOSDI_NULL_BASE'}) | logo_black.png | logo_black_mobile.png | #000 | 
| EMPTY | EMPTY | EmptyLayer (c) geoSDI | L.tileLayer.wms('') | logo_black.png | logo_black_mobile.png | #000 | 
| GOOGLE_SATELLITE | GOOGLE_SATELLITE | Google Satellite | L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {maxZoom: 20,attribution: 'Google Satellite',subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],id: 'GOOGLE_SATELLITE'}) | logo_white.png | logo_white_mobile.png | #fff | 
| GOOGLE_NORMAL | GOOGLE_NORMAL | Google Normal | L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {maxZoom: 20,attribution: 'Google Normal',subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],id: 'GOOGLE_NORMAL' | logo_black.png | logo_black_mobile.png | #000
| GOOGLE_HYBRID | GOOGLE_HYBRID | Google Hybrid | L.tileLayer('http://{s}.google.com/vt/lyrs=y,h&x={x}&y={y}&z={z}', {maxZoom: 20,attribution: 'Google Hybrid',subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],id: 'GOOGLE_HYBRID'}) | logo_white.png | logo_white.png | #fff
| ORTHO_MAP | ORTHO_MAP | OrthoMap | L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {maxZoom: 18,attribution: `Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping,Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community`,id: 'ORTHO_MAP'}) | logo_white.png | logo_white.png | #fff
| DARK_BASE_MAP | DARK_BASE_MAP | DarkBaseMap | L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {maxZoom: 18,attribution: 'Map tiles by Carto',id: 'DARK_BASE_MAP'}) | logo_white.png | logo_white.png | #fff
                                                                                                                                                                
Here's an example to create a list of base maps, that you can pass to Leaflet Control or a custom control,
 and add OpenStreeMap, as default base layer, to Map.

 ```typescript

import { Injectable } from '@angular/core'; 

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


    constructor(private ngxLeafletLayersPluginService: NgxLeafletLayersPluginService) {
    }

   public initBaseMaps() {
    this.ngxLeafletLayersPluginService
      .withBaseLayers([BaseLayerEnum.OPEN_STREET_MAP,
      BaseLayerEnum.GOOGLE_SATELLITE, BaseLayerEnum.GOOGLE_NORMAL, BaseLayerEnum.GOOGLE_HYBRID,
      BaseLayerEnum.BING_HYBRID, BaseLayerEnum.BING_ROAD_LAYER, BaseLayerEnum.BING_AERIAL,
      BaseLayerEnum.ORTHO_MAP, BaseLayerEnum.DARK_BASE_MAP])
      .withDefaultBaseLayer(BaseLayerEnum.OPEN_STREET_MAP)
      .withMap(map)
      .build();
    }

}

 ```

## Methods

 | Method  | action 
 | ------------- | ------------- | 
 | changeBaseLayer(type: string or BaseLayerEnum, force: boolean) | change map base layer, force equals false delegates the changing of layer to leaflet  | 
 | currentBaseLayer() | return current base layer| 
 | getAllBaseLayers() | returns all the base layer create| 
 | getLogo()| returns image for mobile or desktop. The images must be put in assets folder of your app| 
 | createLayer()| create single base layer| 

## Events

 | Event  | Action 
 | ------------- | ------------- | 
 | subjectNotifyLogo$ | return the image depend on base map | 
 | subjectNotifyContrast$ | return constrast depend on base map|