[Maps] use single layer for map labels

x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx

@@ -319,9 +319,9 @@ export class TiledVectorLayer extends VectorLayer {
       return;
     }
 
+    this._setMbLabelProperties(mbMap, sourceMeta.layerName);
     this._setMbPointsProperties(mbMap, sourceMeta.layerName);
     this._setMbLinePolygonProperties(mbMap, sourceMeta.layerName);
-    this._setMbLabelProperties(mbMap, sourceMeta.layerName);
     this._syncTooManyFeaturesProperties(mbMap);
   }
 

x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.tsx

@@ -821,30 +821,11 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
     timesliceMaskConfig?: TimesliceMaskConfig
   ) {
     const sourceId = this.getId();
+    const labelLayerId = this._getMbLabelLayerId();
     const pointLayerId = this._getMbPointLayerId();
     const symbolLayerId = this._getMbSymbolLayerId();
-    const textLayerId = this._getMbTextLayerId();
     const pointLayer = mbMap.getLayer(pointLayerId);
     const symbolLayer = mbMap.getLayer(symbolLayerId);
-    const textLayer = mbMap.getLayer(textLayerId);
-
-    // Point layers require 2 mapbox layers
-
-    //
-    // Create label layer
-    // label layer - "symbol" layer type for labels. Can not use same layer label and marker layers because of conflicting styling requirements
-    //
-    if (!textLayer) {
-      const mbLayer: MbLayer = {
-        id: textLayerId,
-        type: 'symbol',
-        source: sourceId,
-      };
-      if (mvtSourceLayer) {
-        mbLayer['source-layer'] = mvtSourceLayer;
-      }
-      mbMap.addLayer(mbLayer);
-    }
 
     //
     // Create marker layer
@@ -865,7 +846,7 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
         if (mvtSourceLayer) {
           mbLayer['source-layer'] = mvtSourceLayer;
         }
-        mbMap.addLayer(mbLayer, textLayerId);
+        mbMap.addLayer(mbLayer, labelLayerId);
       }
       if (symbolLayer) {
         mbMap.setLayoutProperty(symbolLayerId, 'visibility', 'none');
@@ -881,7 +862,7 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
         if (mvtSourceLayer) {
           mbLayer['source-layer'] = mvtSourceLayer;
         }
-        mbMap.addLayer(mbLayer, textLayerId);
+        mbMap.addLayer(mbLayer, labelLayerId);
       }
       if (pointLayer) {
         mbMap.setLayoutProperty(pointLayerId, 'visibility', 'none');
@@ -891,7 +872,6 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
     const filterExpr = getPointFilterExpression(this.hasJoins(), timesliceMaskConfig);
     if (!_.isEqual(filterExpr, mbMap.getFilter(markerLayerId))) {
       mbMap.setFilter(markerLayerId, filterExpr);
-      mbMap.setFilter(textLayerId, filterExpr);
     }
 
     if (this.getCurrentStyle().arePointsSymbolizedAsCircles()) {
@@ -908,16 +888,8 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
       });
     }
 
-    this.getCurrentStyle().setMBPropertiesForLabelText({
-      alpha: this.getAlpha(),
-      mbMap,
-      textLayerId,
-    });
-
     this.syncVisibilityWithMb(mbMap, markerLayerId);
     mbMap.setLayerZoomRange(markerLayerId, this.getMinZoom(), this.getMaxZoom());
