Merge pull request #11 from umr-dbs/map-grid

Map grid
umr-dbs · Dec 16, 2019 · 54797dd · 54797dd
2 parents ad7ed23 + df39b88
commit 54797dd
Show file tree

Hide file tree

Showing 15 changed files with 934 additions and 889 deletions.
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "lodash": "4.17.15",
     "moment": "2.24.0",
     "ngx-color-picker": "7.3.1",
-    "ol": "5.3.0",
+    "ol": "6.1.1",
     "papaparse": "4.6.3",
     "rxjs": "6.4.0",
     "ts-helpers": "1.1.2",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,6 +1,6 @@
 <mat-sidenav-container fullscreen>
-    <mat-sidenav #sidenavRight position="end" mode="side" (openedChange)="mapComponent.resize()">
-        <wave-sidenav-container #sidenavContainer></wave-sidenav-container>
+    <mat-sidenav position="end" mode="side" (openedChange)="mapComponent.resize()">
+        <wave-sidenav-container></wave-sidenav-container>
     </mat-sidenav>
     <div class="time-container" fxLayoutAlign="space-around center">
         <wave-zoom-handles (zoomIn)="map.zoomIn()" (zoomOut)="map.zoomOut()" class="mat-elevation-z4"></wave-zoom-handles>
@@ -12,15 +12,16 @@
     <wave-layer-list class="mat-elevation-z4" [height]="middleContainerHeight$ | async"></wave-layer-list>
 
     <div class="mid-container" [style.height.px]="middleContainerHeight$ | async">
-        <wave-ol-map #map>
-            <ng-template ngFor let-layer [ngForOf]='layersReverse$ | async'>
+        <wave-map-container #map [grid]="mapIsGrid$ | async">
+            <ng-template ngFor let-layer [ngForOf]="layersReverse$ | async">
                 <ng-template [ngIf]="layer.operator.resultType === ResultTypes.POINTS">
                     <wave-ol-point-layer
                         [layer]="layer"
                         [visible]="layer.visible"
                         [symbology]="layer.symbology"
                         [projection]="projectService.getProjectionStream() | async"
                         [time]="projectService.getTimeStream() | async"
+                        (mapRedraw)="map.layerForcesRedraw()"
                     ></wave-ol-point-layer>
                 </ng-template>
                 <ng-template [ngIf]="layer.operator.resultType === ResultTypes.LINES">
@@ -30,6 +31,7 @@
                         [symbology]="layer.symbology"
                         [projection]="projectService.getProjectionStream() | async"
                         [time]="projectService.getTimeStream() | async"
+                        (mapRedraw)="map.layerForcesRedraw()"
                     ></wave-ol-line-layer>
                 </ng-template>
                 <ng-template [ngIf]="layer.operator.resultType === ResultTypes.POLYGONS">
@@ -39,6 +41,7 @@
                         [symbology]="layer.symbology"
                         [projection]="projectService.getProjectionStream() | async"
                         [time]="projectService.getTimeStream() | async"
+                        (mapRedraw)="map.layerForcesRedraw()"
                     ></wave-ol-polygon-layer>
                 </ng-template>
                 <ng-template [ngIf]="layer.operator.resultType === ResultTypes.RASTER">
@@ -48,10 +51,11 @@
                         [symbology]="layer.symbology"
                         [projection]="projectService.getProjectionStream() | async"
                         [time]="projectService.getTimeStream() | async"
+                        (mapRedraw)="map.layerForcesRedraw()"
                     ></wave-ol-raster-layer>
                 </ng-template>
             </ng-template>
-        </wave-ol-map>
+        </wave-map-container>
     </div>
     <div
         class="bottom-container mat-elevation-z4"

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -29,7 +29,7 @@ import {ProjectService} from './project/project.service';
 import {UserService} from './users/user.service';
 import {StorageService, StorageStatus} from './storage/storage.service';
 
-import {MapComponent} from './map/map.component';
+import {MapContainerComponent} from './map/map-container/map-container.component';
 
 import {Layer, VectorLayer} from './layers/layer.model';
 import {LayerService} from './layers/layer.service';
@@ -66,7 +66,7 @@ import {combineLatest} from 'rxjs/internal/observable/combineLatest';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit, AfterViewInit {
-    @ViewChild(MapComponent) mapComponent: MapComponent;
+    @ViewChild(MapContainerComponent) mapComponent: MapContainerComponent;
     @ViewChild(MatTabGroup) bottomTabs: MatTabGroup;
 
     @ViewChild(MatSidenav) rightSidenav: MatSidenav;
@@ -81,6 +81,8 @@ export class AppComponent implements OnInit, AfterViewInit {
     ResultTypes = ResultTypes; // tslint:disable-line:no-unused-variable variable-name
     LayoutService = LayoutService;
 
+    mapIsGrid$: Observable<boolean>;
+
     private windowHeight$ = new BehaviorSubject<number>(window.innerHeight);
 
     constructor(public layerService: LayerService,
@@ -126,6 +128,8 @@ export class AppComponent implements OnInit, AfterViewInit {
 
     ngOnInit() {
         this.mapService.registerMapComponent(this.mapComponent);
+        this.mapIsGrid$ = this.mapService.isGrid$;
+
         this.middleContainerHeight$ = this.layoutService.getMapHeightStream(this.windowHeight$).pipe(
             tap(() => this.mapComponent.resize()));
         this.bottomContainerHeight$ = this.layoutService.getLayerDetailViewStream(this.windowHeight$);

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -10,7 +10,7 @@ import 'hammerjs';
 
 import {AppComponent} from './app.component';
 import {DataRepositoryComponent} from './operators/dialogs/data-repository/data-repository.component';
-import {MapComponent} from './map/map.component';
+import {MapContainerComponent} from './map/map-container/map-container.component';
 import {
     OlLineLayerComponent,
     OlPointLayerComponent,
@@ -231,7 +231,7 @@ export function configInitializer(config: Config) {
         LineageGraphComponent,
         LoadProjectComponent,
         LoginComponent,
-        MapComponent,
+        MapContainerComponent,
         MappingColorizerToGradientPipe,
         MappingDataSourceFilter,
         MediaviewAudioComponent,