Leaflet.MultiOptionsPolyline Demo
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.
Altitude
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
Heartrate
This is easy. The value in `latLng.meta.hr` 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
Speed
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 