as title states im having a hard time changing the color of my simplemarkersymbol using javascript.

I have read that the format of color needs to be [r, g, b, a] which I have a color picker giving me the correct format but whenever i try to set the value with a variable, or the .val(); it will not work! i have spent far too much time trying to tweak this Ill post my code.

    function toRGBA(color) {

        var colorToChop = color;
        var result;

        var findme = "a";
        if ( colorToChop.indexOf(findme) > -1 ) {

        colorToChop = colorToChop.substring(5, colorToChop.length -1)
        result = "[" + colorToChop + "]"

        var tempOpacity = result.substring(result.lastIndexOf(",")+1,result.lastIndexOf("]"));  
        var jAlpha = parseInt(tempOpacity * 255,10);

        var color = result.substr(0, result.lastIndexOf(",")+ 1) + jAlpha + result.substr(result.lastIndexOf("]"));

        return color;

        } else {
          colorToChop = colorToChop.substring(4, colorToChop.length -1)
          result = "[" + colorToChop + ", 1" + "]"

          var tempOpacity = result.substring(result.lastIndexOf(",")+1,result.lastIndexOf("]")); 
          var jAlpha = parseInt(tempOpacity * 255,10);
          var color = result.substr(0, result.lastIndexOf(",")+ 1) + jAlpha + result.substr(result.lastIndexOf("]"));

          return color;

the above function takes any rgb or rgba color value and will convert it to the 4 digit array like i need... now the following function is where the simplemarkersymbol is defined and set up.

            colorToUse = toRGBA($("#colorPicker").val());
            var outlineColor = toRGBA($("#outlinePicker").val());

            markerSymbol = new SimpleMarkerSymbol({
              "color": colorToUse,
              "size": $("#sizeSpinner").val(),
              "angle": 0,
              "xoffset": 0,
              "yoffset": 0,
              "type": "esriSMS",
              "style": $("#pointIcon").val(),
              "outline": {
                "color": outlineColor,
                "width": $("#widthSpinner").val(),
                "type": "esriSLS",
                "style": "esriSLSSolid"

Now i am using the spectrum color picker to get the colors in the first place. If i manually enter "color": [255, 0, 0, 255] I will get the color red obviously to display on the map. My problem is when I pass it as a variable which I need to as it is a dynamically changing marker color.

  • What version of ArcGIS Server are you using? 10.1 has a few new features that may be helpful.
    – Branco
    Nov 7, 2014 at 18:12
  • first off thank you for your time. and secondly it is 10.0 Nov 7, 2014 at 18:13
  • Try reading though this...developers.arcgis.com/javascript/jssamples/….... This resets the rendering options on a dynamic layer. Might be a good place to start looking into it.
    – Branco
    Nov 7, 2014 at 18:17
  • 1
    I can add the graphic and all that functionality works, the problem lies with changing the color , for example look at this link Nov 7, 2014 at 18:19
  • If that is what you're trying to do, look at their code. They attach a dojo.on handler to the 'onchange' then modify their graphics (around line 56). var colorCode = this.hexCode.value; map.graphics.graphics.forEach(function(graphic){ graphic.setSymbol(createSymbol(iconPath, colorCode));
    – Branco
    Nov 7, 2014 at 18:23

1 Answer 1


Ok.. Now that I have a better idea of what is going on, I can point you in the right direction.

You want to be able to select a graphic like a circle and select a color from a color picker, draw a graphic or click a point, and the map would load that graphic on there based on your choices.

There are a couple of ways I can think of doing this, but this may be the more simple of the ones I came up with.

1) Create something like a button to display a color palette/wheel/whatever. You could use something like The Dijit Color Palette. Attach a handler to the onChange event that passes the value to a global variable/object. You will need to convert a hex color into a rgba one. This post has details on some code for that.

2) Using buttons or something of the like with your symbols (circle, square, line, etc) make their onClick event start of the Drawing toolbar with the correct parameter for the toolbar.activate(Draw[//tool name here]);. This will let you start drawing. Be sure to attach a handler to the drawing end event toolbar.on("draw-end", hereIsYourFunction);.

3) In your hereIsYourFunction function, you are going to create the graphic and add it to your map. Something like.. (copied from ESRI's API Sample Code)

function addToMap(evt) {
      var symbol;
      switch (evt.geometry.type) {
        case "point":
        case "multipoint":
          symbol = new SimpleMarkerSymbol();
        case "polyline":
          symbol = new SimpleLineSymbol();
          symbol = new SimpleFillSymbol();
      var graphic = new Graphic(evt.geometry, symbol);

The major difference would be to fill out the parameters in the SimpleMarker(Line/Fill)Symbol constructor with the colors from your color picker. Look at each of those objects to get the appropriate constructor parameters to fill out.

There should be enough sample code between this post and the links to get you going. You may find a better way to enhance this. I would start out using the Dijit Color Palette since it seems to break things down well enough and automatically supplies you with a hex value. You may find a different color wheel or something out there that will work better.

The only thing that won't be colored differently this way is the actual drawing graphic the toolbar uses, but the end result will have your color in there. There are probably ways to adjust that part of the draw toolbar, but I did not look into it.

  • that is exactly what I am trying to do. I have all of that working including the conversion to the RGBA the symbol will draw,changeshape, size just not the color. i found this link awhile ago help.arcgis.com/en/arcgisserver/10.0/apis/rest/symbol.html that specifies how to set up the color option and if i type the literal value of a color [ 255, 0, 0 255 ] itll display the selected color red and draw the graphic on the map.the problem is I am trying to pass the value as a variable instead of the 4 digit rgba array [r,g,b,a] that the json object asks for and it will just default to black Nov 7, 2014 at 19:33

Your Answer

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

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