Implement client side thumbnail renderer for features

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.html

@@ -1,4 +1,7 @@
 <div *ngIf="feature;let feature" class="row m-0">  
+  <div class="col-3 p-1">
+      <canvas  #canvas class="thumbnail"height="100" width="100"></canvas>
+  </div>
   <div class="col p-2">
     <h1 class="card-title" title="{{feature.get('name')}}">{{feature.get('name')}}</h1>
     <div class="card-text"><span>{{areaInHa(feature)| number:'1.2-2'}} ha</span>&nbsp;<span>{{feature.get('cropTypeName')}}</span> </div>

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.scss

@@ -27,3 +27,8 @@
   overflow: hidden;
 }
 
+.thumbnail {
+  width: 100%;
+  height: 100%;
+}
+

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts

@@ -1,11 +1,14 @@
-import { Component, Input, Injectable} from '@angular/core';
+import { Component, Injectable,ViewChild,AfterViewInit} from '@angular/core';
 import { Feature } from 'ol';
+import * as extent from 'ol/extent';
+import * as render from 'ol/render';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
 import { commonReducers,ItemTypeService,AppConfig } from '@farmmaps/common';
 import { AbstractFeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import {getArea} from 'ol/sphere';
+import * as style from 'ol/style';
 
 
 @ForItemType("vnd.farmmaps.itemtype.cropfield")
@@ -15,7 +18,9 @@ import {getArea} from 'ol/sphere';
   templateUrl: './feature-list-feature-cropfield.component.html',
   styleUrls: ['./feature-list-feature-cropfield.component.scss']
 })
-export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFeatureComponent {
+export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFeatureComponent implements AfterViewInit {
+
+  @ViewChild('canvas', { static: false }) canvas;
 
   constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService,config:AppConfig) {
     super(store, itemTypeService,config);
@@ -28,4 +33,40 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
     if(a) return a;
     return  getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
   }
+
+  render(canvas, feature:Feature) {
+    let vectorContext = render.toContext(canvas.getContext( '2d' ));
+
+    let width=canvas.width;
+    let height = canvas.height;
+    let strokeStyle  = new style.Style({
+      stroke: new style.Stroke({ color: 'black',width:2 })
+    });
+
+    let geom   = feature.getGeometry().clone(),
+        line   = geom.getCoordinates()[0],
+        e = extent.boundingExtent( line );
+
+    let dxy = extent.getCenter(e),
+        sxy = [ 
+            width / extent.getWidth(e),
+            height / extent.getHeight(e)
+        ];
+
+    let dx = dxy[0], 
+        dy = dxy[1],
+        sx = sxy[0],
+        sy = sxy[1];
+
+    geom.translate( -dx, -dy );
+    geom.scale( Math.min(sx, sy), -Math.min(sx, sy) );
+    geom.translate( width / 2, height / 2 );
+
+    vectorContext.setStyle( strokeStyle );
+    vectorContext.drawGeometry( geom );
+  }
+
+  ngAfterViewInit() {
+    this.render(this.canvas.nativeElement,this.feature);
+  }  
 }