JavaScript Maps SDK

Route Event Handling

The primary route events are the routeloading and route. Inside the constructor, the initial loading event happens before an added event handler. This example demonstrates how to handle route events. Drag a route to alter it, route status label changes. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.8.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.8.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 November 23, 2021.