JavaScript Maps SDK

Route Options

There are a variety of options available to customize the route. Please see the API documentation for descriptions of any of the options used in this example. Change the options and click on Update Map to see how your changes impact the route. Requires Trimble Maps v3.2.0 or later. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.js"></script>
        <style>
            body { margin: 0; padding: 0; }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }

            .map-panel {
                position: absolute;
                width: 225px;
                top: 10px;
                left: 10px;
                padding: 10px;
                background-color: #fff;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                font-family: 'Open Sans', sans-serif;
                font-size: .85em;
            }

            .group {
                padding: 3px 0;
            }

            .group .label {
                display: inline-block;
                width: 70px;
                font-style: italic;
                color: #888;
            }

            .group .value {
                display: inline-block;
            }

        </style>
    </head>
    <body>
        <div id="map"></div>

        <script>
            // Add one draggable route. This route has overlapping route legs.
            // When the route is altered by dragging, mouse down location could be on one or more route legs.
            // Instead of letting the API handles the stop insertion, user utilizes a custom event listener to insert the stop on a selected leg.
            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const map = new TrimbleMaps.Map({
                container: 'map',
                style: TrimbleMaps.Common.Style.TRANSPORTATION,
                center: new TrimbleMaps.LngLat(-74.566234, 40.49944),
                zoom: 8
            });
            const routeId = 'myRoute';
            const myRouteElem = document.getElementById('myRoute');
            const myRoute = new TrimbleMaps.Route({
                routeId: routeId,
                isDraggable: true,
                stops: [
                    new TrimbleMaps.LngLat(-76.217752, 43.106542),
                    new TrimbleMaps.LngLat(-74.629749, 40.261181),
                ],
                showArrows: true,
                tollRoads: TrimbleMaps.Common.TollRoadsType.AVOID_IF_POSSIBLE,
                tunnelCategories: [TrimbleMaps.Common.TunnelCategory.E, TrimbleMaps.Common.TunnelCategory.DE],
                trkLCV: true,
                elevLimit: 2500,
                hosEnabled: true,
                hosRemDriveTimeUntilBreak: 1000,
                hosRemDriveTime: 2000,
                hosRemOnDutyTime: 3000,
                hosRuleType: TrimbleMaps.Common.HoSScheduleType.US_FED_708_LH,
                hosRemCycleDutyTime: 4000,
                sideOfStreetAdherence: TrimbleMaps.Common.SideOfStreetAdherenceLevel.MINIMAL,
                governorSpeedLimit: 55,
                refrigerated: true,
                fuelType: TrimbleMaps.Common.FuelType.DIESEL,
                fuelConsumption: 50,
                avoidState: ['CT', 'PA'],
                avoidCountry: ['CA', 'MX'],
                favorState: ['OH', 'TN'],
                favorCountry: ['US'],
                useCrossStreetTurnAvoidance: false,
                tollPlan: 'EZPass',
                custRdSpeeds: false,
                reportType: [
                    TrimbleMaps.Common.ReportType.MILEAGE,
                    TrimbleMaps.Common.ReportType.DETAIL
                ],
                requestMethod: TrimbleMaps.Common.RequestMethod.POST
            });
            myRoute.on('stopInserting', function (e) {
                myRouteElem.innerHTML = `Mouse down on ${e.routeLegPositions.length} route leg(s)`;
                myRoute.getRouteWithNewStop(e.newStop, e.routeLegPositions[e.routeLegPositions.length - 1]);
            });
            map.on('load', function() {
                myRoute.addTo(map);
            });
        </script>
    </body>
</html>
Last updated June 15, 2023.