feat(overviewmap): refresh overview when the view changes

Author: samuel-girard

projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { Layer } from 'ol/layer';
 import { View } from 'ol';
 import { OverviewMap } from 'ol/control';
@@ -10,7 +10,7 @@ import { MapComponent } from '../map.component';
     <ng-content></ng-content>
   `,
 })
-export class ControlOverviewMapComponent implements OnInit, OnDestroy {
+export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy {
   instance: OverviewMap;
   @Input()
   collapsed: boolean;
@@ -29,17 +29,26 @@ export class ControlOverviewMapComponent implements OnInit, OnDestroy {
   @Input()
   view: View;
 
-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-overviewmap');
-  }
+  constructor(private map: MapComponent) {}
 
   ngOnInit() {
     this.instance = new OverviewMap(this);
     this.map.instance.addControl(this.instance);
   }
 
   ngOnDestroy() {
-    // console.log('removing aol-control-overviewmap');
     this.map.instance.removeControl(this.instance);
   }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance != null && changes.hasOwnProperty('view')) {
+      this.reloadInstance();
+    }
+  }
+
+  private reloadInstance() {
+    this.map.instance.removeControl(this.instance);
+    this.instance = new OverviewMap(this);
+    this.map.instance.addControl(this.instance);
+  }
 }

src/app/app.module.ts

@@ -26,6 +26,7 @@ import { MarkerComponent } from './marker/marker.component';
 import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
 import { ImageWMSComponent } from './image-wms/image-wms.component';
 import { ViewProjectionUpdateComponent } from './view-projection-update/view-projection-update.component';
+import { OverviewComponent } from './overview/overview.component';
 
 @NgModule({
   declarations: [
@@ -48,6 +49,7 @@ import { ViewProjectionUpdateComponent } from './view-projection-update/view-pro
     MarkerComponent,
     ArcgisImageComponent,
     ImageWMSComponent,
+    OverviewComponent,
     ViewProjectionUpdateComponent,
   ],
   imports: [BrowserModule, FormsModule, AppRoutingModule, AngularOpenlayersModule, ReactiveFormsModule],

src/app/app.routing.ts

@@ -19,6 +19,7 @@ import { MarkerComponent } from './marker/marker.component';
 import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
 import { ImageWMSComponent } from './image-wms/image-wms.component';
 import { ViewProjectionUpdateComponent } from './view-projection-update/view-projection-update.component';
+import { OverviewComponent } from './overview/overview.component';
 
 const routes: Routes = [
   { path: '', component: ExamplesListComponent },
@@ -43,6 +44,7 @@ const routes: Routes = [
       { path: 'arcgis-image', component: ArcgisImageComponent },
       { path: 'image-wms', component: ImageWMSComponent },
       { path: 'view-projection-update', component: ViewProjectionUpdateComponent },
+      { path: 'overview', component: OverviewComponent },
     ],
   },
   { path: '**', redirectTo: '' },

src/app/example-list.ts

@@ -99,4 +99,10 @@ export const examplesList = [
     description: 'Dynamically update view projection.',
     routerLink: 'view-projection-update',
   },
+  {
+    title: 'Overview',
+    description: 'Overview of map',
+    routerLink: 'overview',
+    openLayersLink: 'https://openlayers.org/en/latest/examples/overviewmap.html',
+  },
 ];

src/app/overview/overview.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <aol-map width="50%" height="50%">
+      <aol-interaction-default></aol-interaction-default>
+      <aol-control-defaults></aol-control-defaults>
+      <aol-control-overviewmap></aol-control-overviewmap>
+      <aol-view #view [zoom]="zoom">
+        <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
+      </aol-view>
+      <aol-layer-tile #osm [opacity]="1"> <aol-source-osm></aol-source-osm> </aol-layer-tile>
+    </aol-map>
+  `,
+})
+export class OverviewComponent {
+  public zoom = 15;
+}