Toll Detail Report
This example demonstrates how to get a Toll Detail Report for a route in Europe with route optionstrlType, trlCount, trlMaxHt, trlMaxWt, trlMaxAxles, isHybrid, emiType, minPoll.
Requires Trimble Maps v3.0.0 or later.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toll Detail Report</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.17.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.17.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 detail report with segments and summary 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(22.179308, 66.653857)
],
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>
Toll Detail Report
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toll Detail Report</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.17.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.17.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 detail report with segments and summary 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(22.179308, 66.653857)
],
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>