feat(cluster): update distance input

Add distance cluster example.
quentinlampin · Jul 23, 2019 · 5edbd57 · 5edbd57
1 parent 7bb295a
commit 5edbd57
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/projects/ngx-openlayers/src/lib/sources/cluster.component.ts b/projects/ngx-openlayers/src/lib/sources/cluster.component.ts
@@ -1,4 +1,13 @@
-import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
+import {
+  Component,
+  Host,
+  Input,
+  forwardRef,
+  ContentChild,
+  AfterContentInit,
+  SimpleChanges,
+  OnChanges,
+} from '@angular/core';
 import { Feature } from 'ol';
 import { LayerVectorComponent } from '../layers/layervector.component';
 import { SourceComponent } from './source.component';
@@ -13,7 +22,7 @@ import { Point } from 'ol/geom';
   `,
   providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceClusterComponent) }],
 })
-export class SourceClusterComponent extends SourceComponent implements AfterContentInit {
+export class SourceClusterComponent extends SourceComponent implements AfterContentInit, OnChanges {
   instance: Cluster;
 
   @Input()
@@ -37,4 +46,10 @@ export class SourceClusterComponent extends SourceComponent implements AfterCont
     this.instance = new Cluster(this);
     this.host.instance.setSource(this.instance);
   }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance && changes.hasOwnProperty('distance')) {
+      this.instance.setDistance(this.distance);
+    }
+  }
 }
diff --git a/src/app/cluster/cluster.component.ts b/src/app/cluster/cluster.component.ts
@@ -29,7 +29,6 @@ import { Component, OnInit } from '@angular/core';
               <aol-style-stroke [color]="'#fff'"></aol-style-stroke>
               <aol-style-fill [color]="'#3399CC'"></aol-style-fill>
             </aol-style-circle>
-            <aol-style-text [text]="'1'"> <aol-style-fill [color]="'#fff'"></aol-style-fill> </aol-style-text>
           </aol-style>
         </aol-source-cluster>
       </aol-layer-vector>
@@ -52,7 +51,28 @@ import { Component, OnInit } from '@angular/core';
         </aol-source-vector>
       </aol-layer-vector>
     </aol-map>
+
+    <div class="control">
+      <span>Distance : </span>
+      <input type="range" min="0" max="255" [(ngModel)]="distance" />
+      <span> ({{ distance }})</span>
+    </div>
   `,
+  styles: [
+    `
+      aol-map {
+        display: block;
+        height: calc(100% - 250px);
+      }
+
+      .control {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        margin: 20px;
+      }
+    `,
+  ],
 })
 export class ClusterComponent implements OnInit {
   distance = 60;