feat(webmap): add addLayer onAdded option

packages/ngw-kit/src/NgwWebmapLayerAdapter.ts

@@ -286,6 +286,7 @@ export class NgwWebmapLayerAdapter<M = any> implements ResourceAdapter<M> {
 
   private _setBasemaps(baseWebmap: BasemapWebmap) {
     const webMap = this.options.webMap;
+    // to avoid set many basemaps on init
     let enabledAlreadySet = false;
     for (const x of baseWebmap.basemaps) {
       createOnFirstShowNgwAdapter({
@@ -294,9 +295,11 @@ export class NgwWebmapLayerAdapter<M = any> implements ResourceAdapter<M> {
         item: x,
         adapterOptions: { crossOrigin: this.options.crossOrigin },
       }).then((adapter) => {
-        // to avoid set many basemaps on init
         const visibility = enabledAlreadySet ? false : x.enabled;
-        webMap
+        if (x.enabled) {
+          enabledAlreadySet = true;
+        }
+        return webMap
           .addBaseLayer(adapter, {
             id: WEBMAP_BASELAYER_ID_PREFIX + x.resource_id,
             name: x.display_name,
@@ -306,9 +309,6 @@ export class NgwWebmapLayerAdapter<M = any> implements ResourceAdapter<M> {
           .then((l) => {
             l.id && this._webmapBaselayersIds.push(l.id);
           });
-        if (x.enabled) {
-          enabledAlreadySet = true;
-        }
       });
     }
   }

packages/ngw-kit/src/utils/fetchNgwLayerItems.ts

@@ -25,7 +25,10 @@ export function fetchNgwLayerItems<
       // Additional client-side filter check
       if (clientFilterValidate) {
         data = data.filter((y) => {
-          const fields = prepareNgwFieldsToPropertiesFilter({ ...y.fields, id: y.id });
+          const fields = prepareNgwFieldsToPropertiesFilter({
+            ...y.fields,
+            id: y.id,
+          });
           const result = propertiesFilter(fields, filters);
           return result;
         });

packages/react-ngw-map/src/ToggleControl.ts

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+
+import { useNgwMapContext } from './context';
+import { mapControlCreator } from './mapControlCreator';
+
+import type { ReactNode } from 'react';
+import type { ControlOptions, ToggleControlOptions } from '@nextgis/webmap';
+
+interface MapControlProps extends ToggleControlOptions, ControlOptions {
+  children?: ReactNode;
+}
+
+export function ToggleControl<P extends MapControlProps = MapControlProps>(
+  props: P,
+) {
+  const context = useNgwMapContext();
+  const el = document.createElement('div');
+  const portal = useRef(el);
+
+  function createControl() {
+    return context.ngwMap.createToggleControl(props);
+  }
+
+  return mapControlCreator({ ...props, context, portal, createControl });
+}

packages/react-ngw-map/src/index.ts

@@ -2,3 +2,5 @@ export * from './interfaces';
 
 export { ReactNgwMap } from './ReactNgwMap';
 export { MapControl } from './MapControl';
+export { ButtonControl } from './ButtonControl';
+export { ToggleControl } from './ToggleControl';

packages/webmap/src/WebMapLayers.ts

@@ -1,11 +1,12 @@
+import { defined } from '@nextgis/utils';
 import { Paint, preparePaint } from '@nextgis/paint';
 import { propertiesFilter } from '@nextgis/properties-filter';
 
 import { updateGeoJsonAdapterOptions } from './utils/updateGeoJsonAdapterOptions';
 import { WebMapMain } from './WebMapMain';
 
 import type { Feature, GeoJsonObject, Geometry } from 'geojson';
-import { defined, FeatureProperties, TileJson, Type } from '@nextgis/utils';
+import type { FeatureProperties, TileJson, Type } from '@nextgis/utils';
 import type { PropertiesFilter } from '@nextgis/properties-filter';
 
 import type {
@@ -325,6 +326,9 @@ export class WebMapLayers<
           await this.fitBounds(extent);
         }
       }
+      if (options.onAdded) {
+        options.onAdded(_adapter);
+      }
       this._emitLayerEvent('layer:add', layerId, _adapter);
       return _adapter;
     }

packages/webmap/src/interfaces/LayerAdapter.ts

@@ -155,6 +155,8 @@ export interface AdapterOptions<
 
   /** Experimental only for Ol yet */
   srs?: number;
+
+  onAdded?: (layer: LayerAdapter) => void;
 }
 
 export interface MvtAdapterOptions<F extends Feature = Feature>

packages/webmap/src/interfaces/MapControl.ts

@@ -1,10 +1,13 @@
 import type { ControlPosition } from './MapAdapter';
 
-export type OnClickSync = (status?: boolean) => void;
+export type OnClickSync = () => void;
+export type onClickAsync = () => Promise<void>;
 
-export type onClickAsync = (status?: boolean) => Promise<void>;
+export type OnToggleClickSync = (status: boolean) => void;
+export type onToggleClickAsync = (status: boolean) => Promise<void>;
 
 export type OnClick = OnClickSync | onClickAsync;
+export type OnToggleClick = OnToggleClickSync | onToggleClickAsync;
 
 // like in https://leafletjs.com/reference-1.3.4.html#control-zoom
 
@@ -108,7 +111,7 @@ export interface ToggleControlOptions {
   /** Button HTMLElement title, can be set for each state (`on` or `off`). */
   title?: string | TitleToggle;
   /** Set an action to execute when button clicked. */
-  onClick?: OnClick;
+  onClick?: OnToggleClick;
   /** Get current control status. */
   getStatus?: () => boolean;
 }