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 |