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, {});
  }
}

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, {});
  }
}