Creating new panels

In version 9.1.0 and higher

Creating custom panels in the sidebar is possible in the Angular part of the application. Your custom panel's component must either implement HsPanelComponent interface or extend HsPanelBaseComponent like this:

import {HsPanelBaseComponent} from 'hslayers-ng';
export class MyCoolComponent extends HsPanelBaseComponent implements OnInit {
  name = 'cool';
  constructor(private hsLayoutService: HsLayoutService, private hsSidebarService: HsSidebarService) { 
     super(hsLayoutService);
  }

  ngOnInit(): void {
    this.hsSidebarService.addButton(
      {
        panel: 'cool',
        module: 'hs.legend',
        order: 1,
        fits: true,
        title: 'PANEL_HEADER.COOL',
        description: 'SIDEBAR.descriptions.COOL',
        icon: 'icon-dotlist',
      },
      this.data.app
    );
   }
}

And then in your main.service.ts:

import { Injectable } from '@angular/core';
import { HsSidebarService } from 'hslayers-ng/components/sidebar/sidebar.service';
import { HsPanelContainerService } from 'hslayers-ng/components/layout/panels/panel-container.service';
import { MyCoolComponent } from './cool.component';

@Injectable({providedIn: 'root'})
export class MainService {
  constructor(
    private hsPanelContainerService: HsPanelContainerService
  ) { }

  init(): void {    
    this.hsPanelContainerService.create(MyCoolComponent, {});
  }
}

Your new panel's template then can use structure like follows:

<div [hidden]="(isVisible$ | async) === false" class="card mainpanel">
  <hs-panel-header name="custom" [title]="'My Cool Panel'">
  </hs-panel-header>
  <div class="card-body">
    Put your panel content here.
  </div>
</div>

Just don't forget to import {HsPanelHelpersModule} from 'hslayers-ng' and imports: [HsPanelHelpersModule] in your app module.

Icon

For the new panel you will need to have an icon set to be displayed in the sidebar. In the above example 'icon-dotlist' was used which is one of the predefined icons present in whhg.css files which is automatically included with hslayers-ng.

If you would like to have a custom icon such as in this example:

this.hsSidebarService.addButton(
      {
        panel: 'statistics',
        visible: true,
        title: 'PANEL_HEADER.STATISTICS',
        description: 'SIDEBAR.descriptions.STATISTICS',
        icon: 'statistics-icon-barchartasc',
      },
      this.data.app
    );

you will need to provide a font and icon definition in a separate css file. It provides WebHostingHub-GlyphsStatistics font not to conflict with WebHostingHub-Glyphs which is already included in hslayers-ng. Notice also that icon class is different: statistics-icon-barchartasc instead of icon-barchartasc. The fonts *.ttf file is encoded into base64 string using https://www.giftofspeed.com/base64-encoder/.

Angular.json for the project would have content similar to:

"styles": [
              "./node_modules/hslayers-ng/css/hslayers-ng.css",
              "./projects/example-project/src/styles.scss"
            ]

And styles.scss needs to include the css file providing custom WebHostingHub-GlyphsStatistics font:

@import "../css/whhg-font/css/whhg.css"

Font subset

You could include the whole webhosting-hub-glyphs.ttf file, but that would be inefficient. The custom font containing only the needed glyphs can be build from webhostinghub-glyphs.ttf using pyftsubset script (provided by fonttools and ttf2eot utility. Here is an example script to compile the font.

In older versions

NOTE: Older versions of hslayers-ng are not actively maintained!

In version 2.3.0 to 9.0.0

Creating custom panels in the sidebar is possible in the Angular part of the application. Your custom panel's component must implement HsPanelComponent like this:

export class MyCoolComponent implements HsPanelComponent {
  data: any;
  viewRef: ViewRef;
  constructor(private hsLayoutService: HsLayoutService) { }
  isVisible() {
    return this.hsLayoutService.panelVisible('cool');
  }
}

And then in your main.service.ts:

import { Injectable } from '@angular/core';
import { HsSidebarService } from 'hslayers-ng/components/sidebar/sidebar.service';
import { HsPanelContainerService } from 'hslayers-ng/components/layout/panels/panel-container.service';
import { MyCoolComponent } from './cool.component';
@Injectable({providedIn: 'root'})
export class MainService {
  constructor(
    private hsSidebarService: HsSidebarService,
    private hsPanelContainerService: HsPanelContainerService
  ) { }
  init(): void {
    this.hsSidebarService.buttons.push({
      panel: 'cool',
      module: '',
      order: 7,
      title: 'My Cool Panel',
      description: 'Open My Cool Panel',
      icon: 'icon-time'
    });
    this.hsPanelContainerService.create(MyCoolComponent, {});
  }
}