Color Gradient Lines: Begin with the End in Mind

I’ve been looking into what it would take to draw map lines with color gradients, like the red/blue line to the left. My assumption was that this would require generating raster map tiles (something I know little about), but this week Tom MacWrite pointed out the demo that he wrote for MapBox. That, in turn, led me to look for Leaflet plugins that support gradient colors.

The first one I found is Leaflet.MultiOptionsPolyline.  The screen shot below is from its demo page. It looks interesting, but it’s not quite the smooth gradient effect I was after.

A more promising Leaflet plugin I found is Leaflet.hotline, by iosSphere of Cologne, Germany. Below is a screen shot from its demo page — much closer to the effect that I was looking for. Leaflet Hotline was inspired by the Leaflet.heat plugin. That makes sense to me now since heat maps also have smooth color gradients.

Clearly, a polyline drawn with a color gradient is possible with Leaflet, so now let’s step back and begin with the end in mind.


My objective is to convey information, like heart rate or pace, on top of the race path recorded by a GPS device. I’ll use pace for my demo. The map should show the runner where her pace was faster, and where it was slower.

The race path on the map should support interaction with other components on the page. For instance, it may not be enough to see speed alone. It would be nice to hover over the line on the map and see the corresponding point on an elevation chart. A slowdown may be the result of a steep incline.


The gradient colors need to convey additional information about the runner’s race without being distracting. The colors should not make the map harder to read, for example, blending into the background.  The Leaflet Hotline example used black outlines to solve that problem. Also, the colors should take color blindness into consideration.

Below is an example of line colors Google chose for the Bart Transit map. How do those work for red/green, or blue/yellow color blindness? Perhaps those shades are okay?

Awhile back I found an article, How The Rainbow Color Map Misleads, that explains why not to use rainbow colors. For more information see Rainbow Color Map (Still) Considered Harmful (Full discloser, I didn’t pay to download this report). There is a handy tool to help find alternative colors for your map called ColorBrewer. Another tool for picking gradient colors generally is uiGradients.

I stumbled upon this set of color-blind safe colors on Paul Tol’s website. The shades of blue and green from Paul Tol’s site are somewhat similar to the colors from Google’s Bart transit map above. I’ll try to incorporate some of these colors into my soon-to-come demo.


Color-blind Safe Palette from Paul Tol

Stay tuned for a demo at


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s