nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Drawing a circle with border without it being filled

TaylorAbrahamson

I am trying to draw a black circle with a radius and border 'stroke' width. I do not want the circle to be filled in with any color.

I see that you can draw a filled circle with SimpleMarkerSymbol using the Style.CIRCLE. But that fills the circle, there are no options for border color and width or opacity of the fill color.

Perhaps I've missed something in the API.

Find more posts tagged with

Accepted answers

StephenBaier

You could use a SimplePictureSymbol with the picture of a donut (circle with full alpha center).

All comments

EliseAcheson1

Thanks for all of these options. Although I can't do exactly what I want to do, I at least have a few work arounds.

I would like to reccomend that the API have a setAlpha(int alpha) method added for a SympleMarkerSymbol. SimpleLineSymbol has it, why not SimpleMarkerSymbol?

Suggestion noted!

You can however set transparency on an individual SimpleMarkerSymbol via its Color, e.g. by using a color like (0, 0, 0, 150) where 150 is the alpha. You can also set an opacity on the GraphicsLayer containing these symbols, so for example if you wanted a group of symbols to have a certain transparency you could stick them all in the same layer and set the opacity on the layer via setOpacity(float).

TaylorAbrahamson

Thanks for all of these options. Although I can't do exactly what I want to do, I at least have a few work arounds.

I would like to reccomend that the API have a setAlpha(int alpha) method added for a SympleMarkerSymbol. SimpleLineSymbol has it, why not SimpleMarkerSymbol?

EliseAcheson1

You can use a SimpleFillSymbol with a SimpleLineSymbol border and a transparent fill color - however you need to use this type of symbol with a polygon Geometry, not a point. So, you could either create your circles as polygons or use GeometryEngine.buffer to buffer a point and thus create a polygon geometry, then symbolize that with a fill symbol. If you don't want the scale dependent behavior that a polygon will give you, then the PictureMarkerSymbol suggestion is probably your best bet.

StephenBaier

You could use a SimplePictureSymbol with the picture of a donut (circle with full alpha center).

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.