Driving Route Here Maps

Question

I’m trying to make a route between two points using HereMaps, until then all right, I got it, however, it does not go through the street, but through the whole map.

How I would make him go down the street HereMaps, the example works perfectly.

My code

let platform = new H.service.Platform({
    'app_id': '',
    'app_code': ''
})

let defaultLayers = platform.createDefaultLayers()
let map = new H.Map(
        document.getElementById('map'),
        defaultLayers.normal.map,
        {
            zoom: 15,
            center: {lat: -23.5627, lng: -46.6546}
        }
)

let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

if (this.habCaminho) {
    let routingParameters = {
        mode: 'fastest;truck',
        representation: 'display',
        waypoint0: "geo!23.56277,46.65459",
        waypoint1: "geo!" + marc1
    };

    let onResult = function (result) {
        let route,
                routeShape,
                startPoint,
                endPoint,
                linestring

        if (result.response.route) {
            route = result.response.route[0]
            routeShape = route.shape
            linestring = new H.geo.LineString()

            routeShape.forEach(function (point) {
                let parts = point.split(',')
                linestring.pushLatLngAlt(-parts[0], -parts[1])
            });

            startPoint = route.waypoint[0].mappedPosition
            endPoint = route.waypoint[1].mappedPosition

            let routeLine = new H.map.Polyline(linestring, {
                style: {strokeColor: '#045993', lineWidth: 5},
                arrows: {fillColor: 'white', frequency: 2, width: 0.8, length: 0.7}
            })

            let startMarker = new H.map.Marker({
                lat: -startPoint.latitude,
                lng: -startPoint.longitude
            })

            let endMarker = new H.map.Marker({
                lat: -endPoint.latitude,
                lng: -endPoint.longitude
            })

            map.addObjects([routeLine]);
            map.setViewBounds(routeLine.getBounds(), true);
        }
    }

    let router = platform.getRoutingService();

    router.calculateRoute(routingParameters, onResult,
            (error) => {
        alert(error.message);
    })
}

Answer 1

In the end, I managed to solve my problem, for those who have the same problem, follow the code.

function calculateRouteFromAtoB (platform) {
                    let router = platform.getRoutingService(),
                    routeRequestParams = {
                        mode: 'fastest;truck',
                        representation: 'display',
                        routeattributes : 'waypoints,summary,shape,legs',
                        maneuverattributes: 'direction,action',
                        language: 'pt-br'
                    }

                    for(let i = 0; i < posicoes.length; i++){
                        let name = "waypoint"+i

                        routeRequestParams[name] = posicoes[i].pos
                    }

                    router.calculateRoute(
                        routeRequestParams,
                        onSuccess,
                        onError
                    )   
                }

                function onSuccess(result) {

                    let route = result.response.route[0];


                    addRouteShapeToMap(route)
                    addPins(route)
                    //addInfo(route)
                }

                function onError(error) {
                    alert('Ooops!');
                }

                let defaultLayers = platform.createDefaultLayers()

                let map = new H.Map(mapContainer,
                    defaultLayers.normal.map,{
                    zoom: 13
                })

                let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map))

                let ui = H.ui.UI.createDefault(map, defaultLayers)

                function addRouteShapeToMap(route){
                    let lineString = new H.geo.LineString(),
                    routeShape = route.shape,
                    polyline

                    routeShape.forEach(function(point) {
                        let parts = point.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);
                }

                function addPins(router){
                    for(let i = 0; i < router.waypoint.length; i++){
                        let latitude = router.waypoint[i].mappedPosition.latitude
                        let longitude = router.waypoint[i].mappedPosition.longitude
                        let numero = i + 1

                        let cor = '' 

                        let texto = ''

                        if(numero != router.waypoint.length && numero != 1){
                            texto = numero - 1
                        }else if(numero == 1){
                            texto = 'Inicio'
                        }else{
                            texto = 'Fim'
                        }

                        if(posicoes[i].status == 1){
                            cor = '#3498db'
                        }else if(posicoes[i].status == 2){
                            cor = '#e74c3c'
                        }else{
                            cor = '#f39c12'
                        }

                        let pin = '<svg width="56" height="77" viewBox="0 0 76 107" xmlns="http://www.w3.org/2000/svg">'+
                                        '<path d="M38 106.7c2.4 0 37.7-43 37.8-68.8 0-21-17-38-38-38C17 0 0 17 0 38c.4 27 35.4 68.7 38 68.7z" fill="'+cor+'" />'+
                                        '<ellipse fill="#FFF" cx="38.1" cy="38.1" rx="23.1" ry="23.1" />'+
                                        '<text x="37" y="45" font-size="12pt" font-family="Arial" font-weight="bold" text-anchor="middle">'+texto+'</text>'+
                                   '</svg>' 

                        let bearsIcon = new H.map.Icon(
                            pin),
                        bearsMarker = new H.map.Marker({
                            lat: router.waypoint[i].mappedPosition.latitude,
                            lng: router.waypoint[i].mappedPosition.longitude
                        }, {
                            icon: bearsIcon
                        })

                        let group = new H.map.Group()
                        map.addObject(group)

                        group.addEventListener('tap', evt => {
                            let bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
                                content: evt.target.getData()
                            })

                            ui.addBubble(bubble)
                        }, false)

                        let html = '<div >'+posicoes[i].info+'</div>'

                        bearsMarker.setData(html)
                        group.addObject(bearsMarker)
                    }

                }


                calculateRouteFromAtoB(platform)