Select to view content in your preferred language

Legend doesn't recognize how color is formatted

784
1
Jump to solution
08-07-2014 08:01 AM
TracySchloss
Frequent Contributor

I am using something I found at gitHub that will help me classify my data, change classes, colors etc.  It was a little rough, but I got it working and my layer is drawing.  The problem is in the way the color is formatted.  I'm pulling it out an predetermined array and the function is converting it to hex. Somewhere in here I've defined my color such that the legend doesn't like it and it's failing when I create it.

The color is defined as hex returned from the function in the format #ffee000.  I using these to create a simplefillsymbol for a classbreakrenderer

breakData is what is getting returned from my function.  It is in the format

{"breaks": [{"interval":0.9 , "color":"#fee5d9" },{"interval":5.95 , "color":"#fcae91" },{"interval":11.26 , "color":"#fb6a4a" },{"interval":19.77 , "color":"#de2d26" },{"interval":27.86 , "color":"#a50f15" }]}

I've also returned the array of break points so I can use it for my max/min of the classbreaks. 

breaks = [0.9, 3.99, 8.92, 11.98, 16.97, 23.8, 30.02, 64.08];

Note: I couldn't figure how how to specify just a min value and symbol, without a maxValue in between when specifying a new break.  I thought I could put a 'null' in addBreak, but I couldn't figure out how to skip over it.

-------------------------------------------------------------------

var br = new ClassBreaksRenderer(defaultSymbol, findBreakValue); //using a function here instead of a field

var breakData = JSON.parse(jstyle);

var int,nextup, nextInt, col,color, sym;

for (var j in breakData.breaks){

int = breakData.breaks.interval;

nextup = parseInt(j) + 1;

nextInt = classBr[nextup];

    if (!nextInt) {

     nextInt = highestValue;

     }

col = breakData.breaks.color;

color = new Color(col);

sym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, polyOutlineSymbol, col); //polyOutlineSymbol defined earlier as a thin gray line

br.addBreak(int, nextInt, sym);

}

featureLayer.setRenderer(br);

featureLayer.redraw();

var legend = new Legend({

map: map, layerInfos: [{

"layer": featureLayer, "title": "Value" }]

},"legend");

legend.startup();

I get an error: TypeError: b.color.toRgba is not a function during the legend creation.

The map displays correctly, with the classification and colors as defined.  I assume the legend doesn't like the way I formatted the color for my symbology?  There seems to be lots of variations on defining your color, hex, rgb, rgba.

0 Kudos
1 Solution

Accepted Solutions
TracySchloss
Frequent Contributor

Found it!

When specifying the color in my symbology, I was using just the hex value.  I should have been defining a color based on the hex value instead.

      color = new Color(col);
      sym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, polyOutlineSymbol, color);

View solution in original post

0 Kudos
1 Reply
TracySchloss
Frequent Contributor

Found it!

When specifying the color in my symbology, I was using just the hex value.  I should have been defining a color based on the hex value instead.

      color = new Color(col);
      sym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, polyOutlineSymbol, color);
0 Kudos