File

libs/open-layers/src/lib/controls/ol-overview-map/ol-overview-map.component.ts

Description

Control component for an overview map

Extends

OlBaseComponent

Metadata

encapsulation ViewEncapsulation.None
selector n52-ol-overview-map
styleUrls ol-overview-map.component.scss

Index

Methods
Inputs

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

Methods

Private createCollapseLabel
createCollapseLabel()
Returns : string
Private createLabel
createLabel()
Returns : string
generateClassName
generateClassName()
Returns : string
mapInitialized
mapInitialized(map: Map)
Parameters :
Name Type Optional
map Map No
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 :
Name Type Optional Description
map Map No
  • the created map
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;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""