Allow custom MVT sources to style the map layers and provide custom legend

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

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;
 }

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<boolean>;
+  /**
+   * specifies if a source provides its own legend details or if the default vector_style is used
+   */
+  renderLegendDetails?(vectorStyle: IVectorStyle): ReactElement<any> | null;
 }
 
 export class AbstractVectorSource extends AbstractSource implements IVectorSource {

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<boolean>;
-  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)
+    ) : (
       <VectorStyleLegend
         masks={this._layer.getMasks()}
         styles={this._getLegendDetailStyleProperties()}