NgxLeafletLayers

This library was generated with 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

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 © Esri — 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.

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|