Having trouble adding colors to the map

[Jesse-Kerr]

Hi, thank you very much for this library. I am trying to add colors to my web gl. I have prepared an array of colors the same length as the array of points, with in RGB hexadecimal format.

This is the format:

[["#762181"],["#762181"],["#6E1E81"],["#170F3C"],["#170F3C"],["#420F75"],["#661B80"],["#AE347B"],["#420F75"],["#420F75"]]

I save this as map_colors and call it in L.glify.points as below:

L.glify.points({
  map: mymap,
  data: array,
  color: map_colors
});

However, the points do not seem to be changing color, they are all grey. Do I need to provide the colors in a different format? Thank you

[tim-salabim]

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.

[Jesse-Kerr]

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

[tim-salabim]

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

[tim-salabim]

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

[Jesse-Kerr]

Yes, it worked! Thank you so much.

[robertleeplummerjr]

Does the documentation need clarified you guys think?

[robertleeplummerjr]

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

[tim-salabim]

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

[Jesse-Kerr]

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.

[Jesse-Kerr]

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.

[robertleeplummerjr]

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 }

[tim-salabim]

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

[robertleeplummerjr]

it is an object, so... no?

[tim-salabim]

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!

[robertleeplummerjr]

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.

[tim-salabim]

Yes, that is what we are after