Arcgis API for Javascript: how to change color of simple point marker using colorpicker

Question

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 + "]"

        console.log(result);
        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("]"));
        console.log(color);

        return color;

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

          var tempOpacity = result.substring(result.lastIndexOf(",")+1,result.lastIndexOf("]")); 
          console.log(tempOpacity);
          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());
            console.log(colorToUse);
            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.

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;
      toolbar.deactivate();
      map.showZoomSlider();
      switch (evt.geometry.type) {
        case "point":
        case "multipoint":
          symbol = new SimpleMarkerSymbol();
          break;
        case "polyline":
          symbol = new SimpleLineSymbol();
          break;
        default:
          symbol = new SimpleFillSymbol();
          break;
      }
      var graphic = new Graphic(evt.geometry, symbol);
      map.graphics.add(graphic);
    }

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.