-
Notifications
You must be signed in to change notification settings - Fork 0
/
route.html
112 lines (103 loc) · 4.13 KB
/
route.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html class='use-all-space'>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge' />
<meta charset='UTF-8'>
<title>Maps SDK for Web - Static route</title>
<meta name='viewport'
content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel='stylesheet' type='text/css' href='/cdn.web-sdk-maps/maps.css'>
<link rel='stylesheet' type='text/css' href='../assets/ui-library/icons-css/routing.css'/>
<link rel='stylesheet' type='text/css' href='../assets/ui-library/index.css'/>
</head>
<style>
.icon {
background-size: cover;
height: 30px;
width: 30px;
}
.route-marker {
align-items: center;
background-color: #4a90e2;
border: solid 3px #2faaff;
border-radius: 50%;
display: flex;
height: 32px;
justify-content: center;
transition: width .1s, height .1s;
width: 32px;
}
</style>
<body>
<div id='map' class='map'></div>
<script src='/cdn.web-sdk-maps/maps-web.min.js'></script>
<script src='/cdn.web-sdk-services/services-web.min.js'></script>
<script data-showable type='text/javascript' src='../assets/js/mobile-or-tablet.js'></script>
<script>
var map = tt.map({
key: '${api.key.maps}',
container: 'map',
dragPan: !isMobileOrTablet()
});
map.addControl(new tt.FullscreenControl());
map.addControl(new tt.NavigationControl());
function createMarkerElement(type) {
var element = document.createElement('div');
var innerElement = document.createElement('div');
element.className = 'route-marker';
innerElement.className = 'icon tt-icon -white -' + type;
element.appendChild(innerElement);
return element;
}
function addMarkers(feature) {
var startPoint, endPoint;
if (feature.geometry.type === 'MultiLineString') {
startPoint = feature.geometry.coordinates[0][0]; //get first point from first line
endPoint = feature.geometry.coordinates.slice(-1)[0].slice(-1)[0]; //get last point from last line
} else {
startPoint = feature.geometry.coordinates[0];
endPoint = feature.geometry.coordinates.slice(-1)[0];
}
new tt.Marker({ element: createMarkerElement('start') }).setLngLat(startPoint).addTo(map);
new tt.Marker({ element: createMarkerElement('finish') }).setLngLat(endPoint).addTo(map);
}
function findFirstBuildingLayerId() {
var layers = map.getStyle().layers;
for (var index in layers) {
if (layers[index].type === 'fill-extrusion') {
return layers[index].id;
}
}
throw new Error('Map style does not contain any layer with fill-extrusion type.');
}
map.once('load', function() {
tt.services.calculateRoute({
key: '${api.key.routing}',
traffic: false,
locations: '4.8786,52.3679:4.8798,52.3679'
})
.then(function(response) {
var geojson = response.toGeoJson();
map.addLayer({
'id': 'route',
'type': 'line',
'source': {
'type': 'geojson',
'data': geojson
},
'paint': {
'line-color': '#4a90e2',
'line-width': 8
}
}, findFirstBuildingLayerId());
addMarkers(geojson.features[0]);
var bounds = new tt.LngLatBounds();
geojson.features[0].geometry.coordinates.forEach(function(point) {
bounds.extend(tt.LngLat.convert(point));
});
map.fitBounds(bounds, { duration: 0, padding: 50 });
});
});
</script>
</body>
</html>