fieldcalc-frontend/src/app/app.component.ts

import {Component} from '@angular/core';

import proj4 from 'proj4';
import {
  HsConfig,
  HsEventBusService,
  HsLanguageService,
  HsLayoutService,
  HsPanelContainerService,
  HsSidebarService,
  HsToastService,
} from 'hslayers-ng';
import {OSM} from 'ol/source';
import {Tile} from 'ol/layer';
import {View} from 'ol';
import {get as getProjection, transform} from 'ol/proj';
import {register} from 'ol/proj/proj4';

import {AppService} from './app.service';
import {FcCalculatorComponent} from './calculator/calculator-panel.component';

proj4.defs(
  'EPSG:3045',
  '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
);
proj4.defs(
  'EPSG:5514',
  '+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=30.28813972222222 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=542.5,89.2,456.9,5.517,2.275,5.516,6.96 +units=m +no_defs'
);
register(proj4);

@Component({
  selector: 'application-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  /* You can name your app as you like or not at all */
  title = 'hslayers-application';
  sjtskProjection = getProjection('EPSG:5514');
  constructor(
    private appService: AppService,
    /* Inject here all modules from HSLayers-NG which you intend to use */
    public hsConfig: HsConfig,
    private hsEventBus: HsEventBusService,
    private hsLanguageService: HsLanguageService,
    private hsLayoutService: HsLayoutService,
    public hsPanelContainerService: HsPanelContainerService,
    public hsSidebarService: HsSidebarService,
    private hsToastService: HsToastService
  ) {
    /* Create new button in the sidebar */
    this.hsSidebarService.addButton({
      panel: 'calculator',
      module: 'calculator',
      order: 0,
      title: 'Field Calculator', //() =>
      //this.hsLanguageService.getTranslation('ADJUSTER.adjustFactors'),
      description: 'Adjust factors for computation',
      icon: 'icon-analytics-piechart',
    });
    /* Create new panel itself */
    this.hsPanelContainerService.create(FcCalculatorComponent, {});
    /* Switch language to cs */
    this.hsEventBus.layoutLoads.subscribe(() => {
      this.hsLanguageService.setLanguage('en');
      this.hsLayoutService.setDefaultPanel('calculator');
    });
    this.hsConfig.update({
      default_view: new View({
        projection: this.sjtskProjection,
        center: transform([16.964, 49.248], 'EPSG:4326', 'EPSG:5514'),
        zoom: 14,
      }),
      default_layers: [
        /* Baselayers */
        new Tile({
          source: new OSM(),
          visible: true,
          properties: {
            title: 'OpenStreetMap',
            base: true,
            removable: false,
          },
        }),
      ],
    });
  }
}