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


3 Answers 3


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/

  • 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, 2014 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, 2014 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, 2014 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).


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

  • 2
    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, 2018 at 14:56
  • @JoshC, thanks, hope it the understandable description after update if you take an account that image explains a lot Jun 19, 2018 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.