Toll Detail Report

Demonstrate how to get Europe Toll Detail Report in a route with route options trlType, trlCount, trlMaxHt, trlMaxWt, trlMaxAxles, isHybrid, emiType, minPoll.

<!DOCTYPE html>
<html>
    <head>
        <title>Toll Detail Report</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.0.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.0.0.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 50%;
            }
            #result {
                float: right;
                width: 49%;
                padding: 2px;
                max-height: 390px;
                overflow-y: scroll;
            }
            .trimbleMapsReportTable {
                font-family: Arial, Helvetica, sans-serif;
                font-size: small;
                border-collapse: collapse;
                width: 100%;
            }
            .trimbleMapsReportTable th {
                text-align: left;
                border-bottom: 3px solid #666;
                padding: 5px;
            }
            .trimbleMapsReportTable td {
                border-top: 1px solid #EEE;
                padding: 8px;
                vertical-align: top;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div id="result"></div>
        <script>
            // A map with 3 stops displays on the left side.
            // Toll deatil report with segments and sumary display on the right side. Your API key has to support toll detail report feature.
            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const map = new TrimbleMaps.Map({
                container: 'map',
                zoom: 3,
                region: TrimbleMaps.Common.Region.EU,
                center: [10.0, 48.0]
            });
            map.on('load', function(e) {
                const route = new TrimbleMaps.Route({
                    routeId: 'tollRoute',
                    stops: [
                        new TrimbleMaps.LngLat(21.229252, 40.100407),
                        new TrimbleMaps.LngLat(-1.208000, 51.728775),
                        new TrimbleMaps.LngLat(19.058076, 67.808907)
                    ],
                    reportType: [
                        TrimbleMaps.Common.ReportType.TOLL
                    ],
                    highwayOnly: false,
                    region: TrimbleMaps.Common.Region.EU,
                    trkUnits: 0,
                    trkHeight: "13\'1\"",
                    trkLength: "48\'",
                    trkWidth: "96\"",
                    trkWeight: 26460,
                    dataVersion: TrimbleMaps.Common.DataVersion.EU,
                    distanceUnits: TrimbleMaps.Common.DistanceUnit.MILES,
                    // Only TrimbleMaps.Common.TrailerType.TRAILER is needed after toll detail report feature is in production.
                    trlType: TrimbleMaps.Common.TrailerType !== undefined ? TrimbleMaps.Common.TrailerType.TRAILER : 'trailer',
                    trlMaxWt: 83000,
                    trlMaxHt: "13\'4\"",
                    // Only TrimbleMaps.Common.EmissionType.EUROV is needed after toll detail report feature is in production.
                    emiType: TrimbleMaps.Common.EmissionType !== undefined? TrimbleMaps.Common.EmissionType.EUROV : 7,
                    minPoll: false,
                    isHybrid: true
                }).addTo(map);
                route.on('report', function (response) {
                    let report = generateHTMLReports([response[0]], TrimbleMaps.Common.DistanceUnit.MILES);
                    let result = document.getElementById('result');
                    result.innerHTML = report.tollDetail.segment + '<br>' + report.tollDetail.summary;
                });
            });

            function buildTableCell (tag, content, colspan, cssClass) {
                tag = tag.toUpperCase();
                let cell;
                let attr;
                if (colspan !== null && colspan !== undefined) {
                    attr = `colspan="${colspan}" `;
                }
                if (cssClass !== null && cssClass !== undefined) {
                    if (attr !== undefined) {
                        attr = `${attr}class="${cssClass}" `;
                    } else {
                        attr = `class="${cssClass}" `;
                    }
                }
                if (content === undefined || content === null) {
                    content = '';
                }

                if (attr !== null && attr !== undefined) {
                    cell = `<${tag} ${attr}>${content}</${tag}>`;
                } else {
                    cell = `<${tag}>${content}</${tag}>`;
                }

                return cell;
            };

            function buildTableOrRow (tag, trs, cssClass, id) {
                tag = tag.toUpperCase();
                let tbOrTr;
                let attr;
                if (id !== null && id !== undefined) {
                    attr = `id="${id}" `;
                }
                if (cssClass !== null && cssClass !== undefined) {
                    attr = `class="${cssClass}" `;
                }
                if (attr !== null && attr !== undefined) {
                    tbOrTr = `<${tag} ${attr}>`;
                } else {
                    tbOrTr = `<${tag}>`;
                }

                for (let idx = 0; idx < trs.length; idx++) {
                    tbOrTr = `${tbOrTr}${trs[idx]}`;
                }
                tbOrTr = `${tbOrTr}</${tag}>`;

                return tbOrTr;
            };

            function buildTollDetailReport (segmentLines, summaryLines, distUnits) {
                // Segment part
                let rows = [];
                rows.push(buildTableOrRow(
                    'tr',
                    new Array(
                        buildTableCell('th', 'Country', null, 'trimbleMapsCountryCol'),
                        buildTableCell('th', 'Road', null, 'trimbleMapsRoadCol'),
                        buildTableCell('th', 'TollName', null, 'trimbleMapsTollNameCol'),
                        buildTableCell('th', 'DistanceBased ' + distUnits, null, 'trimbleMapsDistanceBasedCol'),
                        buildTableCell('th', 'Pass', null, 'trimbleMapsPassCol'),
                        buildTableCell('th', 'Flat ', null, 'trimbleMapsFlatCol')
                    ),
                    'trimbleMapsHeaderRow'
                ));
                for (let i = 0; i < segmentLines.length; i++) {
                    let segmentLine = segmentLines[i];
                    rows.push(buildTableOrRow(
                        'tr',
                        new Array(
                            buildTableCell('td', segmentLine.Country == null ? ' ' : segmentLine.Country, null, 'trimbleMapsCountryCol'),
                            buildTableCell('td', segmentLine.Road == null ? ' ' : segmentLine.Road, null, 'trimbleMapsRoadCol'),
                            buildTableCell('td', segmentLine.TollName == null ? ' ' : segmentLine.TollName, null, 'trimbleMapsTollNameCol'),
                            buildTableCell('td', segmentLine.DistanceBased == null ? ' ' : segmentLine.DistanceBased, null, 'trimbleMapsDistanceBasedCol'),
                            buildTableCell('td', segmentLine.Pass == null ? ' ' : segmentLine.Pass, null, 'trimbleMapsPassCol'),
                            buildTableCell('td', segmentLine.Flat == null ? ' ' : segmentLine.Flat, null, 'trimbleMapsFlatCol')
                        )
                    ));
                }
                let segment = buildTableOrRow('table', rows, 'trimbleMapsReportTable trimbleMapsSegmentReportTable');
                // Summary part
                rows = [];
                rows.push(buildTableOrRow(
                    'tr',
                    new Array(
                        buildTableCell('th', 'Country', null, 'trimbleMapsCountryCol'),
                        buildTableCell('th', 'TollType', null, 'trimbleMapsTollTypeCol'),
                        buildTableCell('th', 'TollName', null, 'trimbleMapsTollNameCol'),
                        buildTableCell('th', 'TollDistance', null, 'trimbleMapsTollDistanceCol'),
                        buildTableCell('th', 'Tolls(Local)', null, 'trimbleMapsTollsLocalCol'),
                        buildTableCell('th', 'Tolls(EUR)', null, 'trimbleMapsTollsEURCol'),
                        buildTableCell('th', 'PaymentOption', null, 'trimbleMapsPaymentOptionCol')
                    ),
                    'trimbleMapsHeaderRow'
                ));

                for (let j = 0; j < summaryLines.length; j++) {
                    let summaryLine = summaryLines[j];
                    rows.push(buildTableOrRow(
                        'tr',
                        new Array(
                            buildTableCell('td', summaryLine.Country == null ? ' ' : summaryLine.Country, null, 'trimbleMapsCountryCol'),
                            buildTableCell('td', summaryLine.TollType == null ? ' ' : summaryLine.TollType, null, 'trimbleMapsTollTypeCol'),
                            buildTableCell('td', summaryLine.TollName == null ? ' ' : summaryLine.TollName, null, 'trimbleMapsTollNameCol'),
                            buildTableCell('td', summaryLine.TollDistance == null ? ' ' : summaryLine.TollDistance, null, 'trimbleMapsTollDistanceCol trimbleMapsNumericCol'),
                            buildTableCell('td', summaryLine.TollsLocal == null ? ' ' : summaryLine.TollsLocal, null, 'trimbleMapsTollsLocalCol trimbleMapsCurrencyCol'),
                            buildTableCell('td', summaryLine.TollsEUR == null ? ' ' : summaryLine.TollsEUR, null, 'trimbleMapsTollsEURCol trimbleMapsCurrencyCol'),
                            buildTableCell('td', summaryLine.PaymentOption == null ? ' ' : summaryLine.PaymentOption, null, 'trimbleMapsPaymentOptionCol')
                        )
                    ));
                }
                let summary = buildTableOrRow('table', rows, 'trimbleMapsReportTable trimbleMapsSummaryReportTable');
                return { segment: segment, summary: summary };
            };

            function generateHTMLReports (respJson, distUnits) {
                let reportsInHTML = {
                    'mileage': '',
                    'tollDetail': { segment: '', summary: '' }
                };
                let nbrReports = respJson.length;
                if (typeof distUnits === 'number') {
                    if (distUnits === 1)
                        distUnits = 'Km';
                    else
                        distUnits = 'Miles';
                } else {
                    if (distUnits != null && distUnits.toUpperCase() === 'KILOMETERS') {
                        distUnits = 'Km';
                    } else {
                        distUnits = 'Miles';
                    }
                }
                for (let idx = 0; idx < nbrReports; idx++) {
                    let rptName = respJson[idx].__type.toUpperCase();
                    if (rptName.startsWith('TOLLDETAILREPORT')) {
                        let segmentLine = respJson[idx].SegmentLines;
                        let summaryLine = respJson[idx].SummaryLines;
                        let tollReport = buildTollDetailReport(segmentLine, summaryLine, distUnits);
                        reportsInHTML.tollDetail.segment = tollReport.segment;
                        reportsInHTML.tollDetail.summary = tollReport.summary;
                    }
                }
                return reportsInHTML;
            };
        </script>
    </body>
</html>
Last updated July 16, 2021.