Search code examples
gradienthere-apipolyline

How can I draw the gradient Polyline with points in Here Map Angular Project?


I am building a website using Angular with Here Map. I am using Here Map Api I tried to draw a gradient line with Polyline but it is not working and I can't know how I can do it.

Here is my code.

                        const points = response.points;
                        if (points && points.length > 0) {
                            this.points = [];
                            points.forEach((point: any) => {
                                this.points.push(point.lat, point.lng, 0);
                            });
                            
                            this.lineString = new H.geo.LineString(this.points);
                            // make the route gradient color
                            const temp = new H.map.Polyline(
                                this.lineString,
                                {
                                    style: {
                                        strokeColor: 'rgb(255, 248, 45)',
                                        lineWidth: 10,
                                    },
                                }
                            );
                            console.log("routeLine====", temp)
                            this.map.addObject(temp);
                        }

This shows me yellow line. but I want to draw gradient line (yellow and red color) like google map.

Please help me. Thanks.

I tried to draw a gradient line with Polyline but it is not working and I can't know how I can do it.


Solution

  • At the moment Here Map Api does not support for gradient polylines. It currently supports only solid colors for route and their outlines

    https://developer.here.com/documentation/maps/3.1.39.0/api_reference/H.map.Polyline.html#.Options