libs/map/src/lib/layercontrols/layer-opacity-slider/layer-opacity-slider.component.ts
selector | n52-layer-opacity-slider |
styleUrls | ./layer-opacity-slider.component.css |
templateUrl | ./layer-opacity-slider.component.html |
Properties |
|
Methods |
Inputs |
constructor()
|
layeroptions | |
Type : LayerOptions
|
|
Inherited from
LayerControlComponent
|
|
Defined in
LayerControlComponent:7
|
mapId | |
Type : string
|
|
Inherited from
LayerControlComponent
|
|
Defined in
LayerControlComponent:9
|
ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Parameters :
Returns :
void
|
setOpacity | ||||||
setOpacity(o: number)
|
||||||
Parameters :
Returns :
void
|
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