Combining my gfx shapes with checkboxes for a menu

[TracySchloss]

I found some code on github that lets you specify the number of classifications, color and type to create thematic maps.  It included a set of color ramps already written up from colorbrewer, so I didn't have to dig it out.

There is no GUI on this set of functions that calculate the classifications. One thing I'd like to do, since I have all these great colors already, is create graphics from the color ramps and let that be what the user clicks on.  Unfortunately I don't see that I can add that kind of click event on a shape.  There are click events, but I don't see how I can pass the color name as an argument, anyway.

The next thing would be to add a checkbox next to the ramps.  This is where I'm getting stuck.  Since I'm dealing with gfx, I'm not sure where to add checkboxes next to each graphic.  Mostly it's Friday afternoon and I'm getting tired.

I created a fiddle for this.  For some reason it is only flashing the colors instead of leaving the color graphics on the screen.  If someone is available to help me out on this, I think it would be a nice way of offering color choices, rather than presenting either a list of color names, or the generic color palette.

http://jsfiddle.net/8bx4vdv2/

I think I'm getting stuck on the fiddle because I'm attempting to only paste part of the colors I have available and I made a syntax error somewhere.

[TracySchloss · Accepted solution]

I ended up creating several images from my gfx that I had created and using those within a filteringSelect. It's not exactly what I had in mind, but it does give the user a color ramp to choose from.  The only thing I don't like about this is that even though my image shows up in the dropdown, the display within the filteringSelect box is still just my value.  I see that I can specify labelAttr and labelType.  Maybe I could be using something else for my value?

function populateColorBox (){

     colorStore = new Memory({data: [      

        {id: 1, value:"Greens", label:"<img src='./images/arrayGreen.png' />"},

        {id: 2, value:"Reds", label:"<img src='./images/arrayRed.png' alt='red' />"},

        {id: 3, value:"Blues", label:"<img src='./images/arrayBlue.png' alt='blue' />"},

        {id: 4, value:"Oranges", label:"<img src='./images/arrayOrange.png' alt='orange' />"},

        {id: 5, value:"Grays", label:"<img src='./images/arrayGray.png' alt='gray' />"},

        {id: 6, value:"Purples", label:"<img src='./images/arrayPurple.png' alt='purple' />"}

        ]

       });

   var colorSelect2 = new FilteringSelect({

         id: "colorSelect2",

         value: 1,

         store: colorStore,

         searchAttr: "value",

       //  name: "xyz",

         labelAttr: "label",

         labelType: "html"

   }, dom.byId("colorDiv"));

   colorSelect2.startup();

}