How to use @nextgis/ngw-kit - 4 common examples

import { WebMap } from '@nextgis/webmap';
import { OlMapAdapter } from '@nextgis/ol-map-adapter';
import { NgwKit } from '@nextgis/ngw-kit';
import { QmsKit } from '@nextgis/qms-kit';

const ngwKit = new NgwKit({
  'baseUrl': "http://geonote.nextgis.com",
  'resourceId': 1,
  // 'pixelRadius': 10,
  // auth: {
  //   login: 'administrator',
  //   password: '',
  // }
})

const webMap = new WebMap({
  mapAdapter: new OlMapAdapter(),
  starterKits: [new QmsKit(), ngwKit],
});

webMap.create({
  target: 'map'

this._emitStatusEvent('ngw:select', null);
      return;
    }

    const pixelRadius = this.options.pixelRadius || 10;
    const center = this.getCenter();
    const zoom = this.getZoom();
    if (!center || !zoom) {
      this._emitStatusEvent('ngw:select', null);
      return;
    }
    const metresPerPixel =
      (40075016.686 * Math.abs(Math.cos((center[1] * 180) / Math.PI))) / Math.pow(2, zoom + 8);
    // FIXME: understand the circle creation function
    const radius = pixelRadius * metresPerPixel * 0.0005;
    return NgwKit.utils
      .sendIdentifyRequest(ev, {
        layers: ids,
        connector: this.connector,
        radius
      })
      .then(resp => {
        this._emitStatusEvent('ngw:select', {
          ...resp,
          resources: ids,
          sourceType: 'raster',
          event: ev
        });
        return resp;
      });
  }
}

async addNgwLayer(options: AddNgwLayerOptions): Promise {
    if (!options.resourceId && !options.keyname) {
      throw new Error('resourceId or keyname is required parameter to add NGW layer');
    }
    if (this.options.baseUrl || this.options.baseUrl === '') {
      try {
        const adapter = NgwKit.utils.addNgwLayer(
          options,
          this,
          this.options.baseUrl,
          this.connector
        );

        const layer = (await this.addLayer(adapter, {
          visibility: true,
          // TODO: all options into one object
          ...options,
          ...options.adapterOptions
        })) as ResourceAdapter;
        const id = layer && this.getLayerId(layer);
        if (layer && id) {
          this._ngwLayers[id] = { layer, resourceId: layer.resourceId };

options: NgwMapOptions
) {
  const kits: StarterKit[] = [new QmsKit()];

  if (!options.connector && options.baseUrl) {
    options.connector = new NgwConnector({
      baseUrl: options.baseUrl,
      auth: options.auth
    });
  } else if (options.connector) {
    options.baseUrl = options.connector.options.baseUrl;
  }
  const opt: NgwMapOptions = deepmerge(OPTIONS, options);
  if (opt.connector) {
    kits.push(
      new NgwKit({
        connector: opt.connector,
        auth: opt.auth,
        identification: opt.identification
      })
    );
  }
  return {
    mapAdapter,
    starterKits: kits,
    runtimeParams: options.runtimeParams
  };
}