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

@@ -1,10 +1,8 @@
-<div *ngIf="feature;let feature" class="d-flex m-0">  
+<div *ngIf="feature;let feature" class="row m-0">  
-  <div class="p-2">
+  <div #container class="col-3 p-1">
-    <div #container class="thumbnail">
+      <canvas  #canvas class="thumbnail"></canvas>
-      <canvas  #canvas ></canvas>
   </div>
-  </div>
+  <div class="col p-2">
-  <div class="flex-grow p-2 overflow-hidden">
     <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>
     <div class="card-text"><span>{{feature.get('datadate')|date}}</span> - <span>{{feature.get('dataenddate')|date}}</span> </div>

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

@@ -9,10 +9,18 @@
   text-overflow: ellipsis;
 }
 
-.card-text {
+.thumbnail > img {
-  overflow: hidden;
+  width: 100%;
-  white-space: nowrap;
+  height: auto;
-  text-overflow: ellipsis;
+}
+
+.thumbnail > div {
+  width: 100%;
+  font-size: 2rem;
+  text-align: center;
+  min-height: 3rem;
+  color: white;
+  padding-top: 0.5rem;
 }
 
 .col {
@@ -20,7 +28,7 @@
 }
 
 .thumbnail {
-  width: 4em;
+  width: 100%;
-  height: 4em;
+  height: 100%;
 }
 

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

@@ -35,9 +35,47 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
     return  getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
   }
 
+  scaleCanvas(canvas, context, width, height) {
+    // assume the device pixel ratio is 1 if the browser doesn't specify it
+    const devicePixelRatio = window.devicePixelRatio || 1;
+  
+    // determine the 'backing store ratio' of the canvas context
+    const backingStoreRatio = (
+      context.webkitBackingStorePixelRatio ||
+      context.mozBackingStorePixelRatio ||
+      context.msBackingStorePixelRatio ||
+      context.oBackingStorePixelRatio ||
+      context.backingStorePixelRatio || 1
+    );
+  
+    // determine the actual ratio we want to draw at
+    const ratio = devicePixelRatio / backingStoreRatio;
+  
+    if (devicePixelRatio !== backingStoreRatio) {
+      // set the 'real' canvas size to the higher width/height
+      canvas.width = width * ratio;
+      canvas.height = height * ratio;
+  
+      // ...then scale it back down with CSS
+      canvas.style.width = width + 'px';
+      canvas.style.height = height + 'px';
+    }
+    else {
+      // this is a normal 1:1 device; just scale it simply
+      canvas.width = width;
+      canvas.height = height;
+      canvas.style.width = '';
+      canvas.style.height = '';
+    }
+  
+    // scale the drawing context so everything will work at the higher ratio
+    context.scale(ratio, ratio);
+  }
 
   render(canvas,width,height,feature:Feature) {  
-    let renderContext = render.toContext(canvas.getContext( '2d'),{ size: [width, height] });  
+    let canvasContext = canvas.getContext( '2d',{width:width,height:height});      
+    this.scaleCanvas(canvas,canvasContext,width,height);
+    let renderContext = render.toContext(canvasContext);  
    
     let strokeStyle  = new style.Style({
       stroke: new style.Stroke({ color: 'black',width:1.5 })
@@ -50,7 +88,7 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
     let dxy = extent.getCenter(e),
         sxy = [ 
             (width - 2 ) / extent.getWidth(e),
-            (height - 2 ) / extent.getHeight(e)
+            (height -2 ) / extent.getHeight(e)
         ];
 
     let dx = dxy[0],