You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
5.2 KiB
178 lines
5.2 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.11.0//maps/maps.css'>
|
||
|
|
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.11.0/maps/maps-web.min.js"></script>
|
||
|
|
<title>TomTom Map</title>
|
||
|
|
<style>
|
||
|
|
#map {
|
||
|
|
height: 92vh;
|
||
|
|
width: 95vw;
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div style="padding:10px">
|
||
|
|
<div id="map"></div>
|
||
|
|
</div>
|
||
|
|
<script src='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.18.0/maps/maps-web.min.js'></script>
|
||
|
|
<script type='text/javascript'></script>
|
||
|
|
<script>
|
||
|
|
var marker_s;
|
||
|
|
var marker_d;
|
||
|
|
var coord_s = [11.413787, 48.783301];;
|
||
|
|
var coord_d;
|
||
|
|
var diff;
|
||
|
|
var line;
|
||
|
|
var rotation = {
|
||
|
|
Heading: 0
|
||
|
|
};
|
||
|
|
|
||
|
|
var map = tt.map({
|
||
|
|
key: 'HCAUTwaEOyuFIaIiLWcMojepBu22Sbcu',
|
||
|
|
container: 'map',
|
||
|
|
center: coord_s,
|
||
|
|
zoom: 10,
|
||
|
|
pitch: 0,
|
||
|
|
stylesVisibility: {
|
||
|
|
trafficIncidents: true,
|
||
|
|
trafficFlow: true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
//map.addControl(new tt.FullscreenControl());
|
||
|
|
map.addControl(new tt.NavigationControl());
|
||
|
|
|
||
|
|
|
||
|
|
// Initialization
|
||
|
|
marker_s = new tt.Marker({
|
||
|
|
draggable: true
|
||
|
|
}).setLngLat(coord_s).addTo(map);
|
||
|
|
coord_s = marker_s.getLngLat();
|
||
|
|
diff = 1
|
||
|
|
returnS();
|
||
|
|
marker_s.getElement().innerHTML = ("<img src='car.svg' style='transform:rotate(" + rotation + "deg)'>");
|
||
|
|
marker_s.on('dragend', onDragEnd_s);
|
||
|
|
// console.log("Initialization: *Start* Position " + coord_s)
|
||
|
|
|
||
|
|
function updateLines() {
|
||
|
|
linestrings = [];
|
||
|
|
for (var i = 1; i < points.length; ++i) {
|
||
|
|
var greatCircle = turf.greatCircle(points[i - 1], points[i], {
|
||
|
|
offset: 100
|
||
|
|
});
|
||
|
|
linestrings.push(greatCircle);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onDragEnd_s() {
|
||
|
|
if (diff == 2) {
|
||
|
|
coord_s = marker_s.getLngLat();
|
||
|
|
// UPDATE LINE
|
||
|
|
} else {
|
||
|
|
coord_s = marker_s.getLngLat();
|
||
|
|
}
|
||
|
|
returnS();
|
||
|
|
// console.log("Dragend: *Start* Position " + coord_s)
|
||
|
|
};
|
||
|
|
|
||
|
|
function onDragEnd_d() {
|
||
|
|
coord_d = marker_d.getLngLat();
|
||
|
|
returnD();
|
||
|
|
// UPDATE LINE
|
||
|
|
// console.log("Dragend: *Desti* Position " + coord_d)
|
||
|
|
};
|
||
|
|
|
||
|
|
// Adds a marker to the map.
|
||
|
|
map.on('click', function(event) {
|
||
|
|
// Add the marker at the clicked location, and add the next-available label
|
||
|
|
// from the array of alphabetical characters.
|
||
|
|
if (diff == 1) { // Add destination
|
||
|
|
coord_d = new tt.LngLat((event.lngLat.lng), (event.lngLat.lat));
|
||
|
|
returnD();
|
||
|
|
|
||
|
|
marker_d = new tt.Marker({
|
||
|
|
draggable: true
|
||
|
|
}).setLngLat(coord_d).addTo(map);
|
||
|
|
marker_d.on('dragend', onDragEnd_d);
|
||
|
|
|
||
|
|
// DRAW Line
|
||
|
|
// path: [coord_s, coord_d],
|
||
|
|
|
||
|
|
diff = 2;
|
||
|
|
|
||
|
|
//console.log("D New Position " + coord_d)
|
||
|
|
//console.log("diff = "+ diff)
|
||
|
|
} else { // Add new start
|
||
|
|
coord_s = new tt.LngLat((event.lngLat.lng), (event.lngLat.lat));
|
||
|
|
returnS();
|
||
|
|
coord_d = null;
|
||
|
|
returnD();
|
||
|
|
marker_s.remove();
|
||
|
|
marker_d.remove();
|
||
|
|
|
||
|
|
// REMOVE LINE
|
||
|
|
|
||
|
|
marker_s = new tt.Marker({
|
||
|
|
draggable: true,
|
||
|
|
}).setLngLat(coord_s).addTo(map);
|
||
|
|
marker_s.getElement().innerHTML = ("<img src='car.svg' style='transform:rotate(" + rotation + "deg)'>");
|
||
|
|
|
||
|
|
marker_s.on('dragend', onDragEnd_s);
|
||
|
|
diff = 1;
|
||
|
|
|
||
|
|
//console.log("S New Position " + coord_s)
|
||
|
|
//console.log("diff = "+ diff)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function updateHeading() {
|
||
|
|
marker_s.remove();
|
||
|
|
marker_s = new tt.Marker({
|
||
|
|
draggable: true,
|
||
|
|
}).setLngLat(coord_s).addTo(map);
|
||
|
|
marker_s.getElement().innerHTML = ("<img src='car.svg' style='transform:rotate(" + rotation + "deg)'>");
|
||
|
|
|
||
|
|
marker_s.on('dragend', onDragEnd_s);
|
||
|
|
}
|
||
|
|
|
||
|
|
function returnS() {
|
||
|
|
try {
|
||
|
|
var out = {
|
||
|
|
lat: coord_s.lat,
|
||
|
|
lng: coord_s.lng
|
||
|
|
};
|
||
|
|
} catch {
|
||
|
|
var out = {
|
||
|
|
lat: null,
|
||
|
|
lng: null
|
||
|
|
};
|
||
|
|
}
|
||
|
|
//console.log("S Position lat:" + out.lat)
|
||
|
|
return out;
|
||
|
|
}
|
||
|
|
|
||
|
|
function returnD() {
|
||
|
|
try {
|
||
|
|
var out = {
|
||
|
|
lat: coord_d.lat,
|
||
|
|
lng: coord_d.lng
|
||
|
|
};
|
||
|
|
} catch {
|
||
|
|
var out = {
|
||
|
|
lat: null,
|
||
|
|
lng: null
|
||
|
|
};
|
||
|
|
}
|
||
|
|
//console.log("D Position lat:" + out.lat)
|
||
|
|
return out;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|