Color code page list

Im working in an interactive map of the US and i need to color code the list states with one or more “traffic lights”. Some of them fall into more then one grouping. Each state has its own page which is a child of the map page.

I have them set up in the controller like this to group the states into 5 arrays:

$states = $pages->find('map')->children()->visible();
// Green
$greenstates  = $states->filterBy('stateid', 'in', ['CA', 'CT', 'DC', 'DE', 'ME', 'NH', 'NJ', 'NV', 'RI', 'VT', 'WA']);
// Light Green
$lgreenstates = $states->filterBy('stateid', 'in', ['AL', 'AK', 'AR', 'CO', 'FL', 'GA', 'HI', 'IL', 'KS', 'KY', 'MA', 'MD', 'MN', 'MO', 'MT', 'NC', 'ND', 'NM', 'OH', 'OK', 'OR', 'PA', 'SC', 'SD', 'TX', 'UT', 'WI', 'WV']);
// Yellow
$yellowstates = $states->filterBy('stateid', 'in', ['AK', 'IA', 'ID', 'MS', 'MT', 'NE', 'TN', 'VA', 'WY']);
// Amber
$amberstates  = $states->filterBy('stateid', 'in', ['AZ', 'IN']);
// Red
$redstates    = $states->filterBy('stateid', 'in', ['LA', 'MI', 'NY']);

When i loop through all the states and list them out in my template, i want to generate span for each color the state falls into (its at least one, might be two for some).

Then end result should be this:

<ul class="list-of-states">
  ...
  <li data-state="AK">
  <a href="/map/arkansas">Arkansas</a>
    <span class="greenstate">Green State</span>
    <span class="lgreenstate">Light Green State</span>
  </li>
  ...
</ul>

How can i do this simply?

Why don’t you assign the colors to the state pages?

I could i guess but i was trying to avoid changing 50+ pages.

Well, to me it seems easier to update those pages once–programmatically, of course–instead of applying some kind of complicated logic every time.

How would I add the color to the articles programmatically?

Well, with your current setup by taking each array of states and loop through each array and update the page with that color. I think I would’ve built my array of states differently right from the beginning… But that’s not really a Kirby but a logic thing.

I asked because I have never done it programmatically - i know the gist, but i don’t the code to do it, or where to do it.

I created the pages with your CSV handler in the first place, and i just tried updating the pages by adding the colors to the CSV but the plugin keeps telling me the "index does not exist’. Something to do with the PageUID but i’ve checked and it does exist.

$colorsAndStates = [
  'green' => ['CA', 'CT', 'DC', 'DE', 'ME', 'NH', 'NJ', 'NV', 'RI', 'VT', 'WA'],
  'lightgreen' => ['AL', 'AK', 'AR', 'CO', 'FL', 'GA', 'HI', 'IL', 'KS', 'KY', 'MA', 'MD', 'MN', 'MO', 'MT', 'NC', 'ND', 'NM', 'OH', 'OK', 'OR', 'PA', 'SC', 'SD', 'TX', 'UT', 'WI', 'WV'],
  'yellow' => ['AK', 'IA', 'ID', 'MS', 'MT', 'NE', 'TN', 'VA', 'WY'],
  'amber' => ['AZ', 'IN'],
  'red' => ['LA', 'MI', 'NY']
];

$states = [];
foreach($colorsAndStates as $color => $stateIds) {
  foreach($stateIds as $state) {
    if(isset($states[$state])) {
      $states[$state][] = $color;
    } else {
      $states[$state] = [$color];
    }
  }
}
foreach(page('maps')->children() as $state) {
  $id = $state->stateid()->value();
  if(isset($states[$id])) {
    try {
      $state->update([
        'colors' => implode(',', $states[$id])
      ]);
    } catch (Exception $e) {
      echo 'page could not be updated';
    }

  }

}