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

Constructor

constructor(mapCache: MapCache, kvDiffers: KeyValueDiffers)

Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:42

Parameters :

Name	Type	Optional
mapCache	`MapCache`	No
kvDiffers	`KeyValueDiffers`	No

Inputs

avoidZoomToGeometry
Type : `boolean`
Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:24

customMarkerIcon
Type : `L.Icon`
Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:27

geometry
Type : `GeoJSON.GeoJsonObject`
Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:18

highlight
Type : `GeoJSON.GeoJsonObject`
Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:15

zoomTo
Type : `GeoJSON.GeoJsonObject`
Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:21

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)

Outputs

mapInitialized
Type : `EventEmitter<string>`
Inherited from `CachedMapComponent`
Defined in `CachedMapComponent:70`
Informs when initialization is done with map id.

Methods

Private drawGeometry

drawGeometry()

Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:95

Returns : void

Public ngAfterViewInit

ngAfterViewInit()

Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:51

Returns : void

Public ngOnChanges

ngOnChanges(changes: SimpleChanges)

Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:57

Parameters :

Name	Type	Optional
changes	`SimpleChanges`	No

Returns : void

Private showHighlight

showHighlight()

Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:82

Returns : void

Private zoomToGeometry

zoomToGeometry()

Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:72

Returns : void

Private addBaseMap

addBaseMap(layerOptions?: LayerOptions)

Inherited from CachedMapComponent

Defined in CachedMapComponent:180

Parameters :

Name	Type	Optional
layerOptions	`LayerOptions`	Yes

Returns : void

Private addOverlayMap

addOverlayMap(layerOptions: LayerOptions)

Inherited from CachedMapComponent

Defined in CachedMapComponent:164

Parameters :

Name	Type	Optional
layerOptions	`LayerOptions`	No

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 :

Name	Type	Optional
changes	`SimpleChanges`	No

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 :

Name	Type	Optional
layerOptions	`LayerOptions`	No

Returns : void

Private removeOverlayMap

removeOverlayMap(layerOptions: LayerOptions)

Inherited from CachedMapComponent

Defined in CachedMapComponent:173

Parameters :

Name	Type	Optional
layerOptions	`LayerOptions`	No

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

Properties

Private defaultStyle

Type : L.PathOptions

Default value :

{
        color: 'red',
        weight: 5,
        opacity: 0.65
    }

Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:32

Private geometryOnMap

Type : L.GeoJSON

Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:30

Private highlightGeometryOnMap

Type : L.GeoJSON

Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:29

Private highlightStyle

Type : L.PathOptions

Default value :

{
        color: 'blue',
        weight: 10,
        opacity: 1
    }

Defined in libs/map/src/lib/view/geometry-map-viewer/geometry-map-viewer.component.ts:38

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%;
    }
}

Legend

Html element

Component

Html element with directive

File

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

result-matching ""

No results matching ""