[maps] fix map application crashes when leaving map while drawing fil…

…ter (#122353) * [maps] fix map application crashes when leaving map while drawing filter * clean-up * more clean up Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 10, 2022 · a9b82b0 · a9b82b0
1 parent f5aa068
commit a9b82b0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 26 deletions.
diff --git a/x-pack/plugins/maps/public/connected_components/mb_map/draw_control/draw_circle.ts b/x-pack/plugins/maps/public/connected_components/mb_map/draw_control/draw_circle.ts
@@ -15,7 +15,24 @@ import { Feature, GeoJSON, Position } from 'geojson';
 
 const DRAW_CIRCLE_RADIUS = 'draw-circle-radius';
 
-export const DRAW_CIRCLE_RADIUS_MB_FILTER = ['==', 'meta', DRAW_CIRCLE_RADIUS];
+export const DRAW_CIRCLE_RADIUS_LABEL_STYLE = {
+  id: 'gl-draw-radius-label',
+  type: 'symbol',
+  filter: ['==', 'meta', DRAW_CIRCLE_RADIUS],
+  layout: {
+    'text-anchor': 'right',
+    'text-field': '{radiusLabel}',
+    'text-size': 16,
+    'text-offset': [-1, 0],
+    'text-ignore-placement': true,
+    'text-allow-overlap': true,
+  },
+  paint: {
+    'text-color': '#fbb03b',
+    'text-halo-color': 'rgba(0, 0, 0, 1)',
+    'text-halo-width': 2,
+  },
+};
 
 export interface DrawCircleProperties {
   center: Position;
@@ -148,7 +165,7 @@ export const DrawCircle = {
       radiusLabel = `${Math.round(state.circle.properties.radiusKm)} km`;
     }
 
-    // display radius label, requires custom 'symbol' style with DRAW_CIRCLE_RADIUS_MB_FILTER filter
+    // display radius label, requires custom style: DRAW_CIRCLE_RADIUS_LABEL_STYLE
     display({
       type: 'Feature',
       properties: {

diff --git a/x-pack/plugins/maps/public/connected_components/mb_map/draw_control/draw_control.tsx b/x-pack/plugins/maps/public/connected_components/mb_map/draw_control/draw_control.tsx
@@ -10,16 +10,16 @@ import React, { Component } from 'react';
 // @ts-expect-error
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 // @ts-expect-error
+import mapboxDrawStyles from '@mapbox/mapbox-gl-draw/src/lib/theme';
+// @ts-expect-error
 import DrawRectangle from 'mapbox-gl-draw-rectangle-mode';
 import type { Map as MbMap } from '@kbn/mapbox-gl';
 import { Feature } from 'geojson';
 import { MapMouseEvent } from '@kbn/mapbox-gl';
 import { DRAW_SHAPE } from '../../../../common/constants';
-import { DrawCircle, DRAW_CIRCLE_RADIUS_MB_FILTER } from './draw_circle';
+import { DrawCircle, DRAW_CIRCLE_RADIUS_LABEL_STYLE } from './draw_circle';
 import { DrawTooltip } from './draw_tooltip';
 
-const GL_DRAW_RADIUS_LABEL_LAYER_ID = 'gl-draw-radius-label';
-
 const mbModeEquivalencies = new Map<string, DRAW_SHAPE>([
   ['simple_select', DRAW_SHAPE.SIMPLE_SELECT],
   ['draw_rectangle', DRAW_SHAPE.BOUNDS],
@@ -50,6 +50,7 @@ export class DrawControl extends Component<Props> {
   private _mbDrawControl = new MapboxDraw({
     displayControlsDefault: false,
     modes: mbDrawModes,
+    styles: [...mapboxDrawStyles, DRAW_CIRCLE_RADIUS_LABEL_STYLE],
   });
 
   componentDidUpdate() {
@@ -97,7 +98,9 @@ export class DrawControl extends Component<Props> {
   };
 
   _removeDrawControl() {
-    if (!this._mbDrawControlAdded) {
+    // Do not remove draw control after mbMap.remove is called, causes execeptions and mbMap.remove cleans up all map resources.
+    const isMapRemoved = !this.props.mbMap.loaded();
+    if (!this._mbDrawControlAdded || isMapRemoved) {
       return;
     }
 
@@ -107,7 +110,6 @@ export class DrawControl extends Component<Props> {
     if (this.props.onClick) {
       this.props.mbMap.off('click', this._onClick);
     }
-    this.props.mbMap.removeLayer(GL_DRAW_RADIUS_LABEL_LAYER_ID);
     this.props.mbMap.removeControl(this._mbDrawControl);
     this._mbDrawControlAdded = false;
   }
@@ -119,25 +121,6 @@ export class DrawControl extends Component<Props> {
 
     if (!this._mbDrawControlAdded) {
       this.props.mbMap.addControl(this._mbDrawControl);
-      this.props.mbMap.addLayer({
-        id: GL_DRAW_RADIUS_LABEL_LAYER_ID,
-        type: 'symbol',
-        source: 'mapbox-gl-draw-hot',
-        filter: DRAW_CIRCLE_RADIUS_MB_FILTER,
-        layout: {
-          'text-anchor': 'right',
-          'text-field': '{radiusLabel}',
-          'text-size': 16,
-          'text-offset': [-1, 0],
-          'text-ignore-placement': true,
-          'text-allow-overlap': true,
-        },
-        paint: {
-          'text-color': '#fbb03b',
-          'text-halo-color': 'rgba(0, 0, 0, 1)',
-          'text-halo-width': 2,
-        },
-      });
       this._mbDrawControlAdded = true;
       this.props.mbMap.getCanvas().style.cursor = 'crosshair';
       this.props.mbMap.on('draw.modechange', this._onModeChange);