Measure panel - hslayers/hslayers-ng GitHub Wiki

Measurements

The user can quickly get calculations for different zones or routes using the measurement panel. To start using this tool, the user must click on the measurement toolbar button. The user can mark routes or geometric shapes on the map and obtain the corresponding measurements in the measurement panel, in the form of a list.

Measure panel

Enable/disable

import {HsConfig} from 'hslayers-ng/config';
@Component({
  selector: 'your-app-component',
  templateUrl: 'your-app-component.html',
})
export class YourAppComponent {
  constructor(hsConfig: HsConfig) {
    this.HsConfig.update({
      panelsEnabled: {
        measure: true //(true by default)
      }
    });
  }
}

If not using HslayersModule containing all components

Add HsMeasureModule import:

import {HsMeasureModule} from 'hslayers-ng/components/measure';
@NgModule({
  imports: [HsMeasureModule],
})
export class YourAppModule {}

Add HsMeasureComponent component:

import {HsMeasureModule} from 'hslayers-ng/components/measure';
import {HsLayoutService } from 'hslayers-ng/core';

@Component({
  selector: 'your-app-component',
  templateUrl: 'your-app-component.html',
})
export class YourAppComponent {
  constructor(hsLayoutService: HsLayoutService) {
    hsLayoutService.createPanel(HsMeasureComponent, {});
  }
}