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?