[Maps] labels for polygons and lines

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",

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() {

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,
+    },
+  });
+});