-    this.syncVisibilityWithMb(mbMap, textLayerId);
-    mbMap.setLayerZoomRange(textLayerId, this.getMinZoom(), this.getMaxZoom());
   }
 
   _setMbLinePolygonProperties(
@@ -926,6 +898,7 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
     timesliceMaskConfig?: TimesliceMaskConfig
   ) {
     const sourceId = this.getId();
+    const labelLayerId = this._getMbLabelLayerId();
     const fillLayerId = this._getMbPolygonLayerId();
     const lineLayerId = this._getMbLineLayerId();
 
@@ -940,7 +913,7 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
       if (mvtSourceLayer) {
         mbLayer['source-layer'] = mvtSourceLayer;
       }
-      mbMap.addLayer(mbLayer);
+      mbMap.addLayer(mbLayer, labelLayerId);
     }
     if (!mbMap.getLayer(lineLayerId)) {
       const mbLayer: MbLayer = {
@@ -952,7 +925,7 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
       if (mvtSourceLayer) {
         mbLayer['source-layer'] = mvtSourceLayer;
       }
-      mbMap.addLayer(mbLayer);
+      mbMap.addLayer(mbLayer, labelLayerId);
     }
 
     this.getCurrentStyle().setMBPaintProperties({
@@ -1018,10 +991,9 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
 
   _syncStylePropertiesWithMb(mbMap: MbMap, timeslice?: Timeslice) {
     const timesliceMaskConfig = this._getTimesliceMaskConfig(timeslice);
+    this._setMbLabelProperties(mbMap, undefined, timesliceMaskConfig);
     this._setMbPointsProperties(mbMap, undefined, timesliceMaskConfig);
     this._setMbLinePolygonProperties(mbMap, undefined, timesliceMaskConfig);
-    // label layers added after geometry layers to ensure they are on top
-    this._setMbLabelProperties(mbMap, undefined, timesliceMaskConfig);
   }
 
   _getTimesliceMaskConfig(timeslice?: Timeslice): TimesliceMaskConfig | undefined {
@@ -1048,14 +1020,6 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
     return this.makeMbLayerId('circle');
   }
 
-  _getMbTextLayerId() {
-    return this.makeMbLayerId('text');
-  }
-
-  // _getMbTextLayerId is labels for Points and MultiPoints
-  // _getMbLabelLayerId is labels for not Points and MultiPoints
-  // _getMbLabelLayerId used to be called _getMbCentroidLayerId
-  // TODO merge textLayer and labelLayer into single layer
   _getMbLabelLayerId() {
     return this.makeMbLayerId('label');
   }
@@ -1075,7 +1039,6 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
   getMbTooltipLayerIds() {
     return [
       this._getMbPointLayerId(),
-      this._getMbTextLayerId(),
       this._getMbLabelLayerId(),
       this._getMbSymbolLayerId(),
       this._getMbLineLayerId(),

x-pack/plugins/maps/public/classes/util/mb_filter_expressions.ts

@@ -86,18 +86,20 @@ export function getLineFilterExpression(
   );
 }
 
+const IS_POINT_FEATURE = [
+  'any',
+  ['==', ['geometry-type'], GEO_JSON_TYPE.POINT],
+  ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_POINT],
+];
+
 export function getPointFilterExpression(
   hasJoins: boolean,
   timesliceMaskConfig?: TimesliceMaskConfig
 ): unknown[] {
   return getFilterExpression(
     [
       EXCLUDE_CENTROID_FEATURES,
-      [
-        'any',
-        ['==', ['geometry-type'], GEO_JSON_TYPE.POINT],
-        ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_POINT],
-      ],
+      IS_POINT_FEATURE,
     ],
     hasJoins,
     timesliceMaskConfig
@@ -111,9 +113,14 @@ export function getLabelFilterExpression(
 ): unknown[] {
   const filters: unknown[] = [];
 
-  // centroids added for geojson sources only
+  // Centroid feature added to GeoJSON feature collection for LINE_STRING, MULTI_LINE_STRING, POLYGON, MULTI_POLYGON, and GEOMETRY_COLLECTION geometries
+  // For GeoJSON sources, show label for entroid feature or point/multi-point feature.
   if (isSourceGeoJson) {
-    filters.push(['==', ['get', KBN_IS_CENTROID_FEATURE], true]);
+    filters.push([
+      'any',
+      ['==', ['get', KBN_IS_CENTROID_FEATURE], true],
+      IS_POINT_FEATURE,
+    ]);
   }
 
   return getFilterExpression(filters, hasJoins, timesliceMaskConfig);