JavaScript Maps SDK

Route Event Handling

This example demonstrates how to handle route events. There are two events provided by the SDK—routeloading, which fires as soon as the SDK begins working on a route, and route, which fires as soon as the route has been calculated and rendered. You can trigger each of these events in the sample below by dragging the route line to alter the route. 

<!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%;
            }

            .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 class="group">
            <span class="label">myRoute2:</span>
            <span id="myRoute2" class="value"> </span>
          </div>
        </div>

        <script>
            // Add two draggable routes.
            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');
            // First loading event happens inside the constructor.
            myRouteElem.innerHTML = `'${routeId}' is loading`;
            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(-118.2387, 34.0349)
                ]
            });
            myRoute.on('routeloading', function () {
                myRouteElem.innerHTML = `'${routeId}' is loading`;
            });
            myRoute.on('route', function () {
                myRouteElem.innerHTML = `'${routeId}' is loaded`;
            });

            const routeId2 = 'myRoute2';
            const myRoute2Elem = document.getElementById('myRoute2');
            // First loading event happens inside the constructor.
            myRoute2Elem.innerHTML = `'${routeId2}' is loading`;
            const myRoute2 = new TrimbleMaps.Route({
                routeId: 'myRoute2',
                isDraggable: true,
                routeColor: '#576571',
                stops: [
                    new TrimbleMaps.LngLat(-74.762360, 40.389078),
                    new TrimbleMaps.LngLat(-74.358442, 40.297086)
                ]
            });
            myRoute2.on('routeloading', function () {
                myRoute2Elem.innerHTML = `'${routeId2}' is loading`;
            });

            myRoute2.on('route', function () {
                myRoute2Elem.innerHTML = `'${routeId2}' is loaded`;
            });

            map.on('load', function() {
                myRoute.addTo(map);
                myRoute2.addTo(map);
            });
        </script>
    </body>

</html>
Last updated June 15, 2023.