<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.16.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.16.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>

        <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(-76.217752, 43.106542),
                    new TrimbleMaps.LngLat(-74.629749, 40.261181),
                ],
                showArrows: true,
                tollRoads: TrimbleMaps.Common.TollRoadsType.AVOID_IF_POSSIBLE,
                tunnelCategories: [TrimbleMaps.Common.TunnelCategory.E, TrimbleMaps.Common.TunnelCategory.DE],
                trkLCV: true,
                elevLimit: 2500,
                hosEnabled: true,
                hosRemDriveTimeUntilBreak: 1000,
                hosRemDriveTime: 2000,
                hosRemOnDutyTime: 3000,
                hosRuleType: TrimbleMaps.Common.HoSScheduleType.US_FED_708_LH,
                hosRemCycleDutyTime: 4000,
                sideOfStreetAdherence: TrimbleMaps.Common.SideOfStreetAdherenceLevel.MINIMAL,
                governorSpeedLimit: 55,
                refrigerated: true,
                fuelType: TrimbleMaps.Common.FuelType.DIESEL,
                fuelConsumption: 50,
                avoidState: ['CT', 'PA'],
                avoidCountry: ['CA', 'MX'],
                favorState: ['OH', 'TN'],
                favorCountry: ['US'],
                useCrossStreetTurnAvoidance: false,
                tollPlan: 'EZPass',
                custRdSpeeds: false,
                reportType: [
                    TrimbleMaps.Common.ReportType.MILEAGE,
                    TrimbleMaps.Common.ReportType.DETAIL
                ],
                requestMethod: TrimbleMaps.Common.RequestMethod.POST
            });
            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>