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.
var colorCode = this.hexCode.value; map.graphics.graphics.forEach(function(graphic){ graphic.setSymbol(createSymbol(iconPath, colorCode));