[Maps] labels for polygons and lines (#86191)

* [Maps] labels for polygons and lines * remove x-pack yarn.lock * add labels to choropleth map wizard * clean up comment * add mvt tile support * only add centroids if there may be lines or polygons * tslint * tslint * do not add centroid to too many features polygon * update get_tile expect statements * move turf dependencies from devDependencies to dependencies * update jest snapshot and functional test expects * fix functional test expect * another functional test expect update * functional test updates * expect * pew pew source expect updates * update joins expect * update mapbox style expects * update join visibility expects for geocentroids * update join visibility expects for geocentroids * another functional test expect update * review feedback * update yarn.lock * tslint Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 7, 2021 · 0ac6e62 · 0ac6e62
1 parent 8cb6226
commit 0ac6e62
Show file tree

Hide file tree

Showing 19 changed files with 1,098 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -140,7 +140,16 @@
     "@loaders.gl/json": "^2.3.1",
     "@slack/webhook": "^5.0.0",
     "@storybook/addons": "^6.0.16",
+    "@turf/along": "6.0.1",
+    "@turf/area": "6.0.1",
+    "@turf/bbox": "6.0.1",
+    "@turf/bbox-polygon": "6.0.1",
+    "@turf/boolean-contains": "6.0.1",
+    "@turf/center-of-mass": "6.0.1",
     "@turf/circle": "6.0.1",
+    "@turf/distance": "6.0.1",
+    "@turf/helpers": "6.0.1",
+    "@turf/length": "^6.0.2",
     "JSONStream": "1.3.5",
     "abort-controller": "^3.0.0",
     "abortcontroller-polyfill": "^1.4.0",
@@ -399,11 +408,6 @@
     "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "^3.4.1",
     "@testing-library/user-event": "^12.1.6",
-    "@turf/bbox": "6.0.1",
-    "@turf/bbox-polygon": "6.0.1",
-    "@turf/boolean-contains": "6.0.1",
-    "@turf/distance": "6.0.1",
-    "@turf/helpers": "6.0.1",
     "@types/accept": "3.1.1",
     "@types/angular": "^1.6.56",
     "@types/angular-mocks": "^1.7.0",

diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts
@@ -43,8 +43,13 @@ export const API_ROOT_PATH = `/${GIS_API_PATH}`;
 export const MVT_GETTILE_API_PATH = 'mvt/getTile';
 export const MVT_GETGRIDTILE_API_PATH = 'mvt/getGridTile';
 export const MVT_SOURCE_LAYER_NAME = 'source_layer';
+// Identifies vector tile "too many features" feature.
+// "too many features" feature is a box showing area that contains too many features for single ES search response
 export const KBN_TOO_MANY_FEATURES_PROPERTY = '__kbn_too_many_features__';
 export const KBN_TOO_MANY_FEATURES_IMAGE_ID = '__kbn_too_many_features_image_id__';
+// Identifies centroid feature.
+// Centroids are a single point for representing lines, multiLines, polygons, and multiPolygons
+export const KBN_IS_CENTROID_FEATURE = '__kbn_is_centroid_feature__';
 
 const MAP_BASE_URL = `/${MAPS_APP_PATH}/${MAP_PATH}`;
 export function getNewMapPath() {

diff --git a/x-pack/plugins/maps/common/get_centroid_features.test.ts b/x-pack/plugins/maps/common/get_centroid_features.test.ts
@@ -0,0 +1,282 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Feature, FeatureCollection } from 'geojson';
+import { getCentroidFeatures } from './get_centroid_features';
+
+test('should not create centroid feature for point and multipoint', () => {
+  const pointFeature: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: [30, 10],
+    },
+    properties: {
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  };
+  const multiPointFeature: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'MultiPoint',
+      coordinates: [
+        [10, 40],
+        [40, 30],
+        [20, 20],
+        [30, 10],
+      ],
+    },
+    properties: {
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  };
+  const featureCollection: FeatureCollection = {
+    type: 'FeatureCollection',
+    features: [pointFeature, multiPointFeature],
+  };
+  const centroidFeatures = getCentroidFeatures(featureCollection);
+  expect(centroidFeatures.length).toBe(0);
+});
+
+test('should not create centroid for too many features polygon', () => {
+  const polygonFeature: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'Polygon',
+      coordinates: [
+        [
+          [35, 10],
+          [45, 45],
+          [15, 40],
+          [10, 20],
+          [35, 10],
+        ],
+      ],
+    },
+    properties: {
+      __kbn_too_many_features__: true,
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  };
+  const featureCollection: FeatureCollection = {
+    type: 'FeatureCollection',
+    features: [polygonFeature],
+  };
+  const centroidFeatures = getCentroidFeatures(featureCollection);
+  expect(centroidFeatures.length).toBe(0);
+});
+
+test('should create centroid feature for line (even number of points)', () => {
+  const lineFeature: Feature = {
+    type: 'Feature',
+    id: 'myfeature',
+    geometry: {
+      type: 'LineString',
+      coordinates: [
+        [102.0, 0.0],
+        [103.0, 1.0],
+        [104.0, 0.0],
+        [105.0, 1.0],
+      ],
+    },
+    properties: {
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  };
+  const featureCollection: FeatureCollection = {
+    type: 'FeatureCollection',
+    features: [lineFeature],
+  };
+  const centroidFeatures = getCentroidFeatures(featureCollection);
+  expect(centroidFeatures.length).toBe(1);
+  expect(centroidFeatures[0]).toEqual({
+    type: 'Feature',
+    id: 'myfeature',
+    geometry: {
+      type: 'Point',
+      coordinates: [103.50003808007737, 0.5000190382261022],
+    },
+    properties: {
+      __kbn_is_centroid_feature__: true,
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  });
+});
+
+test('should create centroid feature for line (odd number of points)', () => {
+  const lineFeature: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'LineString',
+      coordinates: [
+        [102.0, 0.0],
+        [103.0, 1.0],
+        [104.0, 0.0],
+      ],
+    },
+    properties: {
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  };
+  const featureCollection: FeatureCollection = {
+    type: 'FeatureCollection',
+    features: [lineFeature],
+  };
+  const centroidFeatures = getCentroidFeatures(featureCollection);
+  expect(centroidFeatures.length).toBe(1);
+  expect(centroidFeatures[0]).toEqual({
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: [103.0, 1.0],
+    },
+    properties: {
+      __kbn_is_centroid_feature__: true,
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  });
+});
+
+test('should create centroid feature for multi line', () => {
+  const multiLineFeature: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'MultiLineString',
+      coordinates: [
+        [
+          [10, 10],
+          [20, 20],
+          [10, 40],
+        ],
+        [
+          [40, 40],
+          [30, 30],
+          [40, 20],
+          [30, 10],
+        ],
+      ],
+    },
+    properties: {
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  };
+  const featureCollection: FeatureCollection = {
+    type: 'FeatureCollection',
+    features: [multiLineFeature],
+  };
+  const centroidFeatures = getCentroidFeatures(featureCollection);
+  expect(centroidFeatures.length).toBe(1);
+  expect(centroidFeatures[0]).toEqual({
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: [35.56701982106548, 24.717594944805672],
+    },
+    properties: {
+      __kbn_is_centroid_feature__: true,
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  });
+});
+
+test('should create centroid feature for polygon', () => {
+  const polygonFeature: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'Polygon',
+      coordinates: [
+        [
+          [35, 10],
+          [45, 45],
+          [15, 40],
+          [10, 20],
+          [35, 10],
+        ],
+      ],
+    },
+    properties: {
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  };
+  const featureCollection: FeatureCollection = {
+    type: 'FeatureCollection',
+    features: [polygonFeature],
+  };
+  const centroidFeatures = getCentroidFeatures(featureCollection);
+  expect(centroidFeatures.length).toBe(1);
+  expect(centroidFeatures[0]).toEqual({
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: [27.526881720430108, 28.70967741935484],
+    },
+    properties: {
+      __kbn_is_centroid_feature__: true,
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  });
+});
+
+test('should create centroid feature for multi polygon', () => {
+  const multiPolygonFeature: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'MultiPolygon',
+      coordinates: [
+        [
+          [
+            [30, 20],
+            [45, 40],
+            [10, 40],
+            [30, 20],
+          ],
+        ],
+        [
+          [
+            [15, 5],
+            [40, 10],
+            [10, 20],
+            [5, 10],
+            [15, 5],
+          ],
+        ],
+      ],
+    },
+    properties: {
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  };
+  const featureCollection: FeatureCollection = {
+    type: 'FeatureCollection',
+    features: [multiPolygonFeature],
+  };
+  const centroidFeatures = getCentroidFeatures(featureCollection);
+  expect(centroidFeatures.length).toBe(1);
+  expect(centroidFeatures[0]).toEqual({
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: [28.333333333333332, 33.333333333333336],
+    },
+    properties: {
+      __kbn_is_centroid_feature__: true,
+      prop0: 'value0',
+      prop1: 0.0,
+    },
+  });
+});