JavaScript Maps SDK

Route Snapping

Using dragOptions you can allow the user to customize the route path. 

<!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>
            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const myMap = new TrimbleMaps.Map({
                container: 'map',
                style: TrimbleMaps.Common.Style.TRANSPORTATION,
                center: new TrimbleMaps.LngLat(-74.566234, 40.49944),
                zoom: 8
            });

            var route1, route2;

            myMap.on('load', function(){
                route1 = new TrimbleMaps.Route({
                    routeId: 'route1',
                    stops: [
                        new TrimbleMaps.LngLat(-74.656709,40.368394),
                        new TrimbleMaps.LngLat(-73.991993,40.751718)
                    ],
                    isDraggable: true,
                    dragOptions: {
                        snapKey: TrimbleMaps.Common.SnapKey.ALT,
                        snapMode: TrimbleMaps.Common.SnapMode.DISABLE_WITH_KEY
                    },

                    frameOptions: {
                        animate: false,
                        padding: {top: 150, bottom: 150, left: 150, right: 150}
                    }
                }).addTo(myMap);
            });
        </script>
    </body>
</html>
Last updated June 15, 2023.