Skip to content

Commit 18ebf77

Browse files
elizabetdevelizabetdev
committed
[Maps] Improve icons for all layer types (#83503)
* Improve icons for all layer types * EMS boundaries icon * Adding tracks layer icon
1 parent 222cbaa commit 18ebf77

21 files changed

Lines changed: 180 additions & 13 deletions

‎x-pack/plugins/maps/public/classes/layers/_layers.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
}
77

88
&__background {
9-
fill: $euiColorLightShade;
9+
fill: lightOrDarkTheme($euiColorLightShade, $euiColorMediumShade);
10+
}
11+
12+
&__backgroundDarker {
13+
fill: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade);
1014
}
1115
}

‎x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
99
import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
1010
import { LayerWizard, RenderWizardArguments } from '../layer_wizard_registry';
1111
import { LayerTemplate } from './layer_template';
12-
import { ChoroplethLayerIcon } from './cloropleth_layer_icon';
12+
import { ChoroplethLayerIcon } from '../icons/cloropleth_layer_icon';
1313

1414
export const choroplethLayerWizardConfig: LayerWizard = {
1515
categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],

x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/cloropleth_layer_icon.tsx renamed to x-pack/plugins/maps/public/classes/layers/icons/cloropleth_layer_icon.tsx

File renamed without changes.

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_icon.tsx renamed to x-pack/plugins/maps/public/classes/layers/icons/clusters_layer_icon.tsx

File renamed without changes.

x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_icon.tsx renamed to x-pack/plugins/maps/public/classes/layers/icons/documents_layer_icon.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
import React, { FunctionComponent } from 'react';
88

