File

libs/map/src/lib/layercontrols/layer-opacity-slider/layer-opacity-slider.component.ts

Extends

LayerControlComponent

Implements

OnChanges

Metadata

selector n52-layer-opacity-slider
styleUrls ./layer-opacity-slider.component.css
templateUrl ./layer-opacity-slider.component.html

Index

Properties
Methods
Inputs

Constructor

constructor()

Inputs

layeroptions
Type : LayerOptions
Inherited from LayerControlComponent
mapId
Type : string
Inherited from LayerControlComponent

Methods

ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
setOpacity
setOpacity(o: number)
Parameters :
Name Type Optional
o number No
Returns : void

Properties

Public opacity
Type : number
import { Component, OnChanges, SimpleChanges } from '@angular/core';
import { TileLayer } from 'leaflet';

import { LayerControlComponent } from '../layer-control-component';

@Component({
  selector: 'n52-layer-opacity-slider',
  templateUrl: './layer-opacity-slider.component.html',
  styleUrls: ['./layer-opacity-slider.component.css']
})
export class LayerOpacitySliderComponent extends LayerControlComponent implements OnChanges {

  public opacity: number;

  constructor() {
    super();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.layeroptions && this.layeroptions.layer instanceof TileLayer) {
      this.opacity = this.layeroptions.layer.options.opacity * 100;
    }
  }

  setOpacity(o: number) {
    this.opacity = o;
    if (this.layeroptions.layer instanceof TileLayer) {
      this.layeroptions.layer.setOpacity(this.opacity / 100);
    }
  }

}
<span>{{opacity}}</span>
<input name="ram" type="range" min="0" max="100" [(ngModel)]="opacity" (ngModelChange)="setOpacity($event)" value="0">

./layer-opacity-slider.component.css

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""