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().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/vector_source.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import {
   FeatureCollection,
   GeoJsonProperties,
@@ -17,7 +17,7 @@ import {
 import type { KibanaExecutionContext } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 import type { Query } from '@kbn/data-plugin/common';
-import type { MapGeoJSONFeature } from '@kbn/mapbox-gl';
+import type { MapGeoJSONFeature, Map as MbMap } from '@kbn/mapbox-gl';
 import { Filter } from '@kbn/es-query';
 import type { TimeRange } from '@kbn/es-query';
 import { Adapters } from '@kbn/inspector-plugin/common/adapters';
@@ -36,6 +36,7 @@ import {
 } from '../../../../common/descriptor_types';
 import { DataRequest } from '../../util/data_request';
 import { FeatureGeometryFilterForm } from '../../../connected_components/mb_map/tooltip_control/features_tooltip';
+import { IVectorStyle } from '../../styles/vector/vector_style';
 
 export function hasVectorSourceMethod(
   source: ISource,
@@ -145,6 +146,20 @@ export interface IVectorSource extends ISource {
    * Provide unique ids for managing source requests in Inspector
    */
   getInspectorRequestIds(): 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;
 }
 
 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,17 @@ export class VectorStyle implements IVectorStyle {
   };
 
   async hasLegendDetails() {
-    return this._getLegendDetailStyleProperties().length > 0;
+    return this._source.hasLegendDetails
+      ? 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()}