Map swipe panel

Map Swipe

Map swipe panel is used for managing map layers on each side of the swipe tool. User also can change the orientation of the swipe tool from vertical to horizontal.

Config parameters

List of useful config parameters for the compositions panel can be found here:

componentsEnabled

panelsEnabled

mapSwipeOptions

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

If not using HslayersModule containing all components

Add HsMapSwipeModule import:

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

Add HsMapSwipeComponent component:

import {HsMapSwipeModule} from 'hslayers-ng/components/map-swipe';
import {HsLayoutService } from 'hslayers-ng/core';
@Component({
  selector: 'your-app-component',
  templateUrl: 'your-app-component.html',
})
export class YourAppComponent {
  constructor(hsLayoutService: HsLayoutService) {
    hsLayoutService.createPanel(HsMapSwipeComponent, {});
  }
}