obsidian/MyObsidianVault/Knowledgebase/WebDev/Verleih/TomTom/Testkarte anzeigen.md

<!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>
```