9-
export const EsDocumentsLayerIcon: FunctionComponent = () => (
9+
export const DocumentsLayerIcon: FunctionComponent = () => (
1010
<svg
1111
xmlns="http://www.w3.org/2000/svg"
1212
width="49"

‎x-pack/plugins/maps/public/classes/layers/icons/ems_boundaries_layer_icon.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
/*
8+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
9+
* or more contributor license agreements. Licensed under the Elastic License;
10+
* you may not use this file except in compliance with the Elastic License.
11+
*/
12+
13+
import React, { FunctionComponent } from 'react';
14+
15+
export const EMSBoundariesLayerIcon: FunctionComponent = () => (
16+
<svg
17+
xmlns="http://www.w3.org/2000/svg"
18+
width="49"
19+
height="25"
20+
fill="none"
21+
viewBox="0 0 49 25"
22+
className="mapLayersWizardIcon"
23+
>
24+
<path
25+
className="mapLayersWizardIcon__backgroundDarker"
26+
d="M30.766 14.01l1.602-12.954-1.389.237c-.744.253-1.768.38-2.702.45a43.28 43.28 0 01-1.259.07l-.092.004c-.312.014-.57.026-.72.042a1.895 1.895 0 00-.558.168c-.156.07-.316.156-.47.238l-.057.03c-.356.191-.687.358-1.025.4l-1.308.339v5.863c0 .698.142 2.17 0 3.443l-.204 1.67h8.182zM20.871 2.748c-.656.039-1.247.282-2.06.4l-.702.102c-.583.086-1.16.172-1.693.238-.75.093-1.389.145-1.82.113-.592-.044-1.124.341-1.61.843-.453.467-.926 1.1-1.429 1.777l-.144.193c-1.132 1.517-2.452 3.218-4.22 4.101-.214.108-.346.313-.432.528-.087.22-.14.489-.172.78-.064.587-.047 1.325.007 2.083.071 1.01.211 2.102.32 2.956.054.42.1.783.128 1.05.08.78-.128 1.769-.37 2.653-.088.319-.178.616-.258.882-.03.1-.06.195-.086.285a9.67 9.67 0 00-.12.434 1.518 1.518 0 00-.054.334c0 .279.11.577.283.842.175.268.426.52.735.708l.067.04.079-.001c4.133-.068 10.22-.554 10.972-.638a.582.582 0 00.334-.17c.083-.08.157-.182.224-.293.134-.223.264-.524.388-.867.249-.69.495-1.6.72-2.52.162-.654.545-1.41.683-2.01l.784-2.796c.066-.379.198-1.13.272-1.705.146-1.148-.01-2.54.097-3.999.107-1.458.171-2.917.146-4.052a10.13 10.13 0 00-.112-1.438 2.469 2.469 0 00-.131-.495c-.053-.128-.276-.358-.276-.358h-.55zm10.931 12.621s-1.169-.652-1.548-.642c-.757.019-1.298-.026-2.352 0h-5.489l-2.863 8.915c.2.066 1.938.444 2.242.447.62.005 1.478-.08 2.393-.197.88-.113 1.824-.258 2.678-.389l.113-.017a49.753 49.753 0 012.166-.305c.347-.034.996-.024 1.858-.007l.127.003c.827.017 1.819.037 2.869.023 2.198-.029 4.694-.204 6.5-.887 1.42-.538 2.099-.87 2.513-1.34.414-.468.575-1.576.575-1.576s-2.907.868-4.807.784c-.927-.04-1.508.045-2.352-.34-1.429-.652-1.206-2.221-2.43-3.205-.77-.62-2.193-1.267-2.193-1.267z"
27+
/>
28+
<path
29+
className="mapLayersWizardIcon__backgroundDarker"
30+
d="M33.322 1.125S31.277 14.3 31.72 14.522c.786.393 2.012.665 3.137 1.67 1.23 1.1 1.172 2.5 2.318 3.24.835.538 6.525-.704 6.525-.704l.228-7.956s-.174-4.5-.89-5.216c-.715-.716-2.488-1.125-3-2.08-1.115-2.08-3.068-2.351-3.068-2.351h-3.648z"
31+
/>
32+
</svg>
33+
);

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_icon.tsx renamed to x-pack/plugins/maps/public/classes/layers/icons/heatmap_layer_icon.tsx

File renamed without changes.

x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_icon.tsx renamed to x-pack/plugins/maps/public/classes/layers/icons/point_2_point_layer_icon.tsx

File renamed without changes.

‎x-pack/plugins/maps/public/classes/layers/icons/tracks_layer_icon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import React, { FunctionComponent } from 'react';
8+
9+
export const TracksLayerIcon: FunctionComponent = () => (
10+
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="25" fill="none" viewBox="0 0 49 25">
11+
<path
12+
className="mapLayersWizardIcon__highlight"
13+
d="M12.733 12.136h32.283v.545H12.935L4.452 19.98l-.356-.413 8.637-7.43z"
14+
/>
15+
<circle cx="24.939" cy="12.409" r="3.273" className="mapLayersWizardIcon__highlight" />
16+
<circle cx="35.849" cy="12.409" r="2.182" className="mapLayersWizardIcon__highlight" />
17+
<circle cx="45.561" cy="12.409" r="2.182" className="mapLayersWizardIcon__highlight" />
18+
<circle cx="5.197" cy="18.954" r="2.182" className="mapLayersWizardIcon__highlight" />
19+
<circle cx="13.485" cy="12.409" r="2.182" className="mapLayersWizardIcon__highlight" />
20+
</svg>
21+
);

‎x-pack/plugins/maps/public/classes/layers/icons/vector_tile_layer_icon.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import React, { FunctionComponent } from 'react';
8+
9+
export const VectorTileLayerIcon: FunctionComponent = () => (
10+
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="25" fill="none" viewBox="0 0 49 25">
11+
<g clipPath="url(#clip0)">
12+
<path
13+
className="mapLayersWizardIcon__background"
14+
d="M33.547 14.847l2.439-19.72-2.114.36c-1.133.385-2.692.577-4.114.684-.706.052-1.368.083-1.916.108l-.14.006c-.475.02-.868.038-1.097.064a2.885 2.885 0 00-.85.255c-.237.106-.48.237-.714.362l-.088.047c-.541.29-1.045.543-1.56.608l-1.99.515v8.926c0 1.062.215 3.302 0 5.242l-.311 2.543h12.455zM18.485-2.298c-1 .058-1.9.429-3.135.607-.356.051-.714.104-1.07.157-.888.131-1.765.26-2.577.362-1.143.142-2.115.22-2.77.172C8.031-1.067 7.22-.48 6.48.283c-.69.711-1.408 1.676-2.174 2.704l-.22.295C2.363 5.591.354 8.18-2.337 9.526c-.326.163-.528.475-.658.803-.132.334-.214.743-.263 1.188-.097.893-.07 2.016.011 3.17.109 1.539.322 3.2.488 4.5.082.64.153 1.192.194 1.598.122 1.188-.195 2.693-.564 4.038-.134.486-.27.939-.392 1.343l-.13.434a14.78 14.78 0 00-.184.661c-.044.178-.081.36-.081.508 0 .425.168.879.43 1.282.267.408.65.793 1.12 1.078l.102.061.12-.002c6.291-.103 15.558-.843 16.703-.97a.886.886 0 00.507-.259 2.15 2.15 0 00.342-.447c.204-.34.401-.797.59-1.32.38-1.05.753-2.434 1.098-3.834.244-.997.828-2.148 1.037-3.062l1.194-4.256c.101-.576.302-1.721.414-2.595.223-1.748-.015-3.866.148-6.088.162-2.22.26-4.44.223-6.168-.019-.862-.072-1.615-.172-2.19a3.756 3.756 0 00-.199-.752c-.08-.196-.42-.545-.42-.545h-.837zm16.639 19.212s-1.78-.992-2.356-.978c-1.153.03-1.976-.038-3.58 0h-8.356l-4.36 13.571c.305.102 2.95.677 3.414.681.943.008 2.25-.12 3.643-.3 1.338-.17 2.776-.392 4.077-.591l.171-.027c1.352-.207 2.532-.387 3.297-.463.53-.053 1.517-.037 2.829-.011l.194.004c1.259.025 2.768.056 4.367.035 3.347-.043 7.146-.31 9.894-1.35 2.162-.82 3.196-1.325 3.826-2.039.63-.714.876-2.4.876-2.4s-4.425 1.321-7.318 1.194c-1.411-.062-2.295.067-3.58-.52-2.175-.991-1.835-3.38-3.698-4.877-1.174-.944-3.34-1.929-3.34-1.929z"
15+
/>
16+
<path
17+
className="mapLayersWizardIcon__background"
18+
d="M37.439-4.77s-3.114 20.058-2.44 20.395c1.197.598 3.063 1.012 4.775 2.543 1.872 1.673 1.784 3.805 3.53 4.93 1.27.82 9.932-1.07 9.932-1.07l.348-12.112s-.265-6.85-1.355-7.94C51.14.886 48.441.264 47.662-1.189c-1.697-3.169-4.67-3.581-4.67-3.581h-5.553z"
19+
/>
20+
<circle cx="9.487" cy="7.606" r="1.661" className="mapLayersWizardIcon__highlight" />
21+
<circle cx="42.779" cy="9.055" r="1.661" className="mapLayersWizardIcon__highlight" />
22+
<circle cx="24.834" cy="21.957" r="1.661" className="mapLayersWizardIcon__highlight" />
23+
<circle cx="46.423" cy="16.145" r="1.661" className="mapLayersWizardIcon__highlight" />
24+
<circle cx="28.986" cy="2.029" r="1.661" className="mapLayersWizardIcon__highlight" />
25+
<circle cx="30.646" cy="9.502" r="1.661" className="mapLayersWizardIcon__highlight" />
26+
<circle cx="40.61" cy="-0.462" r="1.661" className="mapLayersWizardIcon__highlight" />
27+
<circle cx="15.7" cy="2.029" r="1.661" className="mapLayersWizardIcon__highlight" />
28+
<circle cx="2.415" cy="13.654" r="1.661" className="mapLayersWizardIcon__highlight" />
29+
<circle cx="12.379" cy="15.315" r="1.661" className="mapLayersWizardIcon__highlight" />
30+
<circle cx="4.075" cy="23.618" r="1.661" className="mapLayersWizardIcon__highlight" />
31+
<circle cx="14.039" cy="24.448" r="1.661" className="mapLayersWizardIcon__highlight" />
32+
<circle cx="33.968" cy="24.448" r="1.661" className="mapLayersWizardIcon__highlight" />
33+
<path
34+
className="mapLayersWizardIcon__highlight"
35+
d="M.834 23.863h48v.545h-48zm0-11.727h48v.545h-48zm0-11.727h48v.545h-48z"
36+
/>
37+
<path
38+
className="mapLayersWizardIcon__highlight"
39+
d="M.834.409h.545v24H.834zm15.818 0h.545v24h-.545zm16.091 0h.545v24h-.545zm15.545 0h.545v24h-.545z"
40+
/>
41+
</g>
42+
<defs>
43+
<clipPath id="clip0">
44+
<path fill="#fff" d="M0 0h48v24H0z" transform="translate(.834 .409)" />
45+
</clipPath>
46+
</defs>
47+
</svg>
48+
);

0 commit comments

Comments
 (0)