feat(graticule): unregister on destroy

Hangle graticule destruction. Add graticule example.
quentinlampin · Jun 4, 2019 · 5e20e8d · 5e20e8d
1 parent 410f876
commit 5e20e8d
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 2 deletions.
diff --git a/projects/ngx-openlayers/src/lib/graticule.component.ts b/projects/ngx-openlayers/src/lib/graticule.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
 import { Graticule } from 'ol';
 import { Stroke } from 'ol/style';
 import { MapComponent } from './map.component';
@@ -7,7 +7,7 @@ import { MapComponent } from './map.component';
   selector: 'aol-graticule',
   template: '<ng-content></ng-content>',
 })
-export class GraticuleComponent implements AfterContentInit, OnChanges {
+export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestroy {
   instance: any;
   public componentType = 'graticule';
 
@@ -50,4 +50,8 @@ export class GraticuleComponent implements AfterContentInit, OnChanges {
     });
     this.instance.setMap(this.map.instance);
   }
+
+  ngOnDestroy(): void {
+    this.instance.setMap(null);
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { OverviewComponent } from './overview/overview.component';
 import { TileJsonComponent } from './tile-json/tile-json.component';
 import { SelectInteractionComponent } from './select-interaction/select-interaction.component';
 import { ImageStaticComponent } from './image-static/image-static.component';
+import { GraticuleComponent } from './graticule/graticule.component';
 
 @NgModule({
   declarations: [
@@ -59,6 +60,7 @@ import { ImageStaticComponent } from './image-static/image-static.component';
     TileJsonComponent,
     OverviewComponent,
     ViewProjectionUpdateComponent,
+    GraticuleComponent,
   ],
   imports: [BrowserModule, FormsModule, AppRoutingModule, AngularOpenlayersModule, ReactiveFormsModule],
   providers: [],

diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
@@ -24,6 +24,7 @@ import { OverviewComponent } from './overview/overview.component';
 import { TileJsonComponent } from './tile-json/tile-json.component';
 import { SelectInteractionComponent } from './select-interaction/select-interaction.component';
 import { ImageStaticComponent } from './image-static/image-static.component';
+import { GraticuleComponent } from './graticule/graticule.component';
 
 const routes: Routes = [
   { path: '', component: ExamplesListComponent },
@@ -53,6 +54,7 @@ const routes: Routes = [
       { path: 'image-static', component: ImageStaticComponent },
       { path: 'select-interaction', component: SelectInteractionComponent },
       { path: 'tile-json', component: TileJsonComponent },
+      { path: 'graticule', component: GraticuleComponent },
     ],
   },
   { path: '**', redirectTo: '' },

diff --git a/src/app/example-list.ts b/src/app/example-list.ts
@@ -129,4 +129,10 @@ export const examplesList = [
     routerLink: 'tile-json',
     openLayersLink: 'https://openlayers.org/en/latest/examples/tilejson.html',
   },
+  {
+    title: 'Graticule',
+    description: 'Example of using aol-graticule. This example shows how to add a graticule overlay to a map',
+    routerLink: 'graticule',
+    openLayersLink: 'https://openlayers.org/en/latest/examples/graticule.html',
+  },
 ];
diff --git a/src/app/graticule/graticule.component.ts b/src/app/graticule/graticule.component.ts
@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { Stroke } from 'ol/style';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <aol-map width="100%" height="100%">
+      <aol-interaction-default></aol-interaction-default>
+      <aol-control-defaults></aol-control-defaults>
+      <aol-control-fullscreen></aol-control-fullscreen>
+      <aol-view [zoom]="zoom"> <aol-coordinate [x]="-10997148" [y]="4569099"></aol-coordinate> </aol-view>
+
+      <aol-layer-tile>
+        <aol-source-osm></aol-source-osm>
+      </aol-layer-tile>
+
+      <aol-graticule *ngIf="shownGraticule" [strokeStyle]="graticuleStyle" [showLabels]="true"></aol-graticule>
+    </aol-map>
+
+    <div class="controls">
+      <input type="checkbox" id="graticule" name="graticule" [(ngModel)]="shownGraticule" />
+      <label for="graticule">Toggle graticule</label>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+      }
+
+      aol-map {
+        width: 80%;
+      }
+
+      .controls {
+        width: 18%;
+        padding: 1rem;
+      }
+    `,
+  ],
+})
+export class GraticuleComponent {
+  public zoom = 4;
+  public opacity = 1.0;
+  public shownGraticule = true;
+  public graticuleStyle = new Stroke({
+    color: 'rgba(255,120,0,0.9)',
+    width: 2,
+    lineDash: [0.5, 4],
+  });
+}