JavaScript Maps SDK

Route Event Stop Inserting

When a route is altered by dragging, mouse down location could be on one or more route legs. Client app could utilize a stopInserting event listener to insert the stop on a selected leg. Requires Trimble Maps v3.1.0 or later. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.1.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.1.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>
        <div class="map-panel">
          <div class="group">
            <span class="label">myRoute:</span>
            <span id="myRoute" class="value"> </span>
          </div>
        </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(-74.566234, 40.49944),
                    new TrimbleMaps.LngLat(-74.629749, 40.26118),
                    new TrimbleMaps.LngLat(-74.566234, 40.49944),
                    new TrimbleMaps.LngLat(-74.629749, 40.26118),
                    new TrimbleMaps.LngLat(-74.566234, 40.49944)
                ]
            });
            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 November 23, 2021.