Offset border on a polygon graphic

[WilliamLanza]

On my map I have a simple polygon feature layer (only layer on the map). A Graphic is created using a simpleFillSymbol  and the feature's geometry. The problem is, if i want polygon A to have a border color of red and adjoining polygon B to have a border color of Blue, where the polygons share a border it is of course the color of the last rendered graphic. (screenshot attached).

My initial thought was to use a CartographicLineSymbol for the border, but that is not possible with the SimpleFillSymbol. 

Is there a way/recommendation for how to offset the border to be inside each polygon using the JS API.

Changing the fill color is not an option as the specs call for the fill color to represent one attribute, and the border to represent another.

Thanks in advance.

Sample Code:

const feature = evt.graphic;
const graphicSymbol = new SimpleFillSymbol(SimpleLineSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([197,47,178]), 2), new Color([0, 0, 0, 0.2]));
const selectedPSAP_graphic = new Graphic(feature.geometry, graphicSymbol);
selectedPSAP_graphic.setAttributes(feature.attributes);
esriMap.graphics.add(selectedPSAP_graphic);

[RobertScheitlin__GISP]

William,

   A CartographicLineSymbol absoleutly can be used as the outline of a SimpleFillSymbol. CartographicLineSymbol inherits from SimpleLineSymbol. So this will work fine:

const graphicSymbol = new SimpleFillSymbol(SimpleLineSymbol.STYLE_SOLID,
  new CartographicLineSymbol(
            CartographicLineSymbol.STYLE_LONGDASHDOT,
            new Color([255,0,0]), 3, 
            CartographicLineSymbol.CAP_ROUND,
            CartographicLineSymbol.JOIN_MITER, 5
          ),
  new Color([0, 0, 0, 0.2])
);‍‍‍‍‍‍‍‍‍

[WilliamLanza]

Thanks, Robert. Unfortunately the CartographicLineSymbol doesn't seem to have an offset property/method in the JS API. my goal is to have the border of the fill symbol offset towards the inside of the polygon so that the borders do not overlap.

I have tried offsetting the geometry of the graphic, but the results for situations where polygons are within polygons is not pretty.

getSelectedGraphic([Graphic, geometryEngine], graphicSymbol: any, feature:any){
      const offsetDistance = this.calcOffset();
      const offsetGeometry = geometryEngine.offset(feature.geometry, offsetDistance, "feet", "miter");
      const selectedGraphic = new Graphic(offsetGeometry, graphicSymbol);
     selectedGraphic.setAttributes(feature.attributes);
     return selectedGraphic;
};

If offsetting the border is not an option, then scaling the graphic (to say 0.9 or something) may work, but again, I haven't found anything in the API to do that (I am relatively new to the API)

Thanks again

[RobertScheitlin__GISP]

William,

  Thinking on this subject I am not aware of any why using the JS API to have a line symbol offset to the inside of a Polygon.

[GaryB]

I'd like to do the same thing, any thoughts a couple years on?