added outline support for method renderSPTG

[ivanKyka]

• Added outline params to MilStdAttributes
• Fixed method processSVGPathBackground
• Added outline support into renderSPTG method

[yevhenii-username]

Awasome

[michael-spinelli]

I feel like I'm missing something. I tried to draw an action point and a few other symbols and nothing changed for me despite setting the new values that were added.

There's more stuff in the SVG but the output looks the same.

{ "SYMSTD": 1, "SIZE": "35", "KEEPUNITRATIO": true, "ICON": false, "OUTLINECOLOR": "FF00FF", "OUTLINEWIDTH": 10, "OUTLINEALPHA": 1 }

original:

<svg width="23px" height="40px" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" version="1.1"><g transform="translate(12,39) scale(0.025,-0.025)">M-408 494v1005h816v-1005l-408 -494z</g><g transform="translate(11,38) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(13,38) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(13,40) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(11,40) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(12,39) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#000000"></path></g></svg>

After your changes:

<svg width="23px" height="40px" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" version="1.1"><g transform="translate(12,39) scale(0.025,-0.025)">M-408 494v1005h816v-1005l-408 -494z</g><g transform="translate(11,38) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(13,38) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(13,40) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(11,40) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(12,39) scale(0.025,-0.025)"><path d="M-408 494v1005h816v-1005l-408 -494z" fill="none" stroke="FF00FF" stroke-width="10"></path></g><g transform="translate(12,39) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#000000"></path></g></svg>

[ivanKyka]

Hello michael-spinelli !

Firstly, you miss '#' symbol in OUTLINECOLOR param. Thats why outline is not showed. Secondly, path, which creating outline effect located before main path. Also result path was been lowscaled as another paths in tag. Thats why OUTLINEWIDTH must be at least greater than 40. Try to generate symbol with next params: { "SYMSTD": 1, "SIZE": "35", "KEEPUNITRATIO": true, "ICON": false, "OUTLINECOLOR": "#FF00FF", "OUTLINEWIDTH": 50, "OUTLINEALPHA": 1 }

[ivanKyka]

In my application I use next params: "OUTLINEWIDTH": 200, "OUTLINEALPHA": 0.5 I have small problems with outline which going beyond viewbox. Thats why I'm setting to svg viewBox property with increased dimensions.

Result svg: <svg width="23px" height="40px" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" version="1.1"><g transform="translate(12,39) scale(0.025,-0.025)">M-408 494v1005h816v-1005l-408 -494z</g><g transform="translate(11,38) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(13,38) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(13,40) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(11,40) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#FFFFFF"></path></g><g transform="translate(12,39) scale(0.025,-0.025)"><path d="M-408 494v1005h816v-1005l-408 -494z" fill="none" stroke="FF00FF" stroke-width="10"></path></g><g transform="translate(12,39) scale(0.025,-0.025)"><path d="M-418 494v1015h836v-1015l-418 -494zM351 524v915h-702v-915h702zM-324 465l324 -390l324 390h-648z" fill="#000000"></path></g></svg>

[michael-spinelli]

Ok, I see it now.

So we could just keep MilStdAttributes.OutlineColor and just change the following around line 2395 in SinglePointSVGRenderer.js and allow you to change the color of the existing outline that's usually white to show contrast between the symbol and the map.

//var oc = RendererUtilities.getIdealOutlineColor(lineColor,true); var oc = modifiers[MilStdAttributes.OutlineColor] || RendererUtilities.getIdealOutlineColor(lineColor,true);

Unless you really want that custom width and alpha value.
The alpha value you added isn't doing anything at the moment. processSVGPathBackground doesn't take an alpha value.

[ivanKyka]

First problem, which i see in that solution it's outline around text symbols into icon.

Second problem it's losing shadow, what makes symbol difficult to perceive.

This problem is especially visible it meteorological symbols

You can see the differences on next images:

Outline instead shadow:

Outline as llayer under symbol

[michael-spinelli]

Good Points.

Do you mind if I make one change so the user doesn't have to use super high values for the width?

if (modifiers[MilStdAttributes.OutlineColor]) { var highlight = this.processSVGPathBackground( fill || frame, modifiers[MilStdAttributes.OutlineColor], RendererSettings.TextBackgroundMethod_OUTLINE, *modifiers[MilStdAttributes.OutlineWidth] (1/ratio),* null, modifiers[MilStdAttributes.OutlineAlpha] ) seBGGroup += '' + highlight + ''; }///

[ivanKyka]

Thanks!

I think this will be good solution!

[michael-spinelli]

going to merge, I'll make the change after.

[michael-spinelli]

Checked in my changes. Give it a test run and let me know if they're good for you.