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 obviosly 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.
أكثر...
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 obviosly 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.
أكثر...