leaflet highlight part of polyline - leaflet

Question

in leaflet.js i have polyline in openstreet map:
point1(long, lat), 2(long, lat)....pointXY(long,lat)
Is possible (and how) highlight or change color only segment from point 2 to 5, no matter how to invoke.
I try add another polyline, but with more segments its mess with more and more duplicit points.
Working sample:
http://next.plnkr.co/edit/FyUzMG9Y9NrbYrzL
i looking for turn segment between [40,10],[10,10],[10,30] red. If its possible, by index [2,3,4]
thanks for help

Answer 1

You can try GeoJson layer to highlight a line. Just make sure that geojson coordinates are in LngLat format.
var map = L.map('map', {
center: [0, 0],
zoom: 0,
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
}),
],
});
var data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [[30, 10], [45, 45]],
},
properties: {
color: 'green',
},
},
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [[10, 40], [10, 10], [30, 10]],
},
properties: {
color: 'red',
},
},
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [[-45, -45], [10, 40]],
},
properties: {
color: 'black',
},
},
],
};
var geoJsonLayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
if (layer instanceof L.Polyline) {
layer.setStyle({
color: feature.properties.color,
});
}
},
}).addTo(map);
Plunker: http://next.plnkr.co/edit/s4Q72s7RyOLp714U?preview
Ref: https://embed.plnkr.co/plunk/XqzvdR