From 1be452a9b3cb761ddcb6aa6804ae0a601227358b Mon Sep 17 00:00:00 2001 From: Artemiy Date: Tue, 25 Jan 2022 18:52:02 +0200 Subject: [PATCH] feat(webmap): add addLayer onAdded option --- packages/ngw-kit/src/NgwWebmapLayerAdapter.ts | 10 ++++---- .../ngw-kit/src/utils/fetchNgwLayerItems.ts | 5 +++- packages/react-ngw-map/src/ToggleControl.ts | 25 +++++++++++++++++++ packages/react-ngw-map/src/index.ts | 2 ++ packages/webmap/src/WebMapLayers.ts | 6 ++++- .../webmap/src/interfaces/LayerAdapter.ts | 2 ++ packages/webmap/src/interfaces/MapControl.ts | 9 ++++--- 7 files changed, 49 insertions(+), 10 deletions(-) create mode 100644 packages/react-ngw-map/src/ToggleControl.ts diff --git a/packages/ngw-kit/src/NgwWebmapLayerAdapter.ts b/packages/ngw-kit/src/NgwWebmapLayerAdapter.ts index 78e672b11..f8a000709 100644 --- a/packages/ngw-kit/src/NgwWebmapLayerAdapter.ts +++ b/packages/ngw-kit/src/NgwWebmapLayerAdapter.ts @@ -286,6 +286,7 @@ export class NgwWebmapLayerAdapter implements ResourceAdapter { 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 implements ResourceAdapter { 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 implements ResourceAdapter { .then((l) => { l.id && this._webmapBaselayersIds.push(l.id); }); - if (x.enabled) { - enabledAlreadySet = true; - } }); } } diff --git a/packages/ngw-kit/src/utils/fetchNgwLayerItems.ts b/packages/ngw-kit/src/utils/fetchNgwLayerItems.ts index 39b8e8897..32ed2f1f1 100644 --- a/packages/ngw-kit/src/utils/fetchNgwLayerItems.ts +++ b/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; }); diff --git a/packages/react-ngw-map/src/ToggleControl.ts b/packages/react-ngw-map/src/ToggleControl.ts new file mode 100644 index 000000000..49f56220d --- /dev/null +++ b/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

( + 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 }); +} diff --git a/packages/react-ngw-map/src/index.ts b/packages/react-ngw-map/src/index.ts index 1029df7b0..e65e1c500 100644 --- a/packages/react-ngw-map/src/index.ts +++ b/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'; diff --git a/packages/webmap/src/WebMapLayers.ts b/packages/webmap/src/WebMapLayers.ts index c3e442205..e7dfa4ce6 100644 --- a/packages/webmap/src/WebMapLayers.ts +++ b/packages/webmap/src/WebMapLayers.ts @@ -1,3 +1,4 @@ +import { defined } from '@nextgis/utils'; import { Paint, preparePaint } from '@nextgis/paint'; import { propertiesFilter } from '@nextgis/properties-filter'; @@ -5,7 +6,7 @@ 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; } diff --git a/packages/webmap/src/interfaces/LayerAdapter.ts b/packages/webmap/src/interfaces/LayerAdapter.ts index 1c32c6c27..20e368ddf 100644 --- a/packages/webmap/src/interfaces/LayerAdapter.ts +++ b/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 diff --git a/packages/webmap/src/interfaces/MapControl.ts b/packages/webmap/src/interfaces/MapControl.ts index 1db08d827..0bbab67bf 100644 --- a/packages/webmap/src/interfaces/MapControl.ts +++ b/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; -export type onClickAsync = (status?: boolean) => Promise; +export type OnToggleClickSync = (status: boolean) => void; +export type onToggleClickAsync = (status: boolean) => Promise; 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; }