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

Add zoom to show alert
Some checks failed
FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit
Details

Browse Source
This commit is contained in:
Willem Dantuma 2021-01-29 11:25:37 +01:00
parent dbc330ab46
commit 321d34870e
8 changed files with 56 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
projects/common-map/src/fm-map/common-map.module.ts
View File

@ -68,6 +68,7 @@ import {LayerSwitcher} from './components/layer-switcher/layer-switcher.componen
import {HistogramDetailsComponent} from './components/legend/histogram-details/histogram-details.component';
import {StatisticsDetailsComponent} from './components/legend/statistics-details/statistics-details.component';
import { ifZoomToShowDirective} from './components/if-zoom-to-show/if-zoom-to-show.directive';
import { ZoomToShowAlert} from './components/zoom-to-show-alert/zoom-to-show-alert.component';
export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
const r = function(state, action) {
@ -149,7 +150,8 @@ export {
ForPackage ,
ITemporalItemLayer,
TemporalItemLayer,
ifZoomToShowDirective
ifZoomToShowDirective,
ZoomToShowAlert
}
@NgModule({
@ -202,7 +204,8 @@ export {
LayerSwitcher,
HistogramDetailsComponent,
StatisticsDetailsComponent,
ifZoomToShowDirective
ifZoomToShowDirective,
ZoomToShowAlert
],
entryComponents: [
FeatureListComponent,
@ -255,7 +258,8 @@ export {
FeatureListCropfieldComponent,
FeatureListFeatureContainerComponent,
ZoomToExtentComponent,
ifZoomToShowDirective
ifZoomToShowDirective,
ZoomToShowAlert
],
providers: [
FeatureIconService,

2
projects/common-map/src/fm-map/components/feature-list/feature-list.component.html
View File

@ -1,5 +1,5 @@
<div *ngIf="features;let features">
<fm-back-button></fm-back-button>>
<fm-back-button></fm-back-button>
<div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
<fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
</div>

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

@ -1,25 +1,39 @@
import { Directive, ViewContainerRef,TemplateRef,OnInit,Input } from '@angular/core';
import { IItemLayer } from '../../models/item.layer';
import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnChanges } from '@angular/core';
import { layer } from 'ol';
import { MapComponent } from 'ngx-openlayers';
@Directive({
selector: '[fm-map-ifZoomToShow]',
})
export class ifZoomToShowDirective implements OnInit {
@Input('fm-map-ifZoomToShow') itemLayer$:IItemLayer;
export class ifZoomToShowDirective implements OnInit,OnChanges {
@Input('fm-map-ifZoomToShow') layer$:layer;
constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private map$: MapComponent) { }
private hasView = false;
ngOnInit() {
let minZoom = this.itemLayer$.layer.getMinZoom();
let currentZoom = this.map$.instance.getView().getZoom();
private showView = false;
if ( currentZoom < minZoom ) {
this.viewContainerRef$.createEmbeddedView(this.templateRef$);
this.hasView=true;
} else if (this.hasView) {
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();
this.hasView = false;
} else {
this.viewContainerRef$.createEmbeddedView(this.templateRef$);
}
}
}
}
}

1
projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
View File

@ -27,6 +27,7 @@
</ng-container>
</ul>
</div>
<fm-map-zoom-to-show-alert [layer]="itemLayer?.layer"></fm-map-zoom-to-show-alert>
</div>
</div>
</div>

1
projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
View File

@ -26,6 +26,7 @@
</ng-container>
</ul>
</div>
<fm-map-zoom-to-show-alert [layer]="itemLayer?.layer"></fm-map-zoom-to-show-alert>
</div>
</div>
</div>

1
projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
View File

@ -22,6 +22,7 @@
</button>
</div>
</div>
<fm-map-zoom-to-show-alert [layer]="currentItemLayer()?.layer"></fm-map-zoom-to-show-alert>
</div>
<div class="card menu-card pt-2">
<div *ngIf="layers.length>1">

5
projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts
View File

@ -8,6 +8,7 @@ import { ForItemType } from '../for-item/for-itemtype.decorator';
import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
import { ITemporalItemLayer} from '../../models/item.layer';
import * as mapActions from '../../actions/map.actions';
import { IItemLayer } from 'common-map/public-api';
@ForItemType("vnd.farmmaps.itemtype.temporal")
@ -27,6 +28,10 @@ export class SelectedItemTemporalComponent extends AbstractSelectedItemComponent
this.store.dispatch(new mapActions.SetLayerIndex(layerIndex));
}
currentItemLayer():IItemLayer {
return (this.itemLayer as ITemporalItemLayer)?.selectedItemLayer
}
hasNext():boolean {
let temporalItemLayer = this.itemLayer as ITemporalItemLayer;
return temporalItemLayer && temporalItemLayer.nextItemLayer != null;

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

@ -0,0 +1,11 @@
import { Component, Input } from '@angular/core';
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>'
})
export class ZoomToShowAlert {
@Input() layer: layer;
}