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