Migrate Coordinate Maps to NP (elastic#64668)

.i18nrc.json

@@ -43,7 +43,7 @@
       "src/plugins/telemetry",
       "src/plugins/telemetry_management_section"
     ],
-    "tileMap": "src/legacy/core_plugins/tile_map",
+    "tileMap": "src/plugins/tile_map",
     "timelion": ["src/legacy/core_plugins/timelion", "src/plugins/vis_type_timelion"],
     "uiActions": "src/plugins/ui_actions",
     "visDefaultEditor": "src/plugins/vis_default_editor",

src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_visualization.js

@@ -21,6 +21,9 @@ import Bluebird from 'bluebird';
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import $ from 'jquery';
+
+import 'leaflet/dist/leaflet.js';
+import 'leaflet-vega';
 // Will be replaced with new path when tests are moved
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { createVegaVisualization } from '../../../../../../plugins/vis_type_vega/public/vega_visualization';
@@ -100,6 +103,39 @@ describe('VegaVisualizations', () => {
   setSavedObjects(npStart.core.savedObjects);
   setNotifications(npStart.core.notifications);
 
+  const mockMapConfig = {
+    includeElasticMapsService: true,
+    proxyElasticMapsServiceInMaps: false,
+    tilemap: {
+      deprecated: {
+        config: {
+          options: {
+            attribution: '',
+          },
+        },
+      },
+      options: {
+        attribution: '',
+        minZoom: 0,
+        maxZoom: 10,
+      },
+    },
+    regionmap: {
+      includeElasticMapsService: true,
+      layers: [],
+    },
+    manifestServiceUrl: '',
+    emsFileApiUrl: 'https://vector.maps.elastic.co',
+    emsTileApiUrl: 'https://tiles.maps.elastic.co',
+    emsLandingPageUrl: 'https://maps.elastic.co/v7.7',
+    emsFontLibraryUrl: 'https://tiles.maps.elastic.co/fonts/{fontstack}/{range}.pbf',
+    emsTileLayerId: {
+      bright: 'road_map',
+      desaturated: 'road_map_desaturated',
+      dark: 'dark_map',
+    },
+  };
+
   beforeEach(ngMock.module('kibana'));
   beforeEach(
     ngMock.inject(() => {
@@ -127,7 +163,7 @@ describe('VegaVisualizations', () => {
             return 'not found';
         }
       });
-      const serviceSettings = new ServiceSettings();
+      const serviceSettings = new ServiceSettings(mockMapConfig, mockMapConfig.tilemap);
       vegaVisualizationDependencies = {
         serviceSettings,
         core: {

src/legacy/core_plugins/kibana/public/kibana.js

@@ -45,7 +45,6 @@ import 'ui/autoload/all';
 import './management';
 import './dev_tools';
 import { showAppRedirectNotification } from '../../../../plugins/kibana_legacy/public';
-import 'leaflet';
 import { localApplicationService } from './local_application_service';
 
 npSetup.plugins.kibanaLegacy.registerLegacyAppAlias('doc', 'discover', { keepPrefix: true });

src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js

@@ -20,6 +20,7 @@
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import _ from 'lodash';
+
 import ChoroplethLayer from '../choropleth_layer';
 import { ImageComparator } from 'test_utils/image_comparator';
 import worldJson from './world.json';
@@ -103,31 +104,29 @@ describe('RegionMapsVisualizationTests', function() {
   let getManifestStub;
   beforeEach(
     ngMock.inject(() => {
+      const mapConfig = {
+        emsFileApiUrl: '',
+        emsTileApiUrl: '',
+        emsLandingPageUrl: '',
+      };
+      const tilemapsConfig = {
+        deprecated: {
+          config: {
+            options: {
+              attribution: '123',
+            },
+          },
+        },
+      };
       setInjectedVarFunc(injectedVar => {
         switch (injectedVar) {
-          case 'mapConfig':
-            return {
-              emsFileApiUrl: '',
-              emsTileApiUrl: '',
-              emsLandingPageUrl: '',
-            };
-          case 'tilemapsConfig':
-            return {
-              deprecated: {
-                config: {
-                  options: {
-                    attribution: '123',
-                  },
-                },
-              },
-            };
           case 'version':
             return '123';
           default:
             return 'not found';
         }
       });
-      const serviceSettings = new ServiceSettings();
+      const serviceSettings = new ServiceSettings(mapConfig, tilemapsConfig);
       const regionmapsConfig = {
         includeElasticMapsService: true,
         layers: [],

src/legacy/core_plugins/region_map/public/choropleth_layer.js

@@ -18,7 +18,6 @@
  */
 
 import $ from 'jquery';
-import L from 'leaflet';
 import _ from 'lodash';
 import d3 from 'd3';
 import { i18n } from '@kbn/i18n';
@@ -86,6 +85,7 @@ export default class ChoroplethLayer extends KibanaMapLayer {
     this._layerName = name;
     this._layerConfig = layerConfig;
 
+    // eslint-disable-next-line no-undef
     this._leafletLayer = L.geoJson(null, {
       onEachFeature: (feature, layer) => {
         layer.on('click', () => {
@@ -96,6 +96,7 @@ export default class ChoroplethLayer extends KibanaMapLayer {
           mouseover: () => {
             const tooltipContents = this._tooltipFormatter(feature);
             if (!location) {
+              // eslint-disable-next-line no-undef
               const leafletGeojson = L.geoJson(feature);
               location = leafletGeojson.getBounds().getCenter();
             }
@@ -428,13 +429,15 @@ CORS configuration of the server permits requests from the Kibana application on
 
     const { min, max } = getMinMax(this._metrics);
 
+    // eslint-disable-next-line no-undef
     const boundsOfAllFeatures = new L.LatLngBounds();
     return {
       leafletStyleFunction: geojsonFeature => {
         const match = geojsonFeature.__kbnJoinedMetric;
         if (!match) {
           return emptyStyle();
         }
+        // eslint-disable-next-line no-undef
         const boundsOfFeature = L.geoJson(geojsonFeature).getBounds();
         boundsOfAllFeatures.extend(boundsOfFeature);
 

src/plugins/maps_legacy/config.ts

@@ -0,0 +1,67 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { schema, TypeOf } from '@kbn/config-schema';
+import { configSchema as tilemapSchema } from '../tile_map/config';
+
+// TODO: Pull this portion from region_map
+export const regionmapSchema = schema.object({
+  includeElasticMapsService: schema.boolean({ defaultValue: true }),
+  layers: schema.arrayOf(
+    schema.object({
+      url: schema.string(),
+      format: schema.object({
+        type: schema.string({ defaultValue: 'geojson' }),
+      }),
+      meta: schema.object({
+        feature_collection_path: schema.string({ defaultValue: 'data' }),
+      }),
+      attribution: schema.string(),
+      name: schema.string(),
+      fields: schema.arrayOf(
+        schema.object({
+          name: schema.string(),
+          description: schema.string(),
+        })
+      ),
+    }),
+    { defaultValue: [] }
+  ),
+});
+
+export const configSchema = schema.object({
+  includeElasticMapsService: schema.boolean({ defaultValue: true }),
+  proxyElasticMapsServiceInMaps: schema.boolean({ defaultValue: false }),
+  tilemap: tilemapSchema,
+  regionmap: regionmapSchema,
+  manifestServiceUrl: schema.string({ defaultValue: '' }),
+  emsFileApiUrl: schema.string({ defaultValue: 'https://vector.maps.elastic.co' }),
+  emsTileApiUrl: schema.string({ defaultValue: 'https://tiles.maps.elastic.co' }),
+  emsLandingPageUrl: schema.string({ defaultValue: 'https://maps.elastic.co/v7.7' }),
+  emsFontLibraryUrl: schema.string({
+    defaultValue: 'https://tiles.maps.elastic.co/fonts/{fontstack}/{range}.pbf',
+  }),
+  emsTileLayerId: schema.object({
+    bright: schema.string({ defaultValue: 'road_map' }),
+    desaturated: schema.string({ defaultValue: 'road_map_desaturated' }),
+    dark: schema.string({ defaultValue: 'dark_map' }),
+  }),
+});
+
+export type ConfigSchema = TypeOf<typeof configSchema>;

src/plugins/maps_legacy/kibana.json

@@ -2,5 +2,7 @@
   "id": "mapsLegacy",
   "version": "8.0.0",
   "kibanaVersion": "kibana",
-  "ui": true
+  "configPath": ["map"],
+  "ui": true,
+  "server": true
 }

src/plugins/maps_legacy/public/__tests__/map/kibana_map.js

@@ -20,7 +20,6 @@
 import expect from '@kbn/expect';
 import { KibanaMap } from '../../map/kibana_map';
 import { KibanaMapLayer } from '../../map/kibana_map_layer';
-import L from 'leaflet';
 
 describe('kibana_map tests', function() {
   let domNode;
@@ -218,6 +217,7 @@ describe('kibana_map tests', function() {
     function makeMockLayer(attribution) {
       const layer = new KibanaMapLayer();
       layer._attribution = attribution;
+      // eslint-disable-next-line no-undef
       layer._leafletLayer = L.geoJson(null);
       return layer;
     }

src/plugins/maps_legacy/public/index.ts

@@ -17,12 +17,15 @@
  * under the License.
  */
 
-import { CoreSetup } from 'kibana/public';
-import { bindSetupCoreAndPlugins, MapsLegacyPlugin } from './plugin';
 // @ts-ignore
-import * as colorUtil from './map/color_util';
+import { CoreSetup, PluginInitializerContext } from 'kibana/public';
+// @ts-ignore
+import { L } from './leaflet';
 // @ts-ignore
 import { KibanaMap } from './map/kibana_map';
+import { bindSetupCoreAndPlugins, MapsLegacyPlugin } from './plugin';
+// @ts-ignore
+import * as colorUtil from './map/color_util';
 // @ts-ignore
 import { KibanaMapLayer } from './map/kibana_map_layer';
 // @ts-ignore
@@ -41,8 +44,15 @@ import {
 // @ts-ignore
 import { mapTooltipProvider } from './tooltip_provider';
 
-export function plugin() {
-  return new MapsLegacyPlugin();
+export interface MapsLegacyConfigType {
+  emsTileLayerId: string;
+  includeElasticMapsService: boolean;
+  proxyElasticMapsServiceInMaps: boolean;
+  tilemap: any;
+}
+
+export function plugin(initializerContext: PluginInitializerContext) {
+  return new MapsLegacyPlugin(initializerContext);
 }
 
 /** @public */
@@ -59,6 +69,7 @@ export {
   FileLayer,
   TmsLayer,
   mapTooltipProvider,
+  L,
 };
 
 // Due to a leaflet/leaflet-draw bug, it's not possible to consume leaflet maps w/ draw control

webpackShims/leaflet.js → src/plugins/maps_legacy/public/leaflet.js

@@ -17,15 +17,20 @@
  * under the License.
  */
 
-require('../node_modules/leaflet/dist/leaflet.css');
-window.L = module.exports = require('../node_modules/leaflet/dist/leaflet');
-window.L.Browser.touch = false;
-window.L.Browser.pointer = false;
+export let L;
 
-require('../node_modules/leaflet.heat/dist/leaflet-heat.js');
+if (!window.hasOwnProperty('L')) {
+  require('leaflet/dist/leaflet.css');
+  window.L = require('leaflet/dist/leaflet.js');
+  window.L.Browser.touch = false;
+  window.L.Browser.pointer = false;
 
-require('../node_modules/leaflet-draw/dist/leaflet.draw.css');
-require('../node_modules/leaflet-draw/dist/leaflet.draw.js');
-
-require('../node_modules/leaflet-responsive-popup/leaflet.responsive.popup.css');
-require('../node_modules/leaflet-responsive-popup/leaflet.responsive.popup.js');
+  require('leaflet-vega');
+  require('leaflet.heat/dist/leaflet-heat.js');
+  require('leaflet-draw/dist/leaflet.draw.css');
+  require('leaflet-draw/dist/leaflet.draw.js');
+  require('leaflet-responsive-popup/leaflet.responsive.popup.css');
+  require('leaflet-responsive-popup/leaflet.responsive.popup.js');
+} else {
+  L = window.L;
+}