From 4ee7416406369da3441449bb0fa5e141b6aed632 Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 27 Nov 2024 09:04:22 +1100 Subject: [PATCH] [8.x] Allow custom MVT sources to style the map layers and provide custom legend (#200656) (#201864) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Backport This will backport the following commits from `main` to `8.x`: - [Allow custom MVT sources to style the map layers and provide custom legend (#200656)](https://github.com/elastic/kibana/pull/200656) ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) Co-authored-by: Sean Sullivan --- .../mvt_vector_layer/mvt_vector_layer.tsx | 6 ++++++ .../sources/vector_source/mvt_vector_source.ts | 6 ++++++ .../classes/sources/vector_source/vector_source.tsx | 12 +++++++++++- .../public/classes/styles/vector/vector_style.tsx | 10 +++++++--- 4 files changed, 30 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/mvt_vector_layer/mvt_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/vector_layer/mvt_vector_layer/mvt_vector_layer.tsx index 29b0f90802833..78e7c18fe43fa 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/mvt_vector_layer/mvt_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/mvt_vector_layer/mvt_vector_layer.tsx @@ -426,6 +426,12 @@ export class MvtVectorLayer extends AbstractVectorLayer { this._setMbPointsProperties(mbMap, sourceData.tileSourceLayer); this._setMbLinePolygonProperties(mbMap, sourceData.tileSourceLayer); this._syncTooManyFeaturesProperties(mbMap); + (this.getSource() as IMvtVectorSource).syncSourceStyle?.(mbMap, () => + mbMap + .getStyle() + .layers.filter((mbLayer) => this.ownsMbLayerId(mbLayer.id)) + .map((layer) => layer.id) + ); } // TODO ES MVT specific - move to es_tiled_vector_layer implementation diff --git a/x-pack/plugins/maps/public/classes/sources/vector_source/mvt_vector_source.ts b/x-pack/plugins/maps/public/classes/sources/vector_source/mvt_vector_source.ts index 829afe5917cd5..3f76befda67e5 100644 --- a/x-pack/plugins/maps/public/classes/sources/vector_source/mvt_vector_source.ts +++ b/x-pack/plugins/maps/public/classes/sources/vector_source/mvt_vector_source.ts @@ -5,6 +5,7 @@ * 2.0. */ +import type { Map as MbMap } from '@kbn/mapbox-gl'; import { VectorSourceRequestMeta } from '../../../../common/descriptor_types'; import { IVectorSource } from '.'; @@ -25,4 +26,9 @@ export interface IMvtVectorSource extends IVectorSource { * Use getTileSourceLayer to specify the displayed source layer. */ getTileSourceLayer(): string; + + /** + * Syncs source specific styling with mbMap this allows custom sources to further style the map layers/filters + */ + syncSourceStyle?(mbMap: MbMap, getLayerIds: () => string[]): void; } diff --git a/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.tsx index aeffc6f6c167d..a3b2b494827b2 100644 --- a/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React from 'react'; +import React, { ReactElement } from 'react'; import { FeatureCollection, GeoJsonProperties, @@ -22,6 +22,7 @@ import { Filter } from '@kbn/es-query'; import type { TimeRange } from '@kbn/es-query'; import { Adapters } from '@kbn/inspector-plugin/common/adapters'; import { ActionExecutionContext, Action } from '@kbn/ui-actions-plugin/public'; +import { IVectorStyle } from '../../styles/vector/vector_style'; import { GEO_JSON_TYPE, VECTOR_SHAPE_TYPE } from '../../../../common/constants'; import { TooltipFeatureAction } from '../../../../common/descriptor_types'; import { ITooltipProperty, TooltipProperty } from '../../tooltips/tooltip_property'; @@ -145,6 +146,15 @@ export interface IVectorSource extends ISource { * Provide unique ids for managing source requests in Inspector */ getInspectorRequestIds(): string[]; + + /** + * specifies if a source provides its own legend details or if the default vector_style is used if the source has this method it must also implement renderLegendDetails + */ + hasLegendDetails?(): Promise; + /** + * specifies if a source provides its own legend details or if the default vector_style is used + */ + renderLegendDetails?(vectorStyle: IVectorStyle): ReactElement | null; } export class AbstractVectorSource extends AbstractSource implements IVectorSource { diff --git a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx index 31c06728d8112..0ec1a21fe56ff 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx @@ -110,7 +110,7 @@ export interface IVectorStyle extends IStyle { getIconSvg(symbolId: string): string | undefined; isUsingCustomIcon(symbolId: string): boolean; hasLegendDetails: () => Promise; - renderLegendDetails: () => ReactElement; + renderLegendDetails: () => ReactElement | null; clearFeatureState: (featureCollection: FeatureCollection, mbMap: MbMap, sourceId: string) => void; setFeatureStateAndStyleProps: ( featureCollection: FeatureCollection, @@ -721,14 +721,18 @@ export class VectorStyle implements IVectorStyle { }; async hasLegendDetails() { - return this._getLegendDetailStyleProperties().length > 0; + return this._source.hasLegendDetails && this._source.renderLegendDetails + ? await this._source.hasLegendDetails() + : this._getLegendDetailStyleProperties().length > 0; } renderLegendDetails() { const symbolId = this._getSymbolId(); const svg = symbolId ? this.getIconSvg(symbolId) : undefined; - return ( + return this._source.renderLegendDetails ? ( + this._source.renderLegendDetails(this) + ) : (