Use more than one 'options' definition depending on your data!

Here you can see some examples of color-coded polylines. For a description how to use this little Leaflet-Plugin, please go to the Github page of this project.


Takes the (optional) `alt` property from LatLng and selects a color (blue, green, yellow, orange, red) depending on altitude (meters above sea level).

View Source

Incline (Clustered)

This example is the most complex of all. It splits all LatLngs into about 60 groups (slots). The option-index is calculated for the whole group and then stored in the function context. LatLngs from the same group can take this cached option-index, so we can save CPU.

Background: the incline is often measured in meter/hour and is a measurement how fast you climb on mountains. For MTB a value of 600-900 m/h is quite ambitious.

View Source


This is easy. The value in `` is the current heartrate in beats per minute.
During a workout, in this case mountaineering, the heartrate can get to its limit.
This graphic shows the color-coded heartrate from <100 (dark blue), over the target zone (between 120 and 150 bpm, shades of green) and above in yellow, orange and red (above 165 beats per minute).

View Source

Tri-colored dashed line

This example changes color every 3 LatLng points (only 3 different colors).
A much more involved task would be to change color after a particular distance.

View Source


Here you have a ride by car of a guy who seems to drive too fast sometimes (a personally don't know him/her).
Speed is color-coded from shades of blue (<= 40 km/h), shades of green (> 40 km/h until 55 km/h) and above it's getting yellow, orange and red.
Speed is calculated by `LatLng.distanceTo()` and `latLng.meta.time`.

View Source

Tiles Courtesy of MapQuest