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,8 +5,11 @@
  * 2.0.
  */
 
+import type { Map as MbMap } from '@kbn/mapbox-gl';
+import { ReactElement } from 'react';
 import { VectorSourceRequestMeta } from '../../../../common/descriptor_types';
 import { IVectorSource } from '.';
+import { IVectorStyle } from '../../styles/vector/vector_style';
 
 export interface IMvtVectorSource extends IVectorSource {
   /*
@@ -25,4 +28,18 @@ 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;
+
+  /**
+   * 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;
 }

x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx

@@ -75,7 +75,7 @@ import { IStyle } from '../style';
 import { IStyleProperty } from './properties/style_property';
 import { IField } from '../../fields/field';
 import { IVectorLayer } from '../../layers/vector_layer';
-import { IVectorSource } from '../../sources/vector_source';
+import { IMvtVectorSource, IVectorSource } from '../../sources/vector_source';
 import { createStyleFieldsHelper, StyleFieldsHelper } from './style_fields_helper';
 import { IESAggField } from '../../fields/agg';
 
@@ -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,20 @@ export class VectorStyle implements IVectorStyle {
   };
 
   async hasLegendDetails() {
-    return this._getLegendDetailStyleProperties().length > 0;
+    if (!this._source.isMvt()) {
+      return this._getLegendDetailStyleProperties().length > 0;
+    }
+    const source = this._source as IMvtVectorSource;
+
+    return source.hasLegendDetails && source.renderLegendDetails
+      ? await source.hasLegendDetails()
+      : this._getLegendDetailStyleProperties().length > 0;
   }
 
   renderLegendDetails() {
     const symbolId = this._getSymbolId();
     const svg = symbolId ? this.getIconSvg(symbolId) : undefined;
-
-    return (
+    const VectorLegend = (
       <VectorStyleLegend
         masks={this._layer.getMasks()}
         styles={this._getLegendDetailStyleProperties()}
@@ -738,6 +744,13 @@ export class VectorStyle implements IVectorStyle {
         svg={svg}
       />
     );
+
+    if (!this._source.isMvt()) {
+      return VectorLegend;
+    }
+
+    const source = this._source as IMvtVectorSource;
+    return source.renderLegendDetails ? source.renderLegendDetails(this) : VectorLegend;
   }
 
   clearFeatureState(featureCollection: FeatureCollection, mbMap: MbMap, sourceId: string) {