libs/open-layers/src/lib/controls/ol-overview-map/ol-overview-map.component.ts
Control component for an overview map
encapsulation | ViewEncapsulation.None |
selector | n52-ol-overview-map |
styleUrls | ol-overview-map.component.scss |
Methods |
|
Inputs |
collapsible | |
Default value : true
|
|
Can be collapsed |
collased | |
Default value : true
|
|
Collapsed on startup |
layers | |
Type : Layer[]
|
|
Layers, which are shown in the overview map |
position | |
Type : "upperleft" | "upperright" | "bottomleft" | "bottomright"
|
|
Default value : 'bottomleft'
|
|
position of the overview map |
Private createCollapseLabel |
createCollapseLabel()
|
Returns :
string
|
Private createLabel |
createLabel()
|
Returns :
string
|
generateClassName |
generateClassName()
|
Returns :
string
|
mapInitialized | ||||||
mapInitialized(map: Map)
|
||||||
Parameters :
Returns :
void
|
Abstract mapInitialized | ||||||||
mapInitialized(map: Map)
|
||||||||
Inherited from
OlBaseComponent
|
||||||||
Defined in
OlBaseComponent:33
|
||||||||
This method will be triggered, when the corrsponding map is initialized.
Parameters :
Returns :
any
|
ngAfterViewInit |
ngAfterViewInit()
|
Inherited from
OlBaseComponent
|
Defined in
OlBaseComponent:24
|
Subscribes for the initialization of the map after view is initialized
Returns :
void
|
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { Map } from 'ol';
import { OverviewMap } from 'ol/control';
import { Layer } from 'ol/layer';
import { OlBaseComponent } from '../../ol-base.component';
/**
* Control component for an overview map
*/
@Component({
selector: 'n52-ol-overview-map',
template: '',
encapsulation: ViewEncapsulation.None,
styleUrls: ['ol-overview-map.component.scss']
})
export class OlOverviewMapComponent extends OlBaseComponent {
/**
* Collapsed on startup
*/
@Input() collased = true;
/**
* Can be collapsed
*/
@Input() collapsible = true;
/**
* Layers, which are shown in the overview map
*/
@Input() layers: Layer[];
/**
* position of the overview map
*/
@Input() position: 'upperleft' | 'upperright' | 'bottomleft' | 'bottomright' = 'bottomleft';
mapInitialized(map: Map) {
const control = new OverviewMap({
className: this.generateClassName(),
collapseLabel: this.createCollapseLabel(),
label: this.createLabel(),
collapsed: this.collased,
collapsible: this.collapsible,
layers: this.layers
});
map.addControl(control);
}
private createLabel(): string {
if (this.position === 'bottomright' || this.position === 'upperright') {
return '\u00AB';
} else {
return '\u00BB';
}
}
private createCollapseLabel(): string {
if (this.position === 'bottomright' || this.position === 'upperright') {
return '\u00BB';
} else {
return '\u00AB';
}
}
generateClassName(): string {
return `ol-overviewmap ol-custom-overviewmap ol-${this.position}-overviewmap`;
}
}
ol-overview-map.component.scss
.ol-upperright-overviewmap,
.ol-upperright-overviewmap.ol-uncollapsible {
bottom: auto;
left: auto;
right: .5em;
top: .5em;
}
.ol-upperright-overviewmap:not(.ol-collapsed) button {
bottom: auto;
left: auto;
right: 1px;
top: 1px;
}
.ol-upperleft-overviewmap,
.ol-upperleft-overviewmap.ol-uncollapsible {
bottom: auto;
left: .5em;
right: auto;
top: .5em;
}
.ol-upperleft-overviewmap:not(.ol-collapsed) button {
bottom: auto;
left: 1px;
right: auto;
top: 1px;
}
.ol-bottomright-overviewmap,
.ol-bottomright-overviewmap.ol-uncollapsible {
bottom: .5em;
left: auto;
right: .5em;
top: auto;
}
.ol-bottomright-overviewmap:not(.ol-collapsed) button {
bottom: 1px;
left: auto;
right: 1px;
top: auto;
}
.ol-custom-overviewmap:not(.ol-collapsed) {
border: 1px solid black;
border-radius: 4px;
}
.ol-custom-overviewmap .ol-overviewmap-box {
border: 2px solid red;
}
.ol-rotate {
top: 170px;
right: 0;
}