[Maps][Vega] Tidy up mapbox-gl imports (#99733)

VegaMaps now instantiates mapbox-gl the same way as the Maps app.
elastic · May 12, 2021 · bc2b846 · bc2b846
1 parent 254a876
commit bc2b846
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/src/plugins/vis_type_vega/public/vega_view/vega_map_view/view.test.ts b/src/plugins/vis_type_vega/public/vega_view/vega_map_view/view.test.ts
@@ -28,9 +28,12 @@ import {
   setUISettings,
 } from '../../services';
 import { initVegaLayer, initTmsRasterLayer } from './layers';
-import { Map, NavigationControl, Style } from 'mapbox-gl';
 
-jest.mock('mapbox-gl', () => ({
+// @ts-expect-error
+import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
+
+jest.mock('mapbox-gl/dist/mapbox-gl-csp', () => ({
+  setRTLTextPlugin: jest.fn(),
   Map: jest.fn().mockImplementation(() => ({
     getLayer: () => '',
     removeLayer: jest.fn(),
@@ -75,9 +78,10 @@ describe('vega_map_view/view', () => {
     setUISettings(coreStart.uiSettings);
 
     const getTmsService = jest.fn().mockReturnValue(({
-      getVectorStyleSheet: (): Style => ({
+      getVectorStyleSheet: () => ({
         version: 8,
         sources: {},
+        // @ts-expect-error
         layers: [],
       }),
       getMaxZoom: async () => 20,
@@ -144,7 +148,7 @@ describe('vega_map_view/view', () => {
       await vegaMapView.init();
 
       const { longitude, latitude, scrollWheelZoom } = vegaMapView._parser.mapConfig;
-      expect(Map).toHaveBeenCalledWith({
+      expect(mapboxgl.Map).toHaveBeenCalledWith({
         style: {
           version: 8,
           sources: {},
@@ -170,7 +174,7 @@ describe('vega_map_view/view', () => {
       await vegaMapView.init();
 
       const { longitude, latitude, scrollWheelZoom } = vegaMapView._parser.mapConfig;
-      expect(Map).toHaveBeenCalledWith({
+      expect(mapboxgl.Map).toHaveBeenCalledWith({
         style: {
           version: 8,
           sources: {},
@@ -195,7 +199,7 @@ describe('vega_map_view/view', () => {
 
       await vegaMapView.init();
 
-      expect(NavigationControl).toHaveBeenCalled();
+      expect(mapboxgl.NavigationControl).toHaveBeenCalled();
     });
   });
 });
diff --git a/src/plugins/vis_type_vega/public/vega_view/vega_map_view/view.ts b/src/plugins/vis_type_vega/public/vega_view/vega_map_view/view.ts
@@ -7,9 +7,11 @@
  */
 
 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 'mapbox-gl/dist/mapbox-gl-csp';
 import { initTmsRasterLayer, initVegaLayer } from './layers';
 import { VegaBaseView } from '../vega_base_view';
 import { getMapServiceSettings } from '../../services';
@@ -22,11 +24,17 @@ import {
   userConfiguredLayerId,
   vegaLayerId,
 } from './constants';
-
 import { validateZoomSettings, injectMapPropsIntoSpec } from './utils';
-
 import './vega_map_view.scss';
 
+// @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';
+
+mapboxgl.workerUrl = mbWorkerUrl;
+mapboxgl.setRTLTextPlugin(mbRtlPlugin);
+
 async function updateVegaView(mapBoxInstance: Map, vegaView: View) {
   const mapCanvas = mapBoxInstance.getCanvas();
   const { lat, lng } = mapBoxInstance.getCenter();
@@ -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

diff --git a/x-pack/plugins/maps/public/routes/map_page/map_app/map_app.tsx b/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';