diff --git a/docs/maps/vector-style-properties.asciidoc b/docs/maps/vector-style-properties.asciidoc index 44fff1eb5fb45..f51632218add1 100644 --- a/docs/maps/vector-style-properties.asciidoc +++ b/docs/maps/vector-style-properties.asciidoc @@ -24,6 +24,10 @@ Use *Icon* to symbolize Points as icons. *Fill color*:: The fill color of the point features. +*Border color*:: The border color of the point features. + +*Border width*:: The border width of the point features. + *Symbol orientation*:: The symbol orientation rotating the icon clockwise. *Symbol size*:: The radius of the symbol size, in pixels. diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/__snapshots__/vector_icon.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/__snapshots__/vector_icon.test.js.snap index 553e1471b61bc..57368b52a2bce 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/__snapshots__/vector_icon.test.js.snap +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/__snapshots__/vector_icon.test.js.snap @@ -38,6 +38,8 @@ exports[`Renders PolygonIcon with correct styles when not line only or not point exports[`Renders SymbolIcon with correct styles when isPointOnly and symbolId provided 1`] = ` `; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/symbol_icon.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/symbol_icon.js index 1cff6003e291a..a2f8d44604a0a 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/symbol_icon.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/symbol_icon.js @@ -15,31 +15,35 @@ export class SymbolIcon extends Component { imgDataUrl: undefined, prevSymbolId: undefined, prevFill: undefined, + prevStroke: undefined, + prevStrokeWidth: undefined, } componentDidMount() { this._isMounted = true; - this._loadSymbol(this.props.symbolId, this.props.fill); + this._loadSymbol(this.props.symbolId, this.props.fill, this.props.stroke, this.props.strokeWidth); } componentDidUpdate() { - this._loadSymbol(this.props.symbolId, this.props.fill); + this._loadSymbol(this.props.symbolId, this.props.fill, this.props.stroke, this.props.strokeWidth); } componentWillUnmount() { this._isMounted = false; } - async _loadSymbol(nextSymbolId, nextFill) { + async _loadSymbol(nextSymbolId, nextFill, nextStroke, nextStrokeWidth) { if (nextSymbolId === this.state.prevSymbolId - && nextFill === this.state.prevFill) { + && nextFill === this.state.prevFill + && nextStroke === this.state.prevStroke + && nextStrokeWidth === this.state.prevStrokeWidth) { return; } let imgDataUrl; try { const svg = getMakiSymbolSvg(nextSymbolId); - const styledSvg = await styleSvg(svg, nextFill); + const styledSvg = await styleSvg(svg, nextFill, nextStroke, nextStrokeWidth); imgDataUrl = buildSrcUrl(styledSvg); } catch (error) { // ignore failures - component will just not display an icon @@ -49,7 +53,9 @@ export class SymbolIcon extends Component { this.setState({ imgDataUrl, prevSymbolId: nextSymbolId, - prevFill: nextFill + prevFill: nextFill, + prevStroke: nextStroke, + prevStrokeWidth: nextStrokeWidth }); } } @@ -68,4 +74,6 @@ export class SymbolIcon extends Component { SymbolIcon.propTypes = { symbolId: PropTypes.string.isRequired, fill: PropTypes.string.isRequired, + stroke: PropTypes.string.isRequired, + strokeWidth: PropTypes.string.isRequired }; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js index 64f97722c4df2..9659914562f2c 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js @@ -75,6 +75,8 @@ export class VectorIcon extends Component { ); } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js index 44977f5898990..f5394f6b63567 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js @@ -14,7 +14,7 @@ import { VectorStyleSymbolEditor } from './vector_style_symbol_editor'; import { OrientationEditor } from './orientation/orientation_editor'; import { getDefaultDynamicProperties, getDefaultStaticProperties } from '../../vector_style_defaults'; import { VECTOR_SHAPE_TYPES } from '../../../sources/vector_feature_types'; -import { SYMBOLIZE_AS_CIRCLE } from '../../vector_constants'; +import { SYMBOLIZE_AS_ICON } from '../../vector_constants'; import { i18n } from '@kbn/i18n'; import { SYMBOL_OPTIONS } from '../../symbol_utils'; @@ -140,23 +140,8 @@ export class VectorStyleEditor extends Component { } _renderPointProperties() { - let lineColor; - let lineWidth; let iconOrientation; - if (this.props.styleProperties.symbol.options.symbolizeAs === SYMBOLIZE_AS_CIRCLE) { - lineColor = ( - - {this._renderLineColor()} - - - ); - lineWidth = ( - - {this._renderLineWidth()} - - - ); - } else { + if (this.props.styleProperties.symbol.options.symbolizeAs === SYMBOLIZE_AS_ICON) { iconOrientation = ( - {lineColor} + {this._renderLineColor()} + - {lineWidth} + {this._renderLineWidth()} + {iconOrientation} diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js index c07b5cbfcce39..f10ff01b40618 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js @@ -85,6 +85,8 @@ export function VectorStyleSymbolEditor({ styleOptions, handlePropertyChange, sy diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js b/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js index a32ae8d414b46..22e1a6aea6a72 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js @@ -62,11 +62,19 @@ export function buildSrcUrl(svgString) { return domUrl.createObjectURL(svg); } -export async function styleSvg(svgString, fill) { +export async function styleSvg(svgString, fill, stroke, strokeWidth) { const svgXml = await parseXmlString(svgString); + let style = ''; if (fill) { - svgXml.svg.$.style = `fill: ${fill};`; + style += `fill:${fill};`; } + if (stroke) { + style += `stroke:${stroke};`; + } + if (strokeWidth) { + style += `stroke-width:${strokeWidth};`; + } + if (style) svgXml.svg.$.style = style; const builder = new xml2js.Builder(); return builder.buildObject(svgXml); } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.test.js index b62f385680daa..66752460331c9 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.test.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.test.js @@ -14,16 +14,30 @@ describe('getMakiSymbolSvg', () => { }); describe('styleSvg', () => { - it('Should not add style property when fill not provided', async () => { + it('Should not add style property when style not provided', async () => { const unstyledSvgString = ''; const styledSvg = await styleSvg(unstyledSvgString); expect(styledSvg.split('\n')[1]).toBe(''); }); - it('Should add style property to svg element', async () => { + it('Should add fill style property to svg element', async () => { const unstyledSvgString = ''; const styledSvg = await styleSvg(unstyledSvgString, 'red'); // eslint-disable-next-line max-len - expect(styledSvg.split('\n')[1]).toBe(''); + expect(styledSvg.split('\n')[1]).toBe(''); + }); + + it('Should add stroke style property to svg element', async () => { + const unstyledSvgString = ''; + const styledSvg = await styleSvg(unstyledSvgString, 'red', 'white'); + // eslint-disable-next-line max-len + expect(styledSvg.split('\n')[1]).toBe(''); + }); + + it('Should add stroke-width style property to svg element', async () => { + const unstyledSvgString = ''; + const styledSvg = await styleSvg(unstyledSvgString, 'red', 'white', '2px'); + // eslint-disable-next-line max-len + expect(styledSvg.split('\n')[1]).toBe(''); }); }); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js index 44989ef133b36..46832240e5922 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js @@ -546,8 +546,12 @@ export class VectorStyle extends AbstractStyle { const symbolId = this._descriptor.properties.symbol.options.symbolId; mbMap.setLayoutProperty(symbolLayerId, 'icon-anchor', getMakiSymbolAnchor(symbolId)); const color = this._getMBColor(this._descriptor.properties.fillColor); + const haloColor = this._getMBColor(this._descriptor.properties.lineColor); + const haloWidth = this._getMbSize(this._descriptor.properties.lineWidth); // icon-color is only supported on SDF icons. mbMap.setPaintProperty(symbolLayerId, 'icon-color', color); + mbMap.setPaintProperty(symbolLayerId, 'icon-halo-color', haloColor); + mbMap.setPaintProperty(symbolLayerId, 'icon-halo-width', haloWidth); mbMap.setPaintProperty(symbolLayerId, 'icon-opacity', alpha); // circle sizing is by radius