From 18ebf7726618caa32622fae60e32b8e1e4a2adfa Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 17 Nov 2020 16:03:39 +0000 Subject: [PATCH] [Maps] Improve icons for all layer types (#83503) * Improve icons for all layer types * EMS boundaries icon * Adding tracks layer icon --- .../maps/public/classes/layers/_layers.scss | 6 ++- .../choropleth_layer_wizard.tsx | 2 +- .../cloropleth_layer_icon.tsx | 0 .../icons}/clusters_layer_icon.tsx | 0 .../icons/documents_layer_icon.tsx} | 2 +- .../icons/ems_boundaries_layer_icon.tsx | 33 +++++++++++++ .../icons}/heatmap_layer_icon.tsx | 0 .../icons}/point_2_point_layer_icon.tsx | 0 .../layers/icons/tracks_layer_icon.tsx | 21 ++++++++ .../layers/icons/vector_tile_layer_icon.tsx | 48 +++++++++++++++++++ .../icons/web_map_service_layer_icon.tsx | 27 +++++++++++ .../layers/icons/world_map_layer_icon.tsx | 29 +++++++++++ .../ems_boundaries_layer_wizard.tsx | 3 +- .../ems_base_map_layer_wizard.tsx | 3 +- .../clusters_layer_wizard.tsx | 2 +- .../heatmap_layer_wizard.tsx | 2 +- .../point_2_point_layer_wizard.tsx | 2 +- .../es_documents_layer_wizard.tsx | 4 +- .../layer_wizard.tsx | 3 +- .../sources/wms_source/wms_layer_wizard.tsx | 3 +- .../sources/xyz_tms_source/layer_wizard.tsx | 3 +- 21 files changed, 180 insertions(+), 13 deletions(-) rename x-pack/plugins/maps/public/classes/layers/{choropleth_layer_wizard => icons}/cloropleth_layer_icon.tsx (100%) rename x-pack/plugins/maps/public/classes/{sources/es_geo_grid_source => layers/icons}/clusters_layer_icon.tsx (100%) rename x-pack/plugins/maps/public/classes/{sources/es_search_source/es_documents_layer_icon.tsx => layers/icons/documents_layer_icon.tsx} (98%) create mode 100644 x-pack/plugins/maps/public/classes/layers/icons/ems_boundaries_layer_icon.tsx rename x-pack/plugins/maps/public/classes/{sources/es_geo_grid_source => layers/icons}/heatmap_layer_icon.tsx (100%) rename x-pack/plugins/maps/public/classes/{sources/es_pew_pew_source => layers/icons}/point_2_point_layer_icon.tsx (100%) create mode 100644 x-pack/plugins/maps/public/classes/layers/icons/tracks_layer_icon.tsx create mode 100644 x-pack/plugins/maps/public/classes/layers/icons/vector_tile_layer_icon.tsx create mode 100644 x-pack/plugins/maps/public/classes/layers/icons/web_map_service_layer_icon.tsx create mode 100644 x-pack/plugins/maps/public/classes/layers/icons/world_map_layer_icon.tsx diff --git a/x-pack/plugins/maps/public/classes/layers/_layers.scss b/x-pack/plugins/maps/public/classes/layers/_layers.scss index 54ab7d85ef170..f3685b163e397 100644 --- a/x-pack/plugins/maps/public/classes/layers/_layers.scss +++ b/x-pack/plugins/maps/public/classes/layers/_layers.scss @@ -6,6 +6,10 @@ } &__background { - fill: $euiColorLightShade; + fill: lightOrDarkTheme($euiColorLightShade, $euiColorMediumShade); + } + + &__backgroundDarker { + fill: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade); } } diff --git a/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx index d87302a6a9f2e..670c775c3cc92 100644 --- a/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx @@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n'; import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants'; import { LayerWizard, RenderWizardArguments } from '../layer_wizard_registry'; import { LayerTemplate } from './layer_template'; -import { ChoroplethLayerIcon } from './cloropleth_layer_icon'; +import { ChoroplethLayerIcon } from '../icons/cloropleth_layer_icon'; export const choroplethLayerWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH], diff --git a/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/cloropleth_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/cloropleth_layer_icon.tsx similarity index 100% rename from x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/cloropleth_layer_icon.tsx rename to x-pack/plugins/maps/public/classes/layers/icons/cloropleth_layer_icon.tsx diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/clusters_layer_icon.tsx similarity index 100% rename from x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_icon.tsx rename to x-pack/plugins/maps/public/classes/layers/icons/clusters_layer_icon.tsx diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/documents_layer_icon.tsx similarity index 98% rename from x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_icon.tsx rename to x-pack/plugins/maps/public/classes/layers/icons/documents_layer_icon.tsx index dcd4985f44280..168c8f8072b32 100644 --- a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_icon.tsx +++ b/x-pack/plugins/maps/public/classes/layers/icons/documents_layer_icon.tsx @@ -6,7 +6,7 @@ import React, { FunctionComponent } from 'react'; -export const EsDocumentsLayerIcon: FunctionComponent = () => ( +export const DocumentsLayerIcon: FunctionComponent = () => ( ( + + + + +); diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/heatmap_layer_icon.tsx similarity index 100% rename from x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_icon.tsx rename to x-pack/plugins/maps/public/classes/layers/icons/heatmap_layer_icon.tsx diff --git a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/point_2_point_layer_icon.tsx similarity index 100% rename from x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_icon.tsx rename to x-pack/plugins/maps/public/classes/layers/icons/point_2_point_layer_icon.tsx diff --git a/x-pack/plugins/maps/public/classes/layers/icons/tracks_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/tracks_layer_icon.tsx new file mode 100644 index 0000000000000..5070e49ddc2b6 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/layers/icons/tracks_layer_icon.tsx @@ -0,0 +1,21 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FunctionComponent } from 'react'; + +export const TracksLayerIcon: FunctionComponent = () => ( + + + + + + + + +); diff --git a/x-pack/plugins/maps/public/classes/layers/icons/vector_tile_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/vector_tile_layer_icon.tsx new file mode 100644 index 0000000000000..8c4cd11221622 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/layers/icons/vector_tile_layer_icon.tsx @@ -0,0 +1,48 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FunctionComponent } from 'react'; + +export const VectorTileLayerIcon: FunctionComponent = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/x-pack/plugins/maps/public/classes/layers/icons/web_map_service_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/web_map_service_layer_icon.tsx new file mode 100644 index 0000000000000..d845a66b93748 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/layers/icons/web_map_service_layer_icon.tsx @@ -0,0 +1,27 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FunctionComponent } from 'react'; + +export const WebMapServiceLayerIcon: FunctionComponent = () => ( + + + + +); diff --git a/x-pack/plugins/maps/public/classes/layers/icons/world_map_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/world_map_layer_icon.tsx new file mode 100644 index 0000000000000..702371e52996f --- /dev/null +++ b/x-pack/plugins/maps/public/classes/layers/icons/world_map_layer_icon.tsx @@ -0,0 +1,29 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FunctionComponent } from 'react'; + +export const WorldMapLayerIcon: FunctionComponent = () => ( + + + +); diff --git a/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx index 768bbd1d94700..78100fe501208 100644 --- a/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx @@ -14,6 +14,7 @@ import { EMSFileSource, sourceTitle } from './ems_file_source'; import { getEMSSettings } from '../../../kibana_services'; import { EMSFileSourceDescriptor } from '../../../../common/descriptor_types'; import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants'; +import { EMSBoundariesLayerIcon } from '../../layers/icons/ems_boundaries_layer_icon'; export const emsBoundariesLayerWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.REFERENCE], @@ -24,7 +25,7 @@ export const emsBoundariesLayerWizardConfig: LayerWizard = { description: i18n.translate('xpack.maps.source.emsFileDescription', { defaultMessage: 'Administrative boundaries from Elastic Maps Service', }), - icon: 'emsApp', + icon: EMSBoundariesLayerIcon, renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => { const onSourceConfigChange = (sourceConfig: Partial) => { const sourceDescriptor = EMSFileSource.createDescriptor(sourceConfig); diff --git a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx index bfa46574f007a..ff65889e15d27 100644 --- a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx @@ -15,6 +15,7 @@ import { VectorTileLayer } from '../../layers/vector_tile_layer/vector_tile_laye import { TileServiceSelect } from './tile_service_select'; import { getEMSSettings } from '../../../kibana_services'; import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants'; +import { WorldMapLayerIcon } from '../../layers/icons/world_map_layer_icon'; export const emsBaseMapLayerWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.REFERENCE], @@ -25,7 +26,7 @@ export const emsBaseMapLayerWizardConfig: LayerWizard = { description: i18n.translate('xpack.maps.source.emsTileDescription', { defaultMessage: 'Tile map service from Elastic Maps Service', }), - icon: 'emsApp', + icon: WorldMapLayerIcon, renderWizard: ({ previewLayers }: RenderWizardArguments) => { const onSourceConfigChange = (sourceConfig: unknown) => { const layerDescriptor = VectorTileLayer.createDescriptor({ diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx index 5d0a414cd0d18..0f596c47fc9b6 100644 --- a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx @@ -29,7 +29,7 @@ import { STYLE_TYPE, } from '../../../../common/constants'; import { NUMERICAL_COLOR_PALETTES } from '../../styles/color_palettes'; -import { ClustersLayerIcon } from './clusters_layer_icon'; +import { ClustersLayerIcon } from '../../layers/icons/clusters_layer_icon'; export const clustersLayerWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH], diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx index 652514a3b9d34..dcad1e1e0b4b9 100644 --- a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx @@ -15,7 +15,7 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re import { HeatmapLayer } from '../../layers/heatmap_layer/heatmap_layer'; import { ESGeoGridSourceDescriptor } from '../../../../common/descriptor_types'; import { LAYER_WIZARD_CATEGORY, RENDER_AS } from '../../../../common/constants'; -import { HeatmapLayerIcon } from './heatmap_layer_icon'; +import { HeatmapLayerIcon } from '../../layers/icons/heatmap_layer_icon'; export const heatmapLayerWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH], diff --git a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx index 74e690d4d3204..9d3ccf128fe05 100644 --- a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx @@ -23,7 +23,7 @@ import { NUMERICAL_COLOR_PALETTES } from '../../styles/color_palettes'; import { CreateSourceEditor } from './create_source_editor'; import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry'; import { ColorDynamicOptions, SizeDynamicOptions } from '../../../../common/descriptor_types'; -import { Point2PointLayerIcon } from './point_2_point_layer_icon'; +import { Point2PointLayerIcon } from '../../layers/icons/point_2_point_layer_icon'; export const point2PointLayerWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH], diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx index 80cc88f432cad..04671b931d56b 100644 --- a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx @@ -15,7 +15,7 @@ import { BlendedVectorLayer } from '../../layers/blended_vector_layer/blended_ve import { VectorLayer } from '../../layers/vector_layer/vector_layer'; import { LAYER_WIZARD_CATEGORY, SCALING_TYPES } from '../../../../common/constants'; import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer'; -import { EsDocumentsLayerIcon } from './es_documents_layer_icon'; +import { DocumentsLayerIcon } from '../../layers/icons/documents_layer_icon'; import { ESSearchSourceDescriptor, VectorLayerDescriptor, @@ -41,7 +41,7 @@ export const esDocumentsLayerWizardConfig: LayerWizard = { description: i18n.translate('xpack.maps.source.esSearchDescription', { defaultMessage: 'Points, lines, and polygons from Elasticsearch', }), - icon: EsDocumentsLayerIcon, + icon: DocumentsLayerIcon, renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => { const onSourceConfigChange = (sourceConfig: Partial) => { if (!sourceConfig) { diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx index 32fa329be85df..db05570af05d5 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx @@ -12,13 +12,14 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer'; import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants'; import { TiledSingleLayerVectorSourceSettings } from '../../../../common/descriptor_types'; +import { VectorTileLayerIcon } from '../../layers/icons/vector_tile_layer_icon'; export const mvtVectorSourceWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.REFERENCE], description: i18n.translate('xpack.maps.source.mvtVectorSourceWizard', { defaultMessage: 'Data service implementing the Mapbox vector tile specification', }), - icon: 'grid', + icon: VectorTileLayerIcon, renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => { const onSourceConfigChange = (sourceConfig: TiledSingleLayerVectorSourceSettings) => { const sourceDescriptor = MVTSingleLayerVectorSource.createDescriptor(sourceConfig); diff --git a/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx index b3950baf8dbeb..47a426e34a420 100644 --- a/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx @@ -13,13 +13,14 @@ import { sourceTitle, WMSSource } from './wms_source'; import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry'; import { TileLayer } from '../../layers/tile_layer/tile_layer'; import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants'; +import { WebMapServiceLayerIcon } from '../../layers/icons/web_map_service_layer_icon'; export const wmsLayerWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.REFERENCE], description: i18n.translate('xpack.maps.source.wmsDescription', { defaultMessage: 'Maps from OGC Standard WMS', }), - icon: 'grid', + icon: WebMapServiceLayerIcon, renderWizard: ({ previewLayers }: RenderWizardArguments) => { const onSourceConfigChange = (sourceConfig: unknown) => { if (!sourceConfig) { diff --git a/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx index b0344a3e0e318..e442907d172e9 100644 --- a/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx @@ -11,13 +11,14 @@ import { XYZTMSSource, sourceTitle } from './xyz_tms_source'; import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry'; import { TileLayer } from '../../layers/tile_layer/tile_layer'; import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants'; +import { WorldMapLayerIcon } from '../../layers/icons/world_map_layer_icon'; export const tmsLayerWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.REFERENCE], description: i18n.translate('xpack.maps.source.ems_xyzDescription', { defaultMessage: 'Tile map service configured in interface', }), - icon: 'grid', + icon: WorldMapLayerIcon, renderWizard: ({ previewLayers }: RenderWizardArguments) => { const onSourceConfigChange = (sourceConfig: XYZTMSSourceConfig | null) => { if (!sourceConfig) {