File

libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts

Extends

CachedMapComponent

Implements

AfterViewInit OnChanges

Metadata

selector n52-geometry-map-viewer
styleUrls ./geometry-map-viewer.component.scss
templateUrl ./geometry-map-viewer.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(mapCache: MapCache, kvDiffers: KeyValueDiffers)
Parameters :
Name Type Optional
mapCache MapCache No
kvDiffers KeyValueDiffers No

Inputs

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

Map, which holds all base map layer (see: https://leafletjs.com/reference-1.3.4.html#layer)

fitBounds
Type : L.LatLngBoundsExpression
Inherited from CachedMapComponent

Bounds for the map

layerControlOptions
Type : L.Control.LayersOptions
Inherited from CachedMapComponent

Describes the the zoom options (see: https://leafletjs.com/reference-1.3.4.html#control-layers)

mapId
Type : string
Inherited from CachedMapComponent

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

The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option)

overlayMaps
Type : LayerMap
Inherited from CachedMapComponent

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

Describes the the zoom control options (see: https://leafletjs.com/reference-1.3.4.html#control-zoom)

Outputs

mapInitialized
Type : EventEmitter<string>
Inherited from CachedMapComponent

Informs when initialization is done with map id.

Methods

Private drawGeometry
drawGeometry()
Returns : void
Public ngAfterViewInit
ngAfterViewInit()
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Private showHighlight
showHighlight()
Returns : void
Private zoomToGeometry
zoomToGeometry()
Returns : void
Private addBaseMap
addBaseMap(layerOptions?: LayerOptions)
Inherited from CachedMapComponent
Parameters :
Name Type Optional
layerOptions LayerOptions Yes
Returns : void
Private addOverlayMap
addOverlayMap(layerOptions: LayerOptions)
Inherited from CachedMapComponent
Parameters :
Name Type Optional
layerOptions LayerOptions No
Returns : void
Protected createMap
createMap()
Inherited from CachedMapComponent
Returns : void
Private generateUUID
generateUUID()
Inherited from CachedMapComponent
Returns : string
Public ngDoCheck
ngDoCheck()
Inherited from CachedMapComponent
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from CachedMapComponent
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public ngOnDestroy
ngOnDestroy()
Inherited from CachedMapComponent
Returns : void
Public ngOnInit
ngOnInit()
Inherited from CachedMapComponent
Returns : void
Private removeBaseMap
removeBaseMap(layerOptions: LayerOptions)
Inherited from CachedMapComponent
Parameters :
Name Type Optional
layerOptions LayerOptions No
Returns : void
Private removeOverlayMap
removeOverlayMap(layerOptions: LayerOptions)
Inherited from CachedMapComponent
Parameters :
Name Type Optional
layerOptions LayerOptions No
Returns : void
Private updateLayerControl
updateLayerControl()
Inherited from CachedMapComponent
Returns : void
Private updateZoomControl
updateZoomControl()
Inherited from CachedMapComponent
Returns : void

Properties

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
Private _differBaseMaps
Type : KeyValueDiffer<string | LayerOptions>
Inherited from CachedMapComponent
Private _differOverlayMaps
Type : KeyValueDiffer<string | LayerOptions>
Inherited from CachedMapComponent
Private _overlayMaps
Type : LayerMap
Inherited from CachedMapComponent
Protected layerControl
Type : L.Control.Layers
Inherited from CachedMapComponent
Protected map
Type : L.Map
Inherited from CachedMapComponent

The map object.

Protected oldBaseLayer
Type : L.Control.LayersObject
Default value : {}
Inherited from CachedMapComponent
Protected oldOverlayLayer
Type : L.Control.LayersObject
Default value : {}
Inherited from CachedMapComponent
Protected zoomControl
Type : L.Control.Zoom
Inherited from CachedMapComponent
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%;
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""