JavaScript Maps SDK

Route Styling

When a routing layer is constructed, the default route color, origin, destination, and stop icons will be used when routeColor, originIcon, destinationIcon, stopIcon route options are not provided. To change these default route properties, either supply custom a color and icons when constructing a layer or use the update function after a layer is created. Requires Trimble Maps v3.1.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.20.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.js"></script>
        <style>
            body { margin: 0; padding: 0; }

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

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

        <script>
            // Create a route with custom color, origin icon, destination icon, and stop icon.
            // Update a route with custom color and icons after a layer is created.
            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 routeOptions = {
                routeId: 'myRoute',
                stops: [
                    new TrimbleMaps.LngLat(-74.566234, 40.49944),
                    new TrimbleMaps.LngLat(-74.528512, 40.386680),
                    new TrimbleMaps.LngLat(-74.629749, 40.26118)
                ],
                routeColor: '#888888', // optional routeColor
                originIcon: { // optional origin Icon
                    size: 1,
                    url: 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png',
                    offset: [0, -6]
                },
                stopIcon: { // optional stop icon
                    size: 1,
                    url: 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png',
                    offset: [0, -6]
                }
            };
            const myRoute = new TrimbleMaps.Route(routeOptions);
            map.on('load', function() {
                myRoute.addTo(map);
                setTimeout(function() {
                    routeOptions.routeColor = '#00ff00'; // update route color
                    routeOptions.destinationIcon = { // update destination icon
                        size: 1,
                        url: 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png',
                        offset: [0, -6]
                    };
                    myRoute.update(routeOptions);
                }, 8000);
            });
        </script>
    </body>
</html>
Last updated June 15, 2023.