✨ get centroid of selected field automatically

src/app/app.component.ts

@@ -147,14 +147,7 @@ export class AppComponent {
             sld: fieldSld,
             //path: 'User generated',
           },
-          source: new VectorSource({
-            features: [
-              new GeoJSON().readFeature(this.calculatorService.field, {
-                dataProjection: 'EPSG:4326',
-                featureProjection: 'EPSG:5514',
-              }),
-            ],
-          }),
+          source: this.calculatorService.field,
         }),
       ],
       translationOverrides: i18n,

src/app/calculator/calculator.service.ts

@@ -3,6 +3,12 @@ import {Injectable} from '@angular/core';
 import {Subject} from 'rxjs';
 import {catchError} from 'rxjs/operators';
 
+import {GeoJSON} from 'ol/format';
+import {Geometry} from 'ol/geom';
+import {Vector as VectorSource} from 'ol/source';
+import {getCenter} from 'ol/extent';
+import {transform} from 'ol/proj';
+
 import {HsConfig} from 'hslayers-ng';
 
 import {ZonesService} from './zones.service';
@@ -15,14 +21,13 @@ export class CalculatorService {
   availableProducts = ['EVI', 'RVI4S1'];
   dateRangeSelects: Subject<{date: string}> = new Subject();
   dateCalendarSelects: Subject<{date: string}> = new Subject();
+  field: VectorSource<Geometry>;
   selectedDate;
   selectedField;
   //selectedProduct;
   serviceBaseUrl = 'https://fieldcalc.lesprojekt.cz/';
-  //TODO: temporary hard-coded hack
-  centroid = {type: 'Point', coordinates: [16.944, 49.228]};
   //TODO: temporarry hard-coded hack
-  field = {
+  fieldGeoJSON = {
     type: 'Polygon',
     coordinates: [
       [
@@ -45,7 +50,16 @@ export class CalculatorService {
     private zonesService: ZonesService
   ) {
     //TODO: temporary hard-coded hack
-    this.selectedField = this.centroid;
+    this.field = new VectorSource({
+      features: [
+        new GeoJSON().readFeature(this.fieldGeoJSON, {
+          dataProjection: 'EPSG:4326',
+          featureProjection: 'EPSG:5514',
+        }),
+      ],
+    });
+    //TODO: temporary hard-coded hack
+    this.selectedField = this.field;
     this.dateRangeSelects.subscribe(({date}) => {
       this.selectedDate = date;
     });
@@ -59,7 +73,12 @@ export class CalculatorService {
     return this.availableDates === undefined;
   }
 
+  /**
+   * Call 'get_dates' API method
+   */
   async getDates({product}: {product: Index}) {
+    //TODO: temporary hard-coded hack
+    this.selectedField = this.field;
     try {
       const data = await this.httpClient
         .get<{dates: string[]}>(
@@ -69,7 +88,7 @@ export class CalculatorService {
             'product=' +
             product +
             '&centroid=' +
-            JSON.stringify(this.centroid)
+            JSON.stringify(this.getCentroidOfField(this.selectedField))
         )
         .toPromise();
       console.log('data received!');
@@ -79,15 +98,29 @@ export class CalculatorService {
        * so it won't get sent to the API as a wrong param
        */
       this.selectedDate = undefined;
-      //TODO: temporary hard-coded hack
-      this.selectedField = this.field;
     } catch (err) {
       console.error('Somethin fucked up!');
       console.log(err);
     }
   }
 
+  getCentroidOfField(field) {
+    return {
+      type: 'Point',
+      coordinates: transform(
+        getCenter(field.getExtent()),
+        'EPSG:5514',
+        'EPSG:4326'
+      ),
+    };
+  }
+
+  /**
+   * Call 'get_zones' API method
+   */
   async getZones({product}: {product: Index}) {
+    //TODO: temporary hard-coded hack
+    this.selectedField = this.fieldGeoJSON;
     try {
       const data = await this.httpClient
         .post(