[Maps] update to maplibre 3.1.0 (#161032)

maplibre change log
https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#310

Breaking changes that required fixes
* 3.0.0 Remove "mapbox-gl-supported" package from API. If needed, please
reference it directly instead of going through MapLibre.
(maplibre/maplibre-gl-js#2451)
* 3.0.0 Resize map when container element is resized. The
"resize"-related events now has different data associated with it
(maplibre/maplibre-gl-js#2157,
maplibre/maplibre-gl-js#2551). Previously the
originalEvent field was the reason of this change, for example it could
be a resize event from the browser. Now it is ResizeObserverEntry, see
more
[here](https://developer.mozilla.org/en-US/docs/web/api/resizeobserverentry).
* 2.2.0 Improve filter specification typings
(maplibre/maplibre-gl-js#1390)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -756,6 +756,7 @@
     "@mapbox/geojson-rewind": "^0.5.0",
     "@mapbox/mapbox-gl-draw": "1.3.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
+    "@mapbox/mapbox-gl-supported": "2.0.1",
     "@mapbox/vector-tile": "1.3.1",
     "@opentelemetry/api": "^1.1.0",
     "@opentelemetry/api-metrics": "^0.31.0",
@@ -878,7 +879,7 @@
     "luxon": "^2.5.2",
     "lz-string": "^1.4.4",
     "mapbox-gl-draw-rectangle-mode": "1.0.4",
-    "maplibre-gl": "2.1.9",
+    "maplibre-gl": "3.1.0",
     "markdown-it": "^12.3.2",
     "md5": "^2.1.0",
     "mdast-util-to-hast": "10.0.1",

src/plugins/vis_types/vega/public/vega_view/vega_map_view/vega_map_view.scss

@@ -1,5 +1,5 @@
 .vgaVis {
-  .mapboxgl-canvas-container {
+  .maplibregl-canvas-container {
     cursor: auto;
   }
 }

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

@@ -336,7 +336,7 @@ export class MvtVectorLayer extends AbstractVectorLayer {
     // When there are no join results, return a filter that hides all features
     // work around for 'match' with empty array not filtering out features
     // This filter always returns false because features will never have `__kbn_never_prop__` property
-    const hideAllFilter = ['has', '__kbn_never_prop__'];
+    const hideAllFilter = ['has', '__kbn_never_prop__'] as FilterSpecification;
 
     if (!joinPropertiesMap) {
       return hideAllFilter;

x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_preview.tsx

@@ -18,7 +18,6 @@ import {
 } from '@elastic/eui';
 import { maplibregl, Map as MapboxMap } from '@kbn/mapbox-gl';
 import { i18n } from '@kbn/i18n';
-import { ResizeChecker } from '@kbn/kibana-utils-plugin/public';
 import { CUSTOM_ICON_PIXEL_RATIO, createSdfIcon } from '../../symbol_utils';
 
 export interface Props {
@@ -35,7 +34,6 @@ interface State {
 
 export class IconPreview extends Component<Props, State> {
   static iconId = `iconPreview`;
-  private _checker?: ResizeChecker;
   private _isMounted = false;
   private _containerRef: HTMLDivElement | null = null;
 
@@ -61,9 +59,6 @@ export class IconPreview extends Component<Props, State> {
 
   componentWillUnmount() {
     this._isMounted = false;
-    if (this._checker) {
-      this._checker.destroy();
-    }
     if (this.state.map) {
       this.state.map.remove();
       this.state.map = null;
@@ -115,15 +110,6 @@ export class IconPreview extends Component<Props, State> {
     map.setLayoutProperty('icon-layer', 'icon-size', 12);
   }
 
-  _initResizerChecker() {
-    this._checker = new ResizeChecker(this._containerRef!);
-    this._checker.on('resize', () => {
-      if (this.state.map) {
-        this.state.map.resize();
-      }
-    });
-  }
-
   _createMapInstance(): MapboxMap {
     const map = new maplibregl.Map({
       container: this._containerRef!,
@@ -171,9 +157,7 @@ export class IconPreview extends Component<Props, State> {
   _initializeMap() {
     const map: MapboxMap = this._createMapInstance();
 
-    this.setState({ map }, () => {
-      this._initResizerChecker();
-    });
+    this.setState({ map });
   }
 
   render() {

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

@@ -46,7 +46,7 @@ function getFilterExpression(
     ]);
   }
 
-  return ['all', ...allFilters];
+  return ['all', ...allFilters] as FilterSpecification;
 }
 
 export function getFillFilterExpression(
@@ -91,7 +91,7 @@ const IS_POINT_FEATURE = [
   'any',
   ['==', ['geometry-type'], GEO_JSON_TYPE.POINT],
   ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_POINT],
-];
+] as FilterSpecification;
 
 export function getPointFilterExpression(
   isSourceGeoJson: boolean,

x-pack/plugins/maps/public/connected_components/mb_map/draw_control/draw_feature_control/draw_feature_control.tsx

@@ -12,7 +12,7 @@ import { Feature, Geometry, Position } from 'geojson';
 import { i18n } from '@kbn/i18n';
 // @ts-expect-error
 import * as jsts from 'jsts';
-import type { Map as MbMap, MapMouseEvent, PointLike } from '@kbn/mapbox-gl';
+import type { FilterSpecification, Map as MbMap, MapMouseEvent, PointLike } from '@kbn/mapbox-gl';
 import { getToasts } from '../../../../kibana_services';
 import { DrawControl } from '../draw_control';
 import { DRAW_MODE, DRAW_SHAPE } from '../../../../../common/constants';
@@ -105,7 +105,7 @@ export class DrawFeatureControl extends Component<Props, {}> {
     ] as [PointLike, PointLike];
     const selectedFeatures = this.props.mbMap.queryRenderedFeatures(mbBbox, {
       layers: mbEditLayerIds,
-      filter: ['all', EXCLUDE_CENTROID_FEATURES],
+      filter: ['all', EXCLUDE_CENTROID_FEATURES] as FilterSpecification,
     });
     if (!selectedFeatures.length) {
       return;

x-pack/plugins/maps/public/connected_components/mb_map/mb_map.tsx

@@ -7,12 +7,12 @@
 
 import _ from 'lodash';
 import React, { Component } from 'react';
+import { supported as maplibreglSupported } from '@mapbox/mapbox-gl-supported';
 import { Adapters } from '@kbn/inspector-plugin/public';
 import { Filter } from '@kbn/es-query';
 import { Action, ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
 import { maplibregl } from '@kbn/mapbox-gl';
 import type { Map as MapboxMap, MapOptions, MapMouseEvent } from '@kbn/mapbox-gl';
-import { ResizeChecker } from '@kbn/kibana-utils-plugin/public';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { DrawFilterControl } from './draw_control/draw_filter_control';
 import { ScaleControl } from './scale_control';
@@ -85,7 +85,6 @@ interface State {
 }
 
 export class MbMap extends Component<Props, State> {
-  private _checker?: ResizeChecker;
   private _isMounted: boolean = false;
   private _containerRef: HTMLDivElement | null = null;
   private _prevCustomIcons?: CustomIcon[];
@@ -110,9 +109,6 @@ export class MbMap extends Component<Props, State> {
 
   componentWillUnmount() {
     this._isMounted = false;
-    if (this._checker) {
-      this._checker.destroy();
-    }
     if (this.state.mbMap) {
       this.state.mbMap.remove();
       this.state.mbMap = undefined;
@@ -239,7 +235,6 @@ export class MbMap extends Component<Props, State> {
 
     this.setState({ mbMap }, () => {
       this._loadMakiSprites(mbMap);
-      this._initResizerChecker();
       this._registerMapEventListeners(mbMap);
       this.props.onMapReady(this._getMapExtentState());
     });
@@ -284,19 +279,11 @@ export class MbMap extends Component<Props, State> {
     }
   }
 
-  _initResizerChecker() {
-    this.state.mbMap?.resize(); // ensure map is sized for container prior to monitoring
-    this._checker = new ResizeChecker(this._containerRef!);
-    this._checker.on('resize', () => {
-      this.state.mbMap?.resize();
-    });
-  }
-
   _reportUsage() {
     const usageCollector = getUsageCollection();
     if (!usageCollector) return;
 
-    const webglSupport = maplibregl.supported();
+    const webglSupport = maplibreglSupported();
 
     usageCollector.reportUiCounter(
       APP_ID,
@@ -305,7 +292,7 @@ export class MbMap extends Component<Props, State> {
     );
 
     // Report low system performance or no hardware GPU
-    if (webglSupport && !maplibregl.supported({ failIfMajorPerformanceCaveat: true })) {
+    if (webglSupport && !maplibreglSupported({ failIfMajorPerformanceCaveat: true })) {
       usageCollector.reportUiCounter(APP_ID, METRIC_TYPE.LOADED, 'gl_majorPerformanceCaveat');
     }
   }

x-pack/plugins/maps/public/connected_components/mb_map/tile_status_tracker/tile_status_tracker.tsx

@@ -237,7 +237,6 @@ export class TileStatusTracker extends Component<Props> {
       // Tile meta will never have duplicated features since by their nature, tile meta is a feature contained within a single tile
       const mbFeatures = this.props.mbMap.querySourceFeatures(layer.getMbSourceId(), {
         sourceLayer: ES_MVT_META_LAYER_NAME,
-        filter: [],
       });
 
       const features = mbFeatures

x-pack/plugins/ux/public/components/app/rum_dashboard/visitor_breakdown_map/embedded_map.tsx

@@ -36,7 +36,7 @@ const EmbeddedPanel = styled.div`
     z-index: 1;
     min-height: 0; // Absolute must for Firefox to scroll contents
   }
-  &&& .mapboxgl-canvas {
+  &&& .maplibregl-canvas {
     animation: none !important;
   }
 `;