Rectangle Symbol with Text

316
3
Jump to solution
10-19-2021 03:45 AM
BrianHennessey1
New Contributor II

How would I go about creating symbols like:

BrianHennessey1_0-1634640143703.png

These are from a JS API map. I would like to do the same in a Runtime map. I'd prefer not to use a Dictionary Renderer. 

0 Kudos
1 Solution

Accepted Solutions
PreetiMaske
Esri Contributor

Hi, 

In Runtime, you can create a Graphic with text symbol with a fill background with something like following :

var textGraphic = new Graphic(new MapPoint(0, 2, SpatialReferences.Wgs84));
textGraphic.Symbol = new TextSymbol() { Text = "Simple", Color = Color.Red, Size = 25, BackgroundColor = Color.Yellow };


Above code will add a graphic that looks like image below:

PreetiMaske_0-1634682192417.png

Or you can create a renderer with this symbol and apply renderer to the graphicsOverlay.
But if you are looking at using different background for different text graphics based on some attribute, I am afraid that it is currently not supported. 
We do have this feature listed in our future candidates. I will add your use case to our backlog issue and would appreciate if you could you please share your requirement and specific workflow with as much details as possible. An elaborate workflow adds more some weight to the feature and help us prioritize it.

 

Thanks,

Preeti

View solution in original post

3 Replies
MichaelBranscomb
Esri Frequent Contributor

Hi,

 

How is the symbol created when used in the ArcGIS API for JavaScript? (e.g. in code using the API, configured in a webmap, or published in a service)

 

Thanks

0 Kudos
BrianHennessey1
New Contributor II

It's actually 2 symbols, a text and a background:

                textSymbol.xoffset = 0;
                textSymbol.yoffset = -6;
                textGraphic.geometry = geometry;
                textGraphic.symbol = textSymbol;
                textGraphic = addCadUnitAttributes(textGraphic, unitInfo, false);
                textGraphic.attributes["graphicType"] = graphicType;
 

                let backgroundSymbol = new SimpleMarkerSymbol();
                let outline = new SimpleLineSymbol();
                let pathHeight = 10;
                let pathWidth = 26;
             
                backgroundSymbol.setStyle(SimpleMarkerSymbol.STYPE_PATH);
                backgroundSymbol.setColor(backgroundColor);
               
          
                outline.setColor(new Color([0, 0, 0, 1]));
                outline.setWidth(0.3);
                backgroundSymbol.setOutline(outline);
                if (unitInfo.UnitNum.length < 4) {
                    pathWidth = 18;
                    backgroundSymbol.setSize("34");
                } else {
                    backgroundSymbol.setSize("52");
                }
                backgroundSymbol.setPath(`M 1 1 h ${pathWidth} v ${pathHeight} h -${pathWidth} z`);
              
                backgroundGraphic.geometry = geometry;
                backgroundGraphic.symbol = backgroundSymbol
                backgroundGraphic = addCadUnitAttributes(backgroundGraphic, unitInfo, true);
                backgroundGraphic.attributes["graphicType"] = graphicType;

                map.graphics.add(backgroundGraphic);
                map.graphics.add(textGraphic);

  

0 Kudos
PreetiMaske
Esri Contributor

Hi, 

In Runtime, you can create a Graphic with text symbol with a fill background with something like following :

var textGraphic = new Graphic(new MapPoint(0, 2, SpatialReferences.Wgs84));
textGraphic.Symbol = new TextSymbol() { Text = "Simple", Color = Color.Red, Size = 25, BackgroundColor = Color.Yellow };


Above code will add a graphic that looks like image below:

PreetiMaske_0-1634682192417.png

Or you can create a renderer with this symbol and apply renderer to the graphicsOverlay.
But if you are looking at using different background for different text graphics based on some attribute, I am afraid that it is currently not supported. 
We do have this feature listed in our future candidates. I will add your use case to our backlog issue and would appreciate if you could you please share your requirement and specific workflow with as much details as possible. An elaborate workflow adds more some weight to the feature and help us prioritize it.

 

Thanks,

Preeti

View solution in original post