[Maps] switch from mapbox-gl to maplibre-gl

package.json

@@ -726,7 +726,7 @@
     "loader-utils": "^1.2.3",
     "log-symbols": "^2.2.0",
     "lz-string": "^1.4.4",
-    "mapbox-gl": "1.13.1",
+    "maplibre-gl": "^1.14.0",
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
     "marge": "^1.0.1",
     "memoize-one": "^5.0.0",

src/plugins/vis_type_vega/public/vega_view/vega_map_view/vega_map_view.scss

@@ -1,4 +1,4 @@
-@import '~mapbox-gl/dist/mapbox-gl.css';
+@import '~maplibre-gl/dist/maplibre-gl.css';
 
 .vgaVis {
   .mapboxgl-canvas-container {

src/plugins/vis_type_vega/public/vega_view/vega_map_view/view.ts

@@ -7,9 +7,10 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { Map, Style, NavigationControl, MapboxOptions } from 'mapbox-gl';
-
+import type { Map, Style, MapboxOptions } from 'mapbox-gl';
 import { View, parse } from 'vega';
+// @ts-expect-error
+import mapboxgl from 'maplibre-gl/dist/maplibre-gl-csp';
 import { initTmsRasterLayer, initVegaLayer } from './layers';
 import { VegaBaseView } from '../vega_base_view';
 import { getMapServiceSettings } from '../../services';
@@ -22,9 +23,16 @@ import {
   userConfiguredLayerId,
   vegaLayerId,
 } from './constants';
-
 import { validateZoomSettings, injectMapPropsIntoSpec } from './utils';
 
+// @ts-expect-error
+import mbRtlPlugin from '!!file-loader!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js';
+// @ts-expect-error
+import mbWorkerUrl from '!!file-loader!maplibre-gl/dist/maplibre-gl-csp-worker';
+
+mapboxgl.workerUrl = mbWorkerUrl;
+mapboxgl.setRTLTextPlugin(mbRtlPlugin);
+
 import './vega_map_view.scss';
 
 async function updateVegaView(mapBoxInstance: Map, vegaView: View) {
@@ -115,7 +123,7 @@ export class VegaMapView extends VegaBaseView {
     // In some cases, Vega may be initialized twice, e.g. after awaiting...
     if (!this._$container) return;
 
-    const mapBoxInstance = new Map({
+    const mapBoxInstance = new mapboxgl.Map({
       style,
       customAttribution,
       container: this._$container.get(0),
@@ -142,7 +150,7 @@ export class VegaMapView extends VegaBaseView {
 
   private initControls(mapBoxInstance: Map) {
     if (this.shouldShowZoomControl) {
-      mapBoxInstance.addControl(new NavigationControl({ showCompass: false }), 'top-left');
+      mapBoxInstance.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-left');
     }
 
     // disable map rotation using right click + drag

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

@@ -32,7 +32,6 @@ import { registerLayerWizards } from '../../classes/layers/load_layer_wizards';
 import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property';
 import { GeoFieldWithIndex } from '../../components/geo_field_with_index';
 import { MapRefreshConfig } from '../../../common/descriptor_types';
-import 'mapbox-gl/dist/mapbox-gl.css';
 
 const RENDER_COMPLETE_EVENT = 'renderComplete';
 

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

@@ -8,8 +8,9 @@
 import _ from 'lodash';
 import React, { Component } from 'react';
 import { Map as MapboxMap, MapboxOptions, MapMouseEvent } from 'mapbox-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
 // @ts-expect-error
-import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
+import mapboxgl from 'maplibre-gl/dist/maplibre-gl-csp';
 // @ts-expect-error
 import { spritesheet } from '@elastic/maki';
 import sprites1 from '@elastic/maki/dist/sprite@1.png';
@@ -45,7 +46,7 @@ import { TileStatusTracker } from './tile_status_tracker';
 // @ts-expect-error
 import mbRtlPlugin from '!!file-loader!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js';
 // @ts-expect-error
-import mbWorkerUrl from '!!file-loader!mapbox-gl/dist/mapbox-gl-csp-worker';
+import mbWorkerUrl from '!!file-loader!maplibre-gl/dist/maplibre-gl-csp-worker';
 
 mapboxgl.workerUrl = mbWorkerUrl;
 mapboxgl.setRTLTextPlugin(mbRtlPlugin);

x-pack/plugins/maps/public/routes/map_page/map_app/map_app.tsx

@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import 'mapbox-gl/dist/mapbox-gl.css';
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { AppLeaveAction, AppMountParameters } from 'kibana/public';

yarn.lock

@@ -19204,10 +19204,15 @@ mapbox-gl-draw-rectangle-mode@^1.0.4:
   resolved "https://registry.yarnpkg.com/mapbox-gl-draw-rectangle-mode/-/mapbox-gl-draw-rectangle-mode-1.0.4.tgz#42987d68872a5fb5cc5d76d3375ee20cd8bab8f7"
   integrity sha512-BdF6nwEK2p8n9LQoMPzBO8LhddW1fe+d5vK8HQIei+4VcRnUbKNsEj7Z15FsJxCHzsc2BQKXbESx5GaE8x0imQ==
 
-mapbox-gl@1.13.1:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-1.13.1.tgz#322efe75ab4c764fc4c776da1506aad58d5a5b9d"
-  integrity sha512-GSyubcoSF5MyaP8z+DasLu5v7KmDK2pp4S5+VQ5WdVQUOaAqQY4jwl4JpcdNho3uWm2bIKs7x1l7q3ynGmW60g==
+mapcap@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mapcap/-/mapcap-1.0.0.tgz#e8e29d04a160eaf8c92ec4bcbd2c5d07ed037e5a"
+  integrity sha512-KcNlZSlFPx+r1jYZmxEbTVymG+dIctf10WmWkuhrhrblM+KMoF77HelwihL5cxYlORye79KoR4IlOOk99lUJ0g==
+
+maplibre-gl@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-1.14.0.tgz#035663dae6cbaaca5b06024f6c5b51a42db1fc84"
+  integrity sha512-pqr/nsoZHx1rUY2Bpp0EFVcFVgrVOLkDDh2DhZcLVZVHYXdFOH/LyKUoLZda/3/CDTmlZy9ldJeZN8O0g1Ocpg==
   dependencies:
     "@mapbox/geojson-rewind" "^0.5.0"
     "@mapbox/geojson-types" "^1.0.2"
@@ -19233,11 +19238,6 @@ mapbox-gl@1.13.1:
     tinyqueue "^2.0.3"
     vt-pbf "^3.1.1"
 
-mapcap@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/mapcap/-/mapcap-1.0.0.tgz#e8e29d04a160eaf8c92ec4bcbd2c5d07ed037e5a"
-  integrity sha512-KcNlZSlFPx+r1jYZmxEbTVymG+dIctf10WmWkuhrhrblM+KMoF77HelwihL5cxYlORye79KoR4IlOOk99lUJ0g==
-
 marge@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/marge/-/marge-1.0.1.tgz#52d6026911e62e1dd1cf60a07313dde285a8370c"