Individual colouring for PolyLine legs

Question

HERE!

There is a query regarding a feature we need to implement, which is of passing multiple colors to the waypoint 0 to 1 on the polyline but we got stuck over H.geo.Polyline, only one style can be applied:

polyline = new H.map.Polyline(lineString, { style: { lineWidth: 4, strokeColor: 'red' } }); 

is there any way that we could implement the same with the core-map js v3.1

Providing a sample fiddle where array with color is defined

http://jsfiddle.net/n3e7ohwg/88/

Answer 1

Each SpatialStyle object can have only one color, therefore it is not possible to pass multiple colors to one style.

What you could do is to create new Polyline with different style for each leg.

This code should work for you:

var matrix = [
    [new H.geo.Point(41.759876, 12.942710), 'red'],
    [new H.geo.Point(41.768711, 12.947602), 'orange'],
    [new H.geo.Point(41.772936, 12.956271), 'yellow'],
    [new H.geo.Point(41.773704, 12.964082), 'green'],
    [new H.geo.Point(41.770824, 12.975497), 'blue'],
    [new H.geo.Point(41.764230, 12.980647), 'indigo'],
    [new H.geo.Point(41.758596, 12.982965), 'violet']
  ],
  style = new H.map.SpatialStyle({
    lineWidth: 4,
    lineCap: 'butt'
  }),
  routeShape = route.shape,
  polyline,
  group = new H.map.Group();

  for (var i = 0; i < matrix.length - 1; i++) {
    var lineString = new H.geo.LineString();
    lineString.pushPoint(matrix[i][0]);
    lineString.pushPoint(matrix[i + 1][0]);
    polyline = new H.map.Polyline(lineString, {
      style: style.getCopy({strokeColor: matrix[i][1]})
    });
        group.addObject(polyline);
  }

    // Add the polyline to the map
  map.addObject(group);

or just check this jsfiddle: http://jsfiddle.net/ampvqwdg/8/