You need to provide a function to color the points.

Here I use clrs = function(index, point) { return cols[index]; }; to color points.

Also, I think you need to provide colors in RGB notation. i.e. [[0.1,0.4,0.8],[0.5,0.8,0],[...]] but I may be wrong. In any case, I couldn't get the hexadecimal notation to work.

Hi Tim,

Thank you for the help. I converted my hexadecimal colors into RGB format and divided by 255, so they look like so:

var color_min = 
[[0.462745098039216,0.129411764705882,0.505882352941176],
[0.431372549019608,0.117647058823529,0.505882352941176],
[0.0901960784313725,0.0588235294117647,0.235294117647059]]; 

The data points I have look like this:

var arr_min =
[[0.462745098039216,0.129411764705882,0.505882352941176],
[0.462745098039216,0.129411764705882,0.505882352941176],
[0.431372549019608,0.117647058823529,0.505882352941176]]

Then I followed your example on the link you provided, and now have this:

var clrs;
if (color_min.length === 1) {
	clrs = color_min[0];
} else {
	clrs = function(index, point) { return color_min[index]; };

}

L.glify.points({
  map: mymap,
  data: arr_min,
  color: clrs
});

However, my points are still all coming out grey.

Thank you again,
Jesse

Are you using the latest version? The index based coloring was only introduced recently.

Also, I think your color array should be an object and look like this:

[{"r":0.26666666666666669,"g":0.00392156862745098,"b":0.32941176470588237},{"r":0.9921568627450981,"g":0.9058823529411765,"b":0.1450980392156863}]

At least that's what works for me

Yes, it worked! Thank you so much.

Does the documentation need clarified you guys think?

Also, if hexadecimal is of value, we could easily put in a translator.

A translator would be great! It would save space for large amounts of data/colors.

I certainly think that it could be clearer, but I am a total Javascript newbie (about 1.5 months of experience thus far), so that could also explain my troubles. I mainly used the readme.md and the index.html to attempt to solve the problem without success.

I've started working on some introductory information for the readme, and I could include info on how to add colors.

Maybe we could display this part of the points.js file in the readme?

if (colorFn) {
    colorFn(i, latLng);
}

I think it clarifies better what happens when you supply a function to color.

We could also say that if you do supply a function to color, it needs to return a Javascript object of the same length of the data, in the format that Tim specified above, as argument i. If we add in a hexadecimal converter we could specify that later as well.

So a helper function like:

function hexToRgb(hex) {
    if (hex[0] === '#') hex = hex.substring(1, 7);
    return {
        r: parseInt(hex[0] + hex[1], 16),
        g: parseInt(hex[2] + hex[3], 16),
        b: parseInt(hex[4] + hex[5], 16)
    };
}
hexToRgb('#509cd6'); // -> Object { r: 80, g: 156, b: 214 }

Yes, that looks right! Do we need the spaces in { r: 80, g: 156, b: 214 }?

it is an object, so... no?

Then I would vote for dropping them. It may sound ridiculous, but when data grows to 10-20m points, I think those spaces will matter.
Thanks for the effort!

Lets think in terms of what is practical. I'm being too verbose on what would change internally. So supplying something like: ["#762181","#762181","#6E1E81","#170F3C","#170F3C","#420F75","#661B80","#AE347B","#420F75","#420F75"] is what we're after? This would give us a 1 to 1 of points given to leaflet.glify.

Yes, that is what we are after