FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor fmMapIfZoomToShow
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2021-03-20 18:26:01 +01:00
parent c9fac05aa6
commit fa146f2c6e
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
projects/common-map/src/fm-map/components/if-zoom-to-show/if-zoom-to-show.directive.ts
View File

@ -3,35 +3,55 @@ import { layer } from 'ol';
import { MapComponent } from 'ngx-openlayers';
@Directive({
selector: '[fm-map-ifZoomToShow]',
selector: '[fmMapIfZoomToShow]',
})
export class ifZoomToShowDirective implements OnInit,OnChanges {
@Input('fm-map-ifZoomToShow') layer$:layer;
export class ifZoomToShowDirective implements OnInit {
@Input()
set fmMapIfZoomToShow(layer:layer) {
this.layer$=layer;
this.checkZoom();
}
constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private map$: MapComponent) { }
@Input()
set fmMapIfZoomToShowThen(templateRef: TemplateRef<any>) {
this.thenTemplate$ = templateRef;
this.checkZoom();
}
@Input()
set fmMapIfZoomToShowElse(templateRef: TemplateRef<any>) {
this.elseTemplate$ = templateRef;
this.checkZoom();
}
private layer$:layer;
private thenTemplate$:TemplateRef<any>;
private elseTemplate$:TemplateRef<any>;
private showView = false;
constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private map$: MapComponent) {
this.thenTemplate$ = templateRef$;
this.checkZoom();
}
ngOnInit() {
this.map$.instance.on('moveend', (e) => {
this.checkZoom();
});
}
ngOnChanges() {
this.checkZoom();
}
checkZoom() {
if(this.layer$ && this.map$.instance) {
let minZoom = this.layer$.getMinZoom();
let currentZoom = this.map$.instance.getView().getZoom();
let view = currentZoom < minZoom;
if(view!= this.showView) {
this.showView=view;
if ( !this.showView) {
this.viewContainerRef$.clear();
} else {
this.showView=view;
if (this.showView && this.thenTemplate$ ) {
this.viewContainerRef$.createEmbeddedView(this.templateRef$);
} else if(this.elseTemplate$ ) {
this.viewContainerRef$.createEmbeddedView(this.elseTemplate$);
}
}
}

2
projects/common-map/src/fm-map/components/zoom-to-show-alert/zoom-to-show-alert.component.ts
View File

@ -3,7 +3,7 @@ import { layer } from 'ol';
@Component({
selector: 'fm-map-zoom-to-show-alert',
template: '<div *fm-map-ifZoomToShow="layer" class="alert alert-info"><i class="fas fa-search-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Zoom in to show layer</span></div>'
template: '<div *fmMapIfZoomToShow="layer" class="alert alert-info"><i class="fas fa-search-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Zoom in to show layer</span></div>'
})
export class ZoomToShowAlert {
@Input() layer: layer;