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 hereMyTourbook screenshot


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,

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/

| improve this answer | |
  • 1
    Thank you, that's a possible solution. I fiddled a bit jsfiddle.net/2VY5z/3 and observed that internally there will a layer created for every feature. In case of long GPX tracks, I suppose this can get quite overwhelming. Therefor I'll wait a few hours for an even better answer until you get the "correct" mark. – hgoebl Mar 19 '14 at 16:26
  • 1
    I'm agree with @hgoebl, to segmentize one source feature into a thousand of small chunks seems is not good in performance sence. I think we need a special class, derived from L.Path with above mentioned functionality. Maybe someone made it already? ;) – unibasil Mar 21 '14 at 0:04
  • I'm currently developing a Layer plugin which is a bit more efficient. But I'm afraid I have to create at least the number of <path> elements as often as the color switches. Sadly there is no way to change color in a path: M184 398L187 395C#00FF00 L183 399 would be necessary for that (C = color). – hgoebl Mar 21 '14 at 6:44

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

Here is a screenshot from the demo page:

example from demo-page

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

Your feedback is welcome (create an issue on GitHub or comment this answer if you don't have a GitHub account).

| improve this answer | |

Looks as this is the old thread, but hopefully, someone finds this helpful.

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

| improve this answer | |
  • 1
    It does appear to be helpful, but as a general rule, an answer should contain more than just a link. Even if all you do is give a summary of what's on the other side of the link, another user should be able to understand what this solution is and why it adequately addresses the original question, without said user having to leave this page. – JoshC Jun 18 '18 at 14:56
  • @JoshC, thanks, hope it the understandable description after update if you take an account that image explains a lot – Dzmitry Atkayey Jun 19 '18 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.