Skip to content

Commit 335a2a4

Browse files
author
MachineUserPTV
committed
Automatic synchronisation from developer.myptv.com
1 parent eb57bf1 commit 335a2a4

8 files changed

Lines changed: 647 additions & 0 deletions

File tree

‎Toll Routing/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Toll Routing
2+
Display a map, select and calculate a route with toll between waypoints.</br>
3+
</br>
4+
PTV Developer APIs used in this tutorial:
5+
- <a href="https://developer.myptv.com/Documentation/Raster%20Maps%20API/QuickStart.htm" target="_blank">Raster Maps API</a>
6+
- <a href="https://developer.myptv.com/Documentation/Routing%20API/QuickStart.htm" target="_blank">Routing API</a>
7+
#
8+
## Try it <a href="https://developer.myptv.com/Applications/Routing/Toll%20Routing/index.html" target="_blank">here</a>.
9+
## Read the tutorial on <a href="https://developer.myptv.com/Tutorials/Routing/Toll%20Routing/Toll%20Routing.htm" target="_blank">PTV Developer</a>.
10+
## Find more tutorials on <a href="https://developer.myptv.com/Tutorials.htm" target="_blank">PTV Developer</a> or on <a href="https://github.com/PTV-Group" target="_blank">GitHub</a>.

‎Toll Routing/headerTileLayer.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
async function fetchImage(url, callback, headers, abort) {
2+
let _headers = {};
3+
if (headers) {
4+
headers.forEach(h => {
5+
_headers[h.header] = h.value;
6+
});
7+
}
8+
const controller = new AbortController();
9+
const signal = controller.signal;
10+
if (abort) {
11+
abort.subscribe(() => {
12+
controller.abort();
13+
});
14+
}
15+
const f = await fetch(url, {
16+
method: "GET",
17+
headers: _headers,
18+
mode: "cors",
19+
signal: signal
20+
});
21+
const blob = await f.blob();
22+
callback(blob);
23+
}
24+
25+
L.TileLayerWithHeaders = L.TileLayer.extend({
26+
initialize: function (url, options, headers, abort) {
27+
L.TileLayer.prototype.initialize.call(this, url, options);
28+
this.headers = headers;
29+
this.abort = abort;
30+
},
31+
createTile(coords, done) {
32+
const url = this.getTileUrl(coords);
33+
const img = document.createElement("img");
34+
img.setAttribute("role", "presentation");
35+
36+
fetchImage(
37+
url,
38+
resp => {
39+
const reader = new FileReader();
40+
reader.onload = () => {
41+
img.src = reader.result;
42+
};
43+
reader.readAsDataURL(resp);
44+
done(null, img);
45+
},
46+
this.headers,
47+
this.abort
48+
);
49+
return img;
50+
}
51+
});
52+
53+
L.tileLayer = function (url, options, headers, abort) {
54+
return new L.TileLayerWithHeaders(url, options, headers, abort);
55+
};

‎Toll Routing/icons/marker-green.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎Toll Routing/icons/marker-red.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎Toll Routing/icons/marker.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎Toll Routing/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<html>
3+
<head><title>Toll Routing</title>
4+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
5+
<link rel="stylesheet" href="./style.css" />
6+
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js">
7+
</script>
8+
<script src="https://developer.myptv.com/Applications/common/jquery.min.js">
9+
</script>
10+
<script src="https://developer.myptv.com/Applications/common/converTime.js">
11+
</script>
12+
<script src="https://developer.myptv.com/Applications/common/convertDistance.js">
13+
</script>
14+
<script src="./headerTileLayer.js">
15+
</script>
16+
<script src="./tollRouting.js">
17+
</script>
18+
</head>
19+
<body>
20+
<div id="map"></div>
21+
22+
</body>
23+
</html>

‎Toll Routing/style.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
body,
2+
html {
3+
border: 0;
4+
padding: 0;
5+
margin: 0;
6+
}
7+
8+
p {
9+
font-size: 1vw !important;
10+
line-height: 1.5vw !important;
11+
}
12+
13+
table, th, td {
14+
border: 1px solid black;
15+
border-collapse: collapse;
16+
}
17+
18+
#map {
19+
width: 100%;
20+
height: 100%;
21+
}
22+
23+
.routing-control {
24+
background-color: #ffffff;
25+
width: 270px;
26+
height: 220px;
27+
padding-left: 30px;
28+
border-radius: 15px;
29+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
30+
}
31+
32+
.result-control,
33+
.result-control-left,
34+
.summary-control {
35+
background-color: #ffffff;
36+
width: 300px;
37+
min-height: 60px;
38+
max-height: 260px;
39+
padding-left: 30px;
40+
padding-right: 30px;
41+
padding-bottom: 10px;
42+
border-radius: 15px;
43+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
44+
}
45+
46+
.result-control-left,
47+
.summary-control {
48+
width: 240px;
49+
}
50+
51+
#tollReportTableWrapper {
52+
overflow: auto;
53+
max-height: 200px;
54+
}
55+
56+
#tollCostsTable,
57+
#summaryTable {
58+
width: 100%;
59+
}
60+
61+
.banner {
62+
position: fixed;
63+
left: 50%;
64+
transform: translateX(-50%);
65+
bottom: 5px;
66+
background-color: #ffffff;
67+
padding-left: 30px;
68+
padding-right: 30px;
69+
border-radius: 15px;
70+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
71+
}
72+
73+
.banner p {
74+
margin-block: 5px;
75+
}

0 commit comments

Comments
 (0)