CODEWITHSUNDEEP
javascriptmapsgisleaflet
TBieniek
TBieniek

Reputation: 4937

Are multicolor polylines possible with leaflet

I have a list of LatLng including some additional data (e.g. altitude/elevation) and I would like to display them with leaflet as a Polyline. Instead of a single colored line I would like to have the line colored according to that additional data though.

Is that possible with leaflet at all? Do plugins exist for something like that?

Upvotes: 4

Views: 6154

Answers (2)

Pavol Magic
Pavol Magic

Reputation: 108

There are several plugins to do this. For example this one: https://github.com/hgoebl/Leaflet.MultiOptionsPolyline

Upvotes: 2

Marko Letic
Marko Letic

Reputation: 2550

You can do something like this:

var states = [{
"type": "Feature",
"properties": {"altitude": "high"},
"geometry": {
    "type": "Polygon",
    "coordinates": [[
        [-104.05, 48.99],
        [-97.22,  48.98],
        [-96.58,  45.94],
        [-104.03, 45.94],
        [-104.05, 48.99]
    ]]
}
}, {
"type": "Feature",
"properties": {"altitude": "low"},
"geometry": {
    "type": "Polygon",
    "coordinates": [[
        [-109.05, 41.00],
        [-102.06, 40.99],
        [-102.03, 36.99],
        [-109.04, 36.99],
        [-109.05, 41.00]
    ]]
}
}];
L.geoJson(states, {
style: function(feature) {
    switch (feature.properties.altitude) {
        case 'high': return {color: "#ff0000"};
        case 'low':   return {color: "#0000ff"};
    }
}
}).addTo(map);

See this for more information.

Upvotes: 0

Related Questions