libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts
selector | n52-geometry-map-viewer |
styleUrls | ./geometry-map-viewer.component.scss |
templateUrl | ./geometry-map-viewer.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(mapCache: MapCache, kvDiffers: KeyValueDiffers)
|
|||||||||
Parameters :
|
avoidZoomToGeometry | |
Type : boolean
|
|
customMarkerIcon | |
Type : L.Icon
|
|
geometry | |
Type : GeoJSON.GeoJsonObject
|
|
highlight | |
Type : GeoJSON.GeoJsonObject
|
|
zoomTo | |
Type : GeoJSON.GeoJsonObject
|
|
baseMaps | |
Type : LayerMap
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:52
|
|
Map, which holds all base map layer (see: https://leafletjs.com/reference-1.3.4.html#layer) |
fitBounds | |
Type : L.LatLngBoundsExpression
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:40
|
|
Bounds for the map |
layerControlOptions | |
Type : L.Control.LayersOptions
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:58
|
|
Describes the the zoom options (see: https://leafletjs.com/reference-1.3.4.html#control-layers) |
mapId | |
Type : string
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:28
|
|
A map with the given ID is created inside this component. This ID can be used the get the map instance over the map cache service. |
mapOptions | |
Type : L.MapOptions
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:34
|
|
The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option) |
overlayMaps | |
Type : LayerMap
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:46
|
|
Map, which holds all overlay map layer (see: https://leafletjs.com/reference-1.3.4.html#layer) |
zoomControlOptions | |
Type : L.Control.ZoomOptions
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:64
|
|
Describes the the zoom control options (see: https://leafletjs.com/reference-1.3.4.html#control-zoom) |
mapInitialized | |
Type : EventEmitter<string>
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:70
|
|
Informs when initialization is done with map id. |
Private drawGeometry |
drawGeometry()
|
Returns :
void
|
Public ngAfterViewInit |
ngAfterViewInit()
|
Returns :
void
|
Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Parameters :
Returns :
void
|
Private showHighlight |
showHighlight()
|
Returns :
void
|
Private zoomToGeometry |
zoomToGeometry()
|
Returns :
void
|
Private addBaseMap | ||||||
addBaseMap(layerOptions?: LayerOptions)
|
||||||
Inherited from
CachedMapComponent
|
||||||
Defined in
CachedMapComponent:180
|
||||||
Parameters :
Returns :
void
|
Private addOverlayMap | ||||||
addOverlayMap(layerOptions: LayerOptions)
|
||||||
Inherited from
CachedMapComponent
|
||||||
Defined in
CachedMapComponent:164
|
||||||
Parameters :
Returns :
void
|
Protected createMap |
createMap()
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:137
|
Returns :
void
|
Private generateUUID |
generateUUID()
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:155
|
Returns :
string
|
Public ngDoCheck |
ngDoCheck()
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:112
|
Returns :
void
|
Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Inherited from
CachedMapComponent
|
||||||
Defined in
CachedMapComponent:101
|
||||||
Parameters :
Returns :
void
|
Public ngOnDestroy |
ngOnDestroy()
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:131
|
Returns :
void
|
Public ngOnInit |
ngOnInit()
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:95
|
Returns :
void
|
Private removeBaseMap | ||||||
removeBaseMap(layerOptions: LayerOptions)
|
||||||
Inherited from
CachedMapComponent
|
||||||
Defined in
CachedMapComponent:198
|
||||||
Parameters :
Returns :
void
|
Private removeOverlayMap | ||||||
removeOverlayMap(layerOptions: LayerOptions)
|
||||||
Inherited from
CachedMapComponent
|
||||||
Defined in
CachedMapComponent:173
|
||||||
Parameters :
Returns :
void
|
Private updateLayerControl |
updateLayerControl()
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:205
|
Returns :
void
|
Private updateZoomControl |
updateZoomControl()
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:218
|
Returns :
void
|
Private defaultStyle |
Type : L.PathOptions
|
Default value : {
color: 'red',
weight: 5,
opacity: 0.65
}
|
Private geometryOnMap |
Type : L.GeoJSON
|
Private highlightGeometryOnMap |
Type : L.GeoJSON
|
Private highlightStyle |
Type : L.PathOptions
|
Default value : {
color: 'blue',
weight: 10,
opacity: 1
}
|
Private _baseMaps |
Type : LayerMap
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:84
|
Private _differBaseMaps |
Type : KeyValueDiffer<string | LayerOptions>
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:85
|
Private _differOverlayMaps |
Type : KeyValueDiffer<string | LayerOptions>
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:83
|
Private _overlayMaps |
Type : LayerMap
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:82
|
Protected layerControl |
Type : L.Control.Layers
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:79
|
Protected map |
Type : L.Map
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:75
|
The map object. |
Protected oldBaseLayer |
Type : L.Control.LayersObject
|
Default value : {}
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:78
|
Protected oldOverlayLayer |
Type : L.Control.LayersObject
|
Default value : {}
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:77
|
Protected zoomControl |
Type : L.Control.Zoom
|
Inherited from
CachedMapComponent
|
Defined in
CachedMapComponent:80
|
import { AfterViewInit, Component, Input, KeyValueDiffers, OnChanges, SimpleChanges } from '@angular/core';
import * as L from 'leaflet';
import { CachedMapComponent } from '../../base/cached-map-component';
import { MapCache } from '../../base/map-cache.service';
@Component({
selector: 'n52-geometry-map-viewer',
templateUrl: './geometry-map-viewer.component.html',
styleUrls: ['./geometry-map-viewer.component.scss']
})
export class GeometryMapViewerComponent extends CachedMapComponent implements AfterViewInit, OnChanges {
@Input()
public highlight: GeoJSON.GeoJsonObject;
@Input()
public geometry: GeoJSON.GeoJsonObject;
@Input()
public zoomTo: GeoJSON.GeoJsonObject;
@Input()
public avoidZoomToGeometry: boolean;
@Input()
public customMarkerIcon: L.Icon;
private highlightGeometryOnMap: L.GeoJSON;
private geometryOnMap: L.GeoJSON;
private defaultStyle: L.PathOptions = {
color: 'red',
weight: 5,
opacity: 0.65
};
private highlightStyle: L.PathOptions = {
color: 'blue',
weight: 10,
opacity: 1
};
constructor(
protected mapCache: MapCache,
protected kvDiffers: KeyValueDiffers
) {
super(mapCache, kvDiffers);
}
public ngAfterViewInit() {
this.createMap();
this.drawGeometry();
this.showHighlight();
}
public ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
if (this.map) {
if (changes.highlight && changes.highlight.currentValue) {
this.showHighlight();
}
if (changes.geometry) {
this.drawGeometry();
}
if (changes.zoomTo) {
this.zoomToGeometry();
}
}
}
private zoomToGeometry() {
try {
const geometry = L.geoJSON(this.zoomTo);
this.map.fitBounds(geometry.getBounds());
} catch (err) {
console.error(err);
return;
}
}
private showHighlight() {
if (this.highlightGeometryOnMap) {
this.map.removeLayer(this.highlightGeometryOnMap);
}
this.highlightGeometryOnMap = L.geoJSON(this.highlight, {
pointToLayer: (feature, latlng) => {
return L.circleMarker(latlng, this.highlightStyle);
}
});
this.highlightGeometryOnMap.setStyle(this.highlightStyle);
this.highlightGeometryOnMap.addTo(this.map);
}
private drawGeometry() {
if (this.geometry) {
if (this.geometryOnMap) {
this.map.removeLayer(this.geometryOnMap);
}
this.geometryOnMap = L.geoJSON(this.geometry, {
pointToLayer: (feature, latlng) => {
if (this.customMarkerIcon) {
return L.marker(latlng, {icon: this.customMarkerIcon});
} else {
return L.circleMarker(latlng, this.defaultStyle);
}
}
});
this.geometryOnMap.setStyle(this.defaultStyle);
this.geometryOnMap.addTo(this.map);
if (!this.avoidZoomToGeometry) {
this.map.fitBounds(this.geometryOnMap.getBounds());
}
}
}
}
<div [attr.id]="mapId" class="map-viewer"></div>
./geometry-map-viewer.component.scss
:host {
height: 100%;
width: 100%;
.map-viewer {
height: 100%;
width: 100%;
}
}