add legent to the map
This commit is contained in:
parent
53545013e0
commit
a81535758c
@ -8,7 +8,7 @@ import (
|
||||
const (
|
||||
TCP_PORT = ":3010"
|
||||
HTTP_PORT = ":3011"
|
||||
SERIAL_PORT = "COM4"
|
||||
SERIAL_PORT = "COM6"
|
||||
)
|
||||
|
||||
func main() {
|
||||
|
||||
@ -45,8 +45,11 @@ map.on('load', function () {
|
||||
'id': 'routeTCP',
|
||||
'type': 'line',
|
||||
'source': 'routeTCP',
|
||||
'layout': {
|
||||
'visibility': 'visible'
|
||||
},
|
||||
'paint': {
|
||||
'line-color': 'yellow',
|
||||
'line-color': 'blue',
|
||||
'line-opacity': 0.75,
|
||||
'line-width': 5
|
||||
}
|
||||
@ -56,26 +59,25 @@ map.on('load', function () {
|
||||
'id': 'routeSERIAL',
|
||||
'type': 'line',
|
||||
'source': 'routeSERIAL',
|
||||
'layout': {
|
||||
'visibility': 'visible'
|
||||
},
|
||||
'paint': {
|
||||
'line-color': 'blue',
|
||||
'line-color': 'yellow',
|
||||
'line-opacity': 0.75,
|
||||
'line-width': 5
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// setup the viewport
|
||||
map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 17 });
|
||||
map.setPitch(30);
|
||||
|
||||
// on a regular basis, add more coordinates from the saved list and update the map
|
||||
//var i = 0;
|
||||
//var timer = window.setInterval(, 10);
|
||||
|
||||
var stateLegendEl = document.getElementById('state-legend');
|
||||
stateLegendEl.style.display = 'block';
|
||||
})
|
||||
|
||||
function updateMapTCP (long, lat) {
|
||||
//let coordinates = [long, lat]
|
||||
emptyTCP.features[0].geometry.coordinates.push([long, lat]);
|
||||
map.getSource('routeTCP').setData(emptyTCP);
|
||||
map.panTo([long, lat]);
|
||||
|
||||
@ -40,9 +40,16 @@ window.addEventListener("load", function(evt) {
|
||||
//console.log(evt.data)
|
||||
console.log("JSON geparsed onmessage", dat)
|
||||
//console.log(dat.SOURCE_TCP.Orientation)
|
||||
document.getElementById("gyroscope").style.transform = `rotateX(${-((dat.SOURCE_TCP.Orientation[1]+90)%360)}deg) rotateY(${dat.SOURCE_TCP.Orientation[0]}deg) rotateZ(${-dat.SOURCE_TCP.Orientation[2]}deg)`
|
||||
document.getElementById("gyroscopeTCP").style.transform = `rotateX(${dat.SOURCE_TCP.Orientation[0]}deg) rotateY(${dat.SOURCE_TCP.Orientation[1]}deg) rotateZ(${dat.SOURCE_TCP.Orientation[2]}deg)`
|
||||
document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
|
||||
|
||||
// document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
|
||||
// document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
|
||||
// document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
|
||||
// document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
|
||||
|
||||
//document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
|
||||
//document.getElementById("diffLat").innerHTML = "Differenz lat: " + Math.abs(dat.SOURCE_TCP.Position[0] - dat.SOURCE_SERIAL.Position[0])
|
||||
/*
|
||||
console.log(dat)
|
||||
orientation[0] += dat[0] * multiplier
|
||||
|
||||
Loading…
Reference in New Issue
Block a user