I see that it is possible to create a circular symbol (among other shapes) with SimpleMarkerSymbol.

I also see that it is possible to create a text symbol with TextSymbol.

Is it possible to combine these two to put a bit of text, centered, over the top of a circle element?

2 Answers 2


The easiest method is going to be to use two graphics layers with two different symbologies. (Or, if you have a large number of symbols and access to arcgis server, use a map service with the correct symbology underneath a graphics layer with blank symbols with no fill; that's what I do here: http://maps.stlouisco.com/police/beta)

It should be feasible to create a symbol class that does what you want. I want to do that for my application, so I will try to take some time later this week to figure that out.

  • Is there any documentation available on creating custom symbol classes?
    – jsight
    Nov 1, 2011 at 2:00
  • Not that I could find. It is going to take diving into the code base to figure out. Nov 1, 2011 at 11:04
  • I have the same problem as jsight, please, blord-castillo, could you extend your explanation about how to proceed? I am not sure of understanding what you say: I can publish my symbology in ArcGIS Server, but then, how do I use it on my ArcGIS JS side? How to associate to the textSymbol the symbology in my server? Thanks.
    – Irene
    Nov 30, 2012 at 14:56
  • I am working on changing this process, but what I am doing in that sample is publishing a map service and using that to display the symbols on the map. Meanwhile, on top of the map service, is a separate graphics layers using data from the map service (I will change this to feature service in the feature) to create a graphics layer on top of the symbols. The graphics layer uses a blank symbology; but allows on click and mouse over interactions still Nov 30, 2012 at 15:28

There has been a lot of advances in ArcGIS JavaScript now SDK 4.x. You can do this now with only one graphic per point. Then you can add text to the point using LabelingInfo. Here is an example using ArcGIS JavaScript SDK 4.x with a simple marker and text centered in the simple marker:

First, you have your simple marker renderer:

let mySymbol = {
  type: "simple-marker",  
  style: "circle",
  color: "blue",
  size: "20",
  outline: {  
    color: [ 255, 255, 0 ],
    width: 2  

Then, you create your labelinginfo object that will hold your text based on the desired field. In this case CustomerNumber:

var labelingInfo = [
            labelExpression: "[CustomerNumber]",
            labelPlacement: "center-center",
            symbol: {
                type: "text",
                color: "white",
                font: {
                    family: "Arial",
                    size: 12,
                    weight: "bold",
                    decoration: "none"

Finally, you tie in the marker and text together using the feature layer object:

const myLayer = new FeatureLayer({
        title: "My Layer",
        fields: myFields,
        objectIdField: "ObjectID",
        geometryType: "point",
        source: YOUR_SOURCE_HERE,
        renderer: mySymbol,
        showLabels: true,
        labelingInfo: labelingInfo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.