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,7 +426,7 @@ export class MvtVectorLayer extends AbstractVectorLayer {
     this._setMbPointsProperties(mbMap, sourceData.tileSourceLayer);
     this._setMbLinePolygonProperties(mbMap, sourceData.tileSourceLayer);
     this._syncTooManyFeaturesProperties(mbMap);
-    this.getSource().syncSourceStyle?.(mbMap, () =>
+    (this.getSource() as IMvtVectorSource).syncSourceStyle?.(mbMap, () =>
       mbMap
         .getStyle()
         .layers.filter((mbLayer) => this.ownsMbLayerId(mbLayer.id))

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { ReactElement } from 'react';
+import React 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, Map as MbMap } from '@kbn/mapbox-gl';
+import type { MapGeoJSONFeature } 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,7 +36,6 @@ 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,
@@ -146,20 +145,6 @@ 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

@@ -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';
 
@@ -721,17 +721,20 @@ export class VectorStyle implements IVectorStyle {
   };
 
   async hasLegendDetails() {
-    return this._source.hasLegendDetails
-      ? await this._source.hasLegendDetails()
+    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 this._source.renderLegendDetails ? (
-      this._source.renderLegendDetails(this)
-    ) : (
+    const VectorLegend = (
       <VectorStyleLegend
         masks={this._layer.getMasks()}
         styles={this._getLegendDetailStyleProperties()}
@@ -741,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) {