Color-code a Leaflet polyline based on additional values, e.g. altitude, speed,

Question

I'd like to draw a GPX-track on a Leaflet map. The polyline shouldn't have only one color, but I'd like to show certain values like altitude, speed, heart-rate, temperature, cadence, slope color-coded. Of course only one value can be visualized at once.

The values would be stored together with L.LatLng, e.g. in a meta: {ele: 298, hr: 155} object.

I'm new to Leaflet and especially concerned about finding an efficient way to do this. The first which came to mind was to create hundreds or thousands of polylines each with a special color. But this sounds very greedy regarding memory and cpu.

Any ideas?

An example what I mean can be viewed here

Answer 1

Convert your GPX track to a GeoJSON with QGIS.

Let's say your GeoJSON looks like this. The GeoJSON has an attribute elevation with the value of the elevation.

        var yourGeoJSON = [ 
{ "type": "Feature", "properties": { "id": 2, "elevation": 50 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.836395263671875, 47.75317468890147 ], [ 11.865234375, 47.73193447949174 ] ] } },
{ "type": "Feature", "properties": { "id": 1, "elevation": 750 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.865234375,47.73193447949174 ], [ 11.881027221679688, 47.700520033704954 ] ] } },
{ "type": "Feature", "properties": { "id": 0, "elevation": 1700 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.881027221679688, 47.700520033704954 ], [ 11.923599243164062, 47.706527200903395 ] ] } },
{ "type": "Feature", "properties": { "id": 0, "elevation": 3000 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.923599243164062, 47.706527200903395 ], [ 11.881027221679688, 47.700520033704954 ], ] } }
];

Add your GeoJSON with the following code to your leaflet map. Use a function to style your file. The "color" element calls the function get color and passes on the elevation value of your feature as a parameter.

L.geoJson(yourGeoJSON, {
    style: function (feature) {
        return {
         "color": getColor(feature.properties.elevation),
         "opacity": 1,
        }}
}).addTo(map);

The function getColor returns the color based on the elevation value.

function getColor(x) {
  return x < 500     ?    '#bd0026':
         x < 1000     ?   '#f03b20':
         x < 1500     ?   '#fd8d3c':
         x < 2000     ?   '#fecc5c':
                          '#ffffb2' ;
};

I made a JSFiddle with the sample GeoJSON and the functions described above: http://jsfiddle.net/2VY5z/1/

Answer 2

I've created a small plugin for Leaflet: Leaflet.MultiOptionsPolyline.

Here is a screenshot from the demo page:

Currently it's lacking documentation, but the demo page links to the source code which should be quite self-explanatory.

Answer 3

A Leaflet plugin for drawing colored gradients along polylines. https://github.com/iosphere/Leaflet.hotline/