146 lines
No EOL
3.3 KiB
Markdown
146 lines
No EOL
3.3 KiB
Markdown
````php
|
|
<!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='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.20.0/maps/maps.css'>
|
|
|
|
<link rel='stylesheet' type='text/css' href='../test/assets/ui-library/icons-css/routing.css'/>
|
|
|
|
<link rel='stylesheet' type='text/css' href='../test/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><h1>TEST KARTE</<h1></div>
|
|
<div style="height: 90%" id='map' class='map'></div>
|
|
<script src='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.20.0/maps/maps-web.min.js'></script>
|
|
|
|
<script src='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.20.0/services/services-web.min.js'></script>
|
|
|
|
<script type='text/javascript' src='../test/assets/js/mobile-or-tablet.js'></script>
|
|
|
|
<script>
|
|
var map = tt.map({
|
|
key: 'xcA6NjLwDPmayP6y56AoVoloz1iohbUV',
|
|
container: 'map',
|
|
//dragPan: !isMobileOrTablet()
|
|
dragPan: false
|
|
});
|
|
|
|
map.scrollZoom.disable()
|
|
//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: 'xcA6NjLwDPmayP6y56AoVoloz1iohbUV',
|
|
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>
|
|
``` |