Trimble Maps Routing and SetCenter/Zoom not working

Question

I'm trying to build a route with an origin, destination, multiple stops, along with a current location in a react component. The only part that would actually show the practical route would be all stops before the current location, so previously visited stops. I am building that route like this (the route array being used here contains the list of all locations we want to have a marker for but not necessarily be plotted in the TrimbleRoute):

           const theRoute = new TrimbleMaps.Route({
                routeId: 'myRoute',
                vehicleType: TrimbleMaps.Common.VehicleType.TRUCK,
                stops: route
                    .slice(0, currentLocationIndex + 1)
                    .map((address) => new TrimbleMaps.LngLat(address.lng, address.lat)),
                routeType: TrimbleMaps.Common.RouteType.PRACTICAL,
                routeColor: '#264259',
            }).addTo(currentMap.current);

I want to center the map and zoom in on the current location but this is not working. I am currently trying to do this in the route event of the TrimbleRoute:

            theRoute.on('route', function () {
                currentMap.current.setZoom(5);
                currentMap.current.setCenter(currentLatLong);
                currentMap.current.fitBounds(mapBounds, {
                    padding: 50,
                });
                console.log('route complete');
            });

Any idea as to why the center and zoom are not working?

Answer 1

According to the documentation you could try frameRoute() function

var route = new TrimbleMaps.Route({
    routeId: 'myRoute',
    stops: [
        new TrimbleMaps.LngLat(-74.566234, 40.499440),
        new TrimbleMaps.LngLat(-74.629749, 40.261187)
    ],
    routeType: TrimbleMaps.Common.RouteType.SHORTEST
}).frameRoute();