JavaScript Maps SDK

Route Stops Customization

If more control over route stops styling is desired, instead of using the update function, construct a route with showStops set to false, then add custom stops icons using the addStopIcon function and style them with the styleStopIcons function. 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/v4/trimblemaps-4.2.2.css" />
        <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.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>
            // Add a route to map.
            TrimbleMaps.setAPIKey('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 showDefaultStops = false; // If false, custom stop icons can be used, if other values, default icons and styles are used.
            const myRoute = new TrimbleMaps.Route({
                routeId: 'myRoute',
                stops: [
                    new TrimbleMaps.LngLat(-74.566234, 40.49944),
                    new TrimbleMaps.LngLat(-74.528512, 40.386680),
                    new TrimbleMaps.LngLat(-74.629749, 40.26118)
                ],
                showStops: showDefaultStops
            });

            map.on('load', function() {
                myRoute.addTo(map);
                if (!showDefaultStops) {
                    // add custom stop icons.
                    myRoute.addStopIcon('start', 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png');
                    myRoute.addStopIcon('end', 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png');
                    myRoute.addStopIcon('stop', 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png');
                    // style custom stop icons. For detailed information, visit https://developer.trimblemaps.com/maps-sdk/style-spec/layers/#symbol
                    const stopLayerStyle = {
                        layout: {
                            'icon-size': [
                                'case',
                                ['==', ['get', 'stopType'], 'start'], 1, // stopType is an internal property, it has start, end, and stop values for now.
                                ['==', ['get', 'stopType'], 'end'], 1,
                                1 // stops
                            ],
                            'icon-offset': [0, -10]
                        }
                    };
                    myRoute.styleStopIcons(stopLayerStyle);
                }
            });
        </script>
    </body>
</html>
Last updated August 23, 2024.