tmMapLegend Demo

Red States and Blue States, USA

  •   States carried by the Republicans in all four elections
  •   States carried by the Democrats in all four elections
  •   States carried by the Republicans in three of the four elections
  •   States carried by the Democrats in three of the four elections
  •   States carried by each party twice in the four elections

Note—The interpolated colors on the map and the legend are not an exact match. I'm not sure if this is because of the map PNG's color profile or Google using a different algorithm.

Generating the map chart is beyond the scope of this demo, but you can read about it here. The legend was produced using the following code:

<?php
include_once('tmMapLegend.php');
$legend = new tmMapLegend('simple");
?>

Include the class and create a new tmMapLegend object with the simple data encoding.

<p><img src="http://chart.apis.google.com/chart?chs=350x200&cht=t&chtm=usa&chco=ffffff,0000ff,cccccc,ff0000&chld=ALAKAZARCACOCTDEFLGAHIIDILINIAKSKYLAMEMDMAMIMNMSMOMTNENVNHNJNMNYNCNDOHOKORPARISCSDTNTXUTVTVAWAWVWIWY&chd=s:99teAtAAttA9A9O9eeAAAAA9et9eOAOA99e9AAA99e99A9AeA9" alt="Red States and Blue States, USA" title="Red States and Blue States, USA" /></p>
<ul class="maplegend">
<li><span style="background-color:#<?php echo $legend->getColor('9', '0000ff', 'ccc', 'ff0000'); ?>"> </span> States carried by the Republicans in all four elections</li>
<li><span style="background-color:#<?php echo $legend->getColor('A', '0000ff', 'ccc', 'ff0000'); ?>"> </span> States carried by the Democrats in all four elections</li>
<li><span style="background-color:#<?php echo $legend->getColor('t', '0000ff', 'ccc', 'ff0000'); ?>"> </span> States carried by the Republicans in three of the four elections</li>
<li><span style="background-color:#<?php echo $legend->getColor('O', '0000ff', 'ccc', 'ff0000'); ?>"> </span> States carried by the Democrats in three of the four elections</li>
<li><span style="background-color:#<?php echo $legend->getColor('e', '0000ff', 'ccc', 'ff0000'); ?>"> </span> States carried by each party twice in the four elections</li>
</ul>

Add the map chart to the page using the Google Charts API. Create a legend using a ul element. Set the background color of the span elements using the getColor method the tmMapLegend object.

Two-color ramp, text encoding

ffffff
ffbfbf
ff7f7f
fe3f3f
ff0000

<php
$legend = new tmMapLegend();
echo '<div style="background-color:#' . $legend->getColor('25.0', 'FFFFFF', 'FF0000') . '><div>';
?>

Two-color ramp, simple encoding

ffffff
ffc0c0
fe8181
fe4242
ff0000

Last update—2 April 2008

tmMapLegend | Documentation »

Want to work with us yet? We’re ready when you are.