We discussed creating a custom legend with an HTML table, giving you more flexibility with design, placement, and content. A few additional thoughts:
Buckets vs. Gradients
Creating individual cells for colors and values suggests that your map displays data in discrete buckets. If you’re using gradients, you should show the gradient range and not just the minimum and maximum colors. For example, see the following map from a student. The legend lists the darkest and lightest green with their corresponding values. It assumes that readers understand that the intermediate colors are intermediate values.
Now look at the same map and legend with a gradient. The legend is clearer because we see the full range of colors.
Intermediate values could be displayed as well, but they aren’t absolutely necessary. If you have a diverging color gradient, then you would need to put at least three values next to your gradient: the maximum, the mid-point from which the values diverge, and the minimum (+100%, 0, -100% for example).
Creating a CSS gradient
Creating a gradient with code is a little tricky because of cross-browser compatibilities. However, there are a lot of fun CSS gradient creators on the web (just do a Google search for “CSS gradient”). The gradient legend above was created with the following <div> code. It looks like a mess, but it provides gradients for the major browsers. You essentially substitute the start color and end color Hex values.
<div style="width: 30px; height: 75px; background: #999; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0ffd4', endColorstr='#267114'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#e0ffd4), to(#267114)); /* for webkit browsers */ background: -moz-linear-gradient(top, #e0ffd4, #267114); /* for firefox 3.6+ */ "> </div>
Using tables for layout purposes is frowned upon these days, but it’s a quick and simple approach. A better way is to use CSS to position and style a legend. But that will be a post for another day… stay tuned.