CODEWITHSUNDEEP
here-api
Artem Danilov
Artem Danilov

Reputation: 35

Drawing multiple polyline with different color using HERE API

I want to draw polyline on roads and based on specific road speedLimit show the polyline in different color, something like this:

https://www.screencast.com/t/SQrjoc78P0uN

Is it possible to achieve this whit HERE map API? 

var lineString = new H.geo.LineString();

        routeShape.forEach(function(point) {
            var parts = point[0].split(',');

            lineString.pushLatLngAlt(parts[0], parts[1]);

        });

        polyline = new H.map.Polyline(lineString, {
            style: {
                lineWidth: 4,
                strokeColor: 'rgba(0, 128, 255, 0.7)'
            }
        });

        map.addObject(polyline);
        map.setViewBounds(polyline.getBounds(), true);

Upvotes: 1

Views: 3047

Answers (2)

DevBab
DevBab

Reputation: 879

Use routeattributes: "shape" for your routing request, and you may get each segment and associated speed limit as below:

       let route = res.body.response.route[0];
        let legs = route.leg;
        let links = [];
        legs.forEach(leg => {
            Object.assign(links, leg.link);
        });
        console.log("#links", links.length);

        links.forEach(link => {
            let sl = link.speedLimit; // in m/sec
            let shape = link.shape; // shape to draw

            let style = {
                lineWidth: 4,
                strokeColor: "yellow"
            };
            if (sl < 50 * 1000 / 3600)
                style.strokeColor = "red";
            else if (sl < 90 * 1000 / 3600)
                style.strokeColor = "orange";
            else
                style.strokeColor = "green";

            let line = new H.geo.LineString();
            shape.forEach(latlng => {
                let coord = latlng.split(",");
                line.pushLatLngAlt(coord[0], coord[1]);
            });

            let polyline = new H.map.Polyline(line, {
                style: style
            });

            /* group created previously as
               group = new H.map.Group();
               map.addObject(group);
            */
            group.addObject(polyline);

        });

just draw each shape independantly, according to your own style depending on speed limit. enter image description here

Upvotes: 1

user3505695
user3505695

Reputation:

Your question poses two kind of interpretations. I shall try answering both so that you can pick your intend. Hope it helps!

  1. How to draw a route with different color segments - H.geo.LineString is used to achieve this. Refer https://developer.here.com/documentation/maps/topics_api/h-geo-linestring.html#h-geo-linestring. You can also read this article(https://developer.here.com/blog/who-wants-ice-cream-a-here-maps-api-for-javascript-tutorial-part-4-advanced-routing) where they try to achieve the same using H.geo.Strip (which has been deprecated and replaced by H.geo.LineString).

  2. How to get speed limits of each link in a route - Using routing api as given in the below example. Check the answer in How to get SpeedLimit in HERE API

    https://route.cit.api.here.com/routing/7.2/calculateroute.json?jsonAttributes=1&waypoint0=51.31854,9.51183&waypoint1=50.11208,8.68342&departure=2019-01-18T10:33:00&routeattributes=sh,lg&legattributes=li&linkattributes=nl,fc&mode=fastest;car;traffic:enabled&app_code=xxx&app_id=xxx

Upvotes: 1

Related Questions