Query panel - hslayers/hslayers-ng GitHub Wiki

Info about features selected

The Query info panel is designed to view and edit (if possible) detailed information about all highlighted features. The user can add new attribute fields, zoom in on the feature in the map view, copy the feature or move it to another layer, download the feature as a WKT or GeoJSON file and delete it. The panel also provides the ability to see the coordinates of the selected feature, as well as the option to switch the coordinate system from EPSG: 4326 to EPSG:3857.

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

If not using HslayersModule containing all components

Add HsQueryModule import:

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

Add HsQueryComponent component:

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