JavaScript Maps SDK

Route Modifiers

The Route Modifier layer allows you to indicate on a map roads that are configured for your company as avoids or favors. Avoids are roads that your company has designated should be avoided if at all possible. Favors should be preferred over alternate routes. The add-on provides the ability to show some or all avoids and favors or to hide the layer. Requires Trimble Maps v3.1.0 or later. Learn more about the Route Modifiers add-on.

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

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

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

        <script>
            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const myMap = new TrimbleMaps.Map({
                container: 'map', // container id
                style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
                center: [-74.011934, 40.708016], // starting position
                zoom: 16 // starting zoom
            });
            modifierOptions = {
                isVisible: true,
            };
            const modifiers = new TrimbleMapsControl.RouteModifiers(modifierOptions);

            myMap.addControl(modifiers, 'top-right');

            myMap.once('load', () => {
            console.log(
                'AF SETS from the ControlPanel: ',
                modifiers.getAFSets()
            );
            // Test after load
            });
        </script>
    </body>
</html>
Last updated August 11, 2023.