topic Re: Offset border on a polygon graphic in ArcGIS JavaScript Maps SDK Questions

Offset border on a polygon graphic

WilliamLanza — Sat, 11 Dec 2021 07:47:53 GMT

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);

Re: Offset border on a polygon graphic

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:47:56 GMT

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])
);‍‍‍‍‍‍‍‍‍

Re: Offset border on a polygon graphic

WilliamLanza — Wed, 19 Sep 2018 13:40:10 GMT

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

Re: Offset border on a polygon graphic

RobertScheitlin__GISP — Wed, 19 Sep 2018 18:49:12 GMT

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.

Re: Offset border on a polygon graphic

GaryB — Sat, 08 Jan 2022 13:18:44 GMT

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