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

44
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'; import { MapComponent } from 'ngx-openlayers';
@Directive({ @Directive({
selector: '[fm-map-ifZoomToShow]', selector: '[fmMapIfZoomToShow]',
}) })
export class ifZoomToShowDirective implements OnInit,OnChanges { export class ifZoomToShowDirective implements OnInit {
@Input('fm-map-ifZoomToShow') layer$:layer; @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; private showView = false;
constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private map$: MapComponent) {
this.thenTemplate$ = templateRef$;
this.checkZoom();
}
ngOnInit() { ngOnInit() {
this.map$.instance.on('moveend', (e) => { this.map$.instance.on('moveend', (e) => {
this.checkZoom(); this.checkZoom();
}); });
} }
ngOnChanges() {
this.checkZoom();
}
checkZoom() { checkZoom() {
if(this.layer$ && this.map$.instance) { if(this.layer$ && this.map$.instance) {
let minZoom = this.layer$.getMinZoom(); let minZoom = this.layer$.getMinZoom();
let currentZoom = this.map$.instance.getView().getZoom(); let currentZoom = this.map$.instance.getView().getZoom();
let view = currentZoom < minZoom; let view = currentZoom < minZoom;
if(view!= this.showView) { if(view!= this.showView) {
this.viewContainerRef$.clear();
this.showView=view; this.showView=view;
if ( !this.showView) { if (this.showView && this.thenTemplate$ ) {
this.viewContainerRef$.clear(); this.viewContainerRef$.createEmbeddedView(this.templateRef$);
} else { } else if(this.elseTemplate$ ) {
this.viewContainerRef$.createEmbeddedView(this.templateRef$); 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({ @Component({
selector: 'fm-map-zoom-to-show-alert', 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 { export class ZoomToShowAlert {
@Input() layer: layer; @Input() layer: layer;