"Repeating" an array of colors multiple times based on another array

Question

I'm building an application wherein the user can select a dataset which will then be shown in a Leaflet map. To distinguish between the markers, each marker will be given a color, based on a variable. The data has a matching legend.

For now, I just use a small dataset for testing and building, but I want my application to be able to work with larger datasets as well.

I set up a basic array with a couple of static colors, which is fine for a small dataset. However when I add a larger dataset, the colors "run out" of course, as you can see below. I increased the amount of colors in the right legend to show what I would like to see happen.

What I would like to have, is way to effectively "repeat" arrayKleur if arrayMetKetens is bigger then the array of colors.

arrayMetKetens is an dynamic array, filled with unique values and changes depending on what dataset is selected.

Array for colors:

arrayKleur = ["#b15928", "#6a3d9a", "#ff7f00", "#e31a1c", "#33a02c", "#1f78b4", "#a6cee3", "#b2df8a", "#fb9a99", "#fdbf6f"];

Generate legend code:

function legenda(){
    var HTMLlegenda = '<h4>Legenda</h4>';

    // if arrayMetKetens is empty => default legenda text 
    if (arrayMetKetens.length == 0 ){
        HTMLlegenda += '<p>Selecteer een tabel in de "Advanced selection" tab om de legenda weer te geven</p>'

        $("#tab1").html(HTMLlegenda);
    }
    // if arrayMetKetens is filled => generate legenda
    else{

        $("#tab1").html(arrayMetKetens);

        // stuk code om van bovenstaande data een HTML tabel te maken
        for(ii = 0; ii < arrayMetKetens.length; ii++){

            HTMLlegenda += '<i id="background" style="background:'+arrayKleur[ii]+'">&nbsp;&nbsp;&nbsp;&nbsp;</i>'+arrayMetKetens[ii]+'</br>'
        }
        $("#tab1").html(HTMLlegenda);
    }
}

getColor function:

function getArray(){
    var ketens = [];

    for(i=0;i < geojson_dataTable.features.length;i++){
       ketens = ketens.concat(geojson_dataTable.features[i].properties[featureVoorSorteer])
    }
    window.arrayMetKetens = jQuery.unique( ketens );
}

function getColor(keten) {
    var i = window.arrayMetKetens.indexOf(keten);
    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
}

If you want to just "repeat" when you run out then to find your color you can take the index of your item and modulo it with the length of color array then use that as the index into your color array. var color = colors[ itemindex % colors.length ] — JonSG
– JonSG, Commented Jun 29, 2016 at 18:04

Dan Prince · Accepted Answer · 2016-06-29 18:07:15Z

5

In the general case, you want to use an array with length x, to define an array with length y. You can use modulo division to cycle over the indexes for the original array.

function repeatFor(arr, size) {
  var newArr = new Array(size);

  for(var i = 0; i < size; i++) {
    newArr[i] = arr[i % i.length];
  }

  return newArr;
}

Then use this to create a new array defined in terms of your existing array of colors.

var kleurs = ["#b15928", "#6a3d9a", "#ff7f00", "#e31a1c", "#33a02c", "#1f78b4", "#a6cee3", "#b2df8a", "#fb9a99", "#fdbf6f"];

var arrayKleur = repeatFor(kleurs, arrayMetKetens.length);

answered Jun 29, 2016 at 18:07

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

"Repeating" an array of colors multiple times based on another array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related