[Maps] Do not fill line geometries (#33072) (#33137)

This backport required manual edits to the saved object structure in the test data.

x-pack/plugins/maps/public/shared/layers/vector_layer.js

@@ -23,6 +23,21 @@ const EMPTY_FEATURE_COLLECTION = {
   features: []
 };
 
+
+const CLOSED_SHAPE_MB_FILTER = [
+  'any',
+  ['==', ['geometry-type'], 'Polygon'],
+  ['==', ['geometry-type'], 'MultiPolygon']
+];
+
+const ALL_SHAPE_MB_FILTER = [
+  'any',
+  ['==', ['geometry-type'], 'Polygon'],
+  ['==', ['geometry-type'], 'MultiPolygon'],
+  ['==', ['geometry-type'], 'LineString'],
+  ['==', ['geometry-type'], 'MultiLineString']
+];
+
 export class VectorLayer extends AbstractLayer {
 
   static type = 'VECTOR';
@@ -431,13 +446,7 @@ export class VectorLayer extends AbstractLayer {
         source: sourceId,
         paint: {}
       });
-      mbMap.setFilter(fillLayerId, [
+      mbMap.setFilter(fillLayerId, CLOSED_SHAPE_MB_FILTER);
-        'any',
-        ['==', ['geometry-type'], 'Polygon'],
-        ['==', ['geometry-type'], 'MultiPolygon'],
-        ['==', ['geometry-type'], 'LineString'],
-        ['==', ['geometry-type'], 'MultiLineString']
-      ]);
     }
     if (!mbMap.getLayer(lineLayerId)) {
       mbMap.addLayer({
@@ -446,13 +455,7 @@ export class VectorLayer extends AbstractLayer {
         source: sourceId,
         paint: {}
       });
-      mbMap.setFilter(lineLayerId, [
+      mbMap.setFilter(lineLayerId, ALL_SHAPE_MB_FILTER);
-        'any',
-        ['==', ['geometry-type'], 'Polygon'],
-        ['==', ['geometry-type'], 'MultiPolygon'],
-        ['==', ['geometry-type'], 'LineString'],
-        ['==', ['geometry-type'], 'MultiLineString']
-      ]);
     }
     this._style.setMBPaintProperties({
       alpha: this.getAlpha(),

x-pack/test/functional/apps/maps/joins.js

@@ -11,8 +11,11 @@ const EXPECTED_JOIN_VALUES = {
   alpha: 10,
   bravo: 3,
   charlie: 12,
+  tango: undefined
 };
 
+const VECTOR_SOURCE_ID = 'n1t6f';
+
 export default function ({ getPageObjects, getService }) {
   const PageObjects = getPageObjects(['maps']);
   const inspector = getService('inspector');
@@ -44,14 +47,41 @@ export default function ({ getPageObjects, getService }) {
 
     it('should decorate feature properties with join property', async () => {
       const mapboxStyle = await PageObjects.maps.getMapboxStyle();
-      expect(mapboxStyle.sources.n1t6f.data.features.length).to.equal(3);
+      expect(mapboxStyle.sources[VECTOR_SOURCE_ID].data.features.length).to.equal(4);
 
       mapboxStyle.sources.n1t6f.data.features.forEach(({ properties }) => {
-        expect(properties.hasOwnProperty(JOIN_PROPERTY_NAME)).to.be(true);
+        if (properties.name === 'tango') {
+          //left join, which means we won't rescale joins that do not match
+          expect(properties.hasOwnProperty(JOIN_PROPERTY_NAME)).to.be(false);
+        } else {
+          expect(properties.hasOwnProperty(JOIN_PROPERTY_NAME)).to.be(true);
+        }
         expect(properties[JOIN_PROPERTY_NAME]).to.be(EXPECTED_JOIN_VALUES[properties.name]);
       });
     });
 
+
+    it('should style fills, points and lines independently', async () => {
+      const mapboxStyle = await PageObjects.maps.getMapboxStyle();
+      const layersForVectorSource = mapboxStyle.layers.filter(mbLayer => {
+        return mbLayer.id.startsWith(VECTOR_SOURCE_ID);
+      });
+
+      //circle layer for points
+      // eslint-disable-next-line max-len
+      expect(layersForVectorSource[0]).to.eql({ 'id': 'n1t6f_circle', 'type': 'circle', 'source': 'n1t6f', 'minzoom': 0, 'maxzoom': 24, 'filter': ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], 'paint': { 'circle-color': ['interpolate', ['linear'], ['coalesce', ['get', '__kbn__scaled(__kbnjoin__max_of_prop1_groupby_meta_for_geo_shapes*.shape_name)'], -1], -1, 'rgba(0,0,0,0)', 0, '#f7faff', 0.125, '#ddeaf7', 0.25, '#c5daee', 0.375, '#9dc9e0', 0.5, '#6aadd5', 0.625, '#4191c5', 0.75, '#2070b4', 0.875, '#072f6b'], 'circle-opacity': 0.75, 'circle-stroke-color': '#FFFFFF', 'circle-stroke-opacity': 0.75, 'circle-stroke-width': 1, 'circle-radius': 10 } });
+
+      //fill layer
+      // eslint-disable-next-line max-len
+      expect(layersForVectorSource[1]).to.eql({ 'id': 'n1t6f_fill', 'type': 'fill', 'source': 'n1t6f', 'minzoom': 0, 'maxzoom': 24, 'filter': ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']], 'paint': { 'fill-color': ['interpolate', ['linear'], ['coalesce', ['get', '__kbn__scaled(__kbnjoin__max_of_prop1_groupby_meta_for_geo_shapes*.shape_name)'], -1], -1, 'rgba(0,0,0,0)', 0, '#f7faff', 0.125, '#ddeaf7', 0.25, '#c5daee', 0.375, '#9dc9e0', 0.5, '#6aadd5', 0.625, '#4191c5', 0.75, '#2070b4', 0.875, '#072f6b'], 'fill-opacity': 0.75 } }
+      );
+
+      //line layer for borders
+      // eslint-disable-next-line max-len
+      expect(layersForVectorSource[2]).to.eql({ 'id': 'n1t6f_line', 'type': 'line', 'source': 'n1t6f', 'minzoom': 0, 'maxzoom': 24, 'filter': ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon'], ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']], 'paint': { 'line-color': '#FFFFFF', 'line-opacity': 0.75, 'line-width': 1 } });
+
+    });
+
     describe('inspector', () => {
       afterEach(async () => {
         await inspector.close();

x-pack/test/functional/es_archives/maps/data/data.json

@@ -59,6 +59,40 @@
   }
 }
 
+
+{
+  "type": "doc",
+  "value": {
+    "index": "geo_shapes",
+    "type": "doc",
+    "id": "4",
+    "source": {
+      "geometry": {
+        "type": "linestring",
+        "coordinates": [
+          [
+            40,
+            5
+          ],
+          [
+            35,
+            -5
+          ],
+          [
+            45,
+            -5
+          ],
+          [
+            40,
+            5
+          ]
+        ]
+      },
+      "name": "tango"
+    }
+  }
+}
+
 {
   "type": "doc",
   "value": {