✨ Display filed in the map

+ change field to a larger one

src/app/app.component.ts

@@ -3,6 +3,7 @@ import {Component} from '@angular/core';
 import proj4 from 'proj4';
 import {get as getProjection, transform} from 'ol/proj';
 import {register} from 'ol/proj/proj4';
+import {GeoJSON} from 'ol/format';
 import {View} from 'ol';
 import {OSM, Vector as VectorSource} from 'ol/source';
 import {Tile, Vector as VectorLayer} from 'ol/layer';
@@ -15,6 +16,7 @@ import {
 
 import i18n from './translations.json';
 import {AppService} from './app.service';
+import {CalculatorService} from './calculator/calculator.service';
 
 proj4.defs(
   'EPSG:3045',
@@ -37,13 +39,14 @@ export class AppComponent {
   title = 'hslayers-application';
   constructor(
     private appService: AppService,
+    private calculatorService: CalculatorService,
     /* Inject here all modules from HSLayers-NG which you intend to use */
     public hsConfig: HsConfig,
     private hsEventBusService: HsEventBusService,
     private hsToastService: HsToastService,
   ) {
     /* Define the polygon's style using SLD */
-    const polygonSld = `<?xml version="1.0" encoding="ISO-8859-1"?>
+    const fieldSld = `<?xml version="1.0" encoding="ISO-8859-1"?>
       <StyledLayerDescriptor version="1.0.0" 
           xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
           xmlns="http://www.opengis.net/sld" 
@@ -58,9 +61,15 @@ export class AppComponent {
               <Rule>
               <PolygonSymbolizer>
               <Fill>
-                <CssParameter name="fill">#000080</CssParameter>
+                <CssParameter name="fill">#ffffff</CssParameter>
+                <CssParameter name="fill-opacity">0.7</CssParameter>
               </Fill>
-            </PolygonSymbolizer>
+              <Stroke>
+                <CssParameter name="stroke">#ff0000</CssParameter>
+                <CssParameter name="stroke-opacity">1</CssParameter>
+                <CssParameter name="stroke-width">3.9</CssParameter>
+              </Stroke>
+              </PolygonSymbolizer>
               </Rule>
             </FeatureTypeStyle>
           </UserStyle>
@@ -139,10 +148,14 @@ export class AppComponent {
                 description: 'none',
               },
             },
-            sld: polygonSld,
+            sld: fieldSld,
             //path: 'User generated',
           },
-          source: new VectorSource(),
+          source: new VectorSource({
+            features: [new GeoJSON().readFeature(this.calculatorService.field, {
+              dataProjection: 'EPSG:4326', featureProjection: 'EPSG:5514'
+            })]
+          }),
         }),
       ],
       translationOverrides: i18n,

src/app/calculator/calculator.service.ts

@@ -15,7 +15,8 @@ export class CalculatorService {
   //TODO: temporary hard-coded hack
   centroid = {type: 'Point', coordinates: [16.944, 49.228]};
   //TODO: temporarry hard-coded hack
-  field = {type: 'Polygon', coordinates: [[[17.01403296191603, 49.24858329768389], [17.014029303734432, 49.24849340104692], [17.01389198448605, 49.2484957958039], [17.013754665219444, 49.24849819039773], [17.013751007554088, 49.248408293744056], [17.013613688518262, 49.24841068816722], [17.013476369464207, 49.24841308242727], [17.013469055184203, 49.248233289084894], [17.01333173660994, 49.24823568316671], [17.01319441801745, 49.24823807708539], [17.013183448228144, 49.24796838701452], [17.013320766073623, 49.24796599311847], [17.01331710926463, 49.247876096432506], [17.013729061944726, 49.24786891378824], [17.01373271950072, 49.24795881045155], [17.0138700372733, 49.24795641590298], [17.013873695096525, 49.24804631255717], [17.014285649051903, 49.24803912791008], [17.014281990481678, 49.247949231278554], [17.014419308181342, 49.247946836077475], [17.014422967000566, 49.24803673270145], [17.015246874309636, 49.24802235802403], [17.015384192130647, 49.24801996167353], [17.01540249521542, 49.24846944450495], [17.01526517614939, 49.248471840893245], [17.01526151574496, 49.24838194432262], [17.015124196909692, 49.24838434054022], [17.015127857065117, 49.248474237118394], [17.01457858054565, 49.248483820387705], [17.014582239723282, 49.248573716994485], [17.01403296191603, 49.24858329768389]]]};
+  field = {type: 'Polygon', coordinates: [[[17.008032903697003,49.259378350222214],[17.012346093160815,49.26055145480218],[17.01341275235608,49.25661998865008],[17.01578237120672,49.251834177355896],[17.01243531034079,49.24966645404407],[17.009126895621744,49.24897297823598],[17.003117114964958,49.253454830509305],[17.008032903697003,49.259378350222214]]]};
+  //[[[17.01403296191603, 49.24858329768389], [17.014029303734432, 49.24849340104692], [17.01389198448605, 49.2484957958039], [17.013754665219444, 49.24849819039773], [17.013751007554088, 49.248408293744056], [17.013613688518262, 49.24841068816722], [17.013476369464207, 49.24841308242727], [17.013469055184203, 49.248233289084894], [17.01333173660994, 49.24823568316671], [17.01319441801745, 49.24823807708539], [17.013183448228144, 49.24796838701452], [17.013320766073623, 49.24796599311847], [17.01331710926463, 49.247876096432506], [17.013729061944726, 49.24786891378824], [17.01373271950072, 49.24795881045155], [17.0138700372733, 49.24795641590298], [17.013873695096525, 49.24804631255717], [17.014285649051903, 49.24803912791008], [17.014281990481678, 49.247949231278554], [17.014419308181342, 49.247946836077475], [17.014422967000566, 49.24803673270145], [17.015246874309636, 49.24802235802403], [17.015384192130647, 49.24801996167353], [17.01540249521542, 49.24846944450495], [17.01526517614939, 49.248471840893245], [17.01526151574496, 49.24838194432262], [17.015124196909692, 49.24838434054022], [17.015127857065117, 49.248474237118394], [17.01457858054565, 49.248483820387705], [17.014582239723282, 49.248573716994485], [17.01403296191603, 49.24858329768389]]]};
 
   constructor(
     private hsConfig: HsConfig,