Layer styler

The Layer styler panel provides the user with a wide range of options for styling vector layer features. The user can create several style rules, which can have different symbolizers: mark, icon, text, line, fill. Each symbolizer can be edited and set by the user using range sliders, color pickers, dropdown options or input fields independently of the other symbolizers. In the background, the code generates SLD object, that is stored in the layer and used to render the features on the map. Symbolizers and rules can be reordered by dragging the elements over each other. The order affects the rendered style result - the most recent item (at the top of the list) is considered the most important.

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: {
        styler: true //(true by default)
      }
    });
  }
}

If not using HslayersModule containing all components

Add HsStylerModule import:

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

Add HsStylerComponent component:

import {HsStylerModule} from 'hslayers-ng/components/styler';
import {HsLayoutService } from 'hslayers-ng/core';

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