So I am quite new to Javascript, and I am trying to create a Cesium map that displays aircraft flying overhead (this is a simplification, but all that's needed to answer). Everything is working so far, but I would like to place a textbox inside the description that appears when you click on an entity. While this does work, the textbox does not save the value after new information is fetched from the server (about once per second). Also, the cursor is always moved away from the textbox. Here's a snippet of my code:
var position = Cesium.Cartesian3.fromDegrees(plane.lon, plane.lat, plane.alt_geom);
var heading = Cesium.Math.toRadians(plane.track - 90);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, 0.0, 0.0));
var description = `
<table>
<tr><th>Flight</th><td>${plane.flight}</td></tr>
<tr><th>Type</th><td><input type="text" id="${plane.hex}"></td></tr>
<tr><th>Altitude</th><td>${plane.alt_geom} ft</td></tr>
<tr><th>Speed</th><td>${plane.gs} knots</td></tr>
<tr><th>Track</th><td>${plane.track}°</td></tr>
<tr><th>Squawk</th><td>${plane.squawk}</td></tr>
<tr><th>ICAO</th><td>${plane.hex}</td></tr>
<tr><th>Position age</th><td>${plane.seen_pos}</td></tr>
</table>
`;
This is run about once a second to update the speed, altitude, etc.
Is there a way to disconnect the text box from the rest of the description? I have also tried saving the information and putting it in my text box, but it did not work at all.
Thanks!
Edit: Here is the whole script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D ADS-B Map with Table</title>
<link rel="stylesheet" href=".74/Build/Cesium/Widgets/widgets.css" type="text/css">
<script src=".74/Build/Cesium/Cesium.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
display: flex;
width: 100%;
height: 100%;
}
#cesiumContainer {
width: 70%;
height: 100%;
}
#tableContainer {
width: 30%;
height: 100%;
background-color: #f0f0f0;
padding: 10px;
box-sizing: border-box;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div id="container">
<div id="cesiumContainer"></div>
<div id="tableContainer">
<table id="aircraftTable">
<thead>
<tr>
<th>Flight</th>
<th>Altitude (ft)</th>
<th>Speed (knots)</th>
<th>Track (°)</th>
<th>Squawk</th>
<th>ICAO</th>
<th>Position Age</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<!-- aircraft list will go here -->
</tbody>
</table>
</div>
</div>
<script>
// Assign your Cesium ion access token
Cesium.Ion.defaultAccessToken = '';
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.animation.container.style.visibility = 'hidden';
viewer.timeline.container.style.visibility = 'hidden';
viewer.forceResize();
var aircraftEntities = {};
function updateAircraft(data) {
var aircraftCount = 0;
var updatedAircraft = new Set();
var tbody = document.getElementById('aircraftTable').querySelector('tbody');
data.aircraft.forEach(function (plane) {
if (plane.seen_pos) {
aircraftCount += 1;
updatedAircraft.add(plane.hex);
var row = document.getElementById(plane.hex);
if (!row) {
row = tbody.insertRow();
row.setAttribute('id', plane.hex);
row.insertCell(0).textContent = plane.flight || 'N/A';
row.insertCell(1).textContent = plane.alt_geom || 'N/A';
row.insertCell(2).textContent = plane.gs || 'N/A';
row.insertCell(3).textContent = plane.track || 'N/A';
row.insertCell(4).textContent = plane.squawk || 'N/A';
row.insertCell(5).textContent = plane.hex || 'N/A';
row.insertCell(6).textContent = plane.seen_pos;
row.insertCell(7).textContent = plane.seen;
} else {
row.cells[0].textContent = plane.flight || 'N/A';
row.cells[1].textContent = plane.alt_geom || 'N/A';
row.cells[2].textContent = plane.gs || 'N/A';
row.cells[3].textContent = plane.track || 'N/A';
row.cells[4].textContent = plane.squawk || 'N/A';
row.cells[5].textContent = plane.hex || 'N/A';
row.cells[6].textContent = plane.seen_pos;
row.cells[7].textContent = plane.seen;
}
if (plane.lat && plane.lon && plane.alt_geom) {
var position = Cesium.Cartesian3.fromDegrees(plane.lon, plane.lat, plane.alt_geom);
var heading = Cesium.Math.toRadians(plane.track - 90);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, 0.0, 0.0));
var description = `
<table>
<tr><th>Flight</th><td>${plane.flight}</td></tr>
<tr><th>Type</th><td><input type="text" id="${plane.hex}"></td></tr>
<tr><th>Altitude</th><td>${plane.alt_geom} ft</td></tr>
<tr><th>Speed</th><td>${plane.gs} knots</td></tr>
<tr><th>Track</th><td>${plane.track}°</td></tr>
<tr><th>Squawk</th><td>${plane.squawk}</td></tr>
<tr><th>ICAO</th><td>${plane.hex}</td></tr>
<tr><th>Position age</th><td>${plane.seen_pos}</td></tr>
</table>
`;
if (!aircraftEntities[plane.hex]) {
aircraftEntities[plane.hex] = viewer.entities.add({
id: plane.hex,
position: position,
orientation: orientation,
model: {
uri: '/models/.glb',
scale: 10.0
},
label: {
text: plane.flight,
font: '14pt sans-serif',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -9)
},
description: description
});
} else {
aircraftEntities[plane.hex].position = position;
aircraftEntities[plane.hex].orientation = orientation;
aircraftEntities[plane.hex].description = description;
}
}
}
});
document.title = `(${aircraftCount}) 3D Map`;
for (var id in aircraftEntities) {
if (!updatedAircraft.has(id)) {
viewer.entities.remove(aircraftEntities[id]);
delete aircraftEntities[id];
}
}
}
function fetchADSBBData() {
fetch('/adsb_data')
.then(response => response.json())
.then(data => {
updateAircraft(data);
})
.catch(error => console.error('Error fetching ADS-B data:', error));
}
setInterval(fetchADSBBData, 500);
</script>
</body>
</html>
and some sample data:
{
"now": 1737379551.1,
"messages": 623660,
"aircraft": [
{
"hex": "a173d2",
"alt_baro": 10800,
"alt_geom": 11225,
"gs": 338.7,
"track": 311.4,
"baro_rate": -512,
"squawk": "5661",
"nav_qnh": 1036,
"nav_altitude_mcp": 10016,
"nav_heading": 296.7,
"lat": 49.778656,
"lon": -124.626085,
"nic": 8,
"rc": 186,
"seen_pos": 34,
"version": 2,
"nic_baro": 1,
"nac_p": 10,
"nac_v": 2,
"sil": 3,
"sil_type": "perhour",
"gva": 2,
"sda": 2,
"mlat": [],
"tisb": [],
"messages": 34,
"seen": 32.3,
"rssi": -23.3
},
{
"hex": "ad3c1f",
"flight": "ASA118 ",
"alt_baro": 32200,
"alt_geom": 32675,
"gs": 485.3,
"ias": 277,
"tas": 444,
"mach": 0.764,
"track": 139.7,
"track_rate": -0.03,
"roll": 0.2,
"mag_heading": 121.5,
"baro_rate": -2624,
"geom_rate": -2592,
"squawk": "7267",
"category": "A3",
"nav_qnh": 1013.6,
"nav_altitude_mcp": 16992,
"nav_altitude_fms": 20000,
"nav_heading": 123,
"lat": 49.788269,
"lon": -124.562739,
"nic": 8,
"rc": 186,
"seen_pos": 6.4,
"version": 2,
"nic_baro": 1,
"nac_p": 10,
"nac_v": 2,
"sil": 3,
"sil_type": "perhour",
"gva": 2,
"sda": 2,
"mlat": [],
"tisb": [],
"messages": 226,
"seen": 0,
"rssi": -21.8
},
{
"hex": "a35254",
"alt_baro": 31700,
"alt_geom": 32150,
"gs": 495.3,
"ias": 283,
"tas": 450,
"mach": 0.776,
"track": 148.2,
"track_rate": -0.03,
"roll": -0.2,
"mag_heading": 131,
"baro_rate": -2144,
"geom_rate": -1408,
"squawk": "4177",
"category": "A3",
"nav_qnh": 1012.8,
"nav_altitude_mcp": 16992,
"nav_heading": 130.8,
"lat": 49.583969,
"lon": -124.351182,
"nic": 8,
"rc": 186,
"seen_pos": 5.2,
"version": 2,
"nic_baro": 1,
"nac_p": 10,
"nac_v": 1,
"sil": 3,
"sil_type": "perhour",
"gva": 2,
"sda": 2,
"mlat": [],
"tisb": [],
"messages": 495,
"seen": 1.6,
"rssi": -22.1
},
{
"hex": "ada1de",
"flight": "MAL7055 ",
"alt_baro": 10550,
"alt_geom": 10925,
"gs": 289.8,
"track": 265.8,
"baro_rate": -1344,
"squawk": "2174",
"emergency": "none",
"category": "A4",
"nav_qnh": 1036,
"nav_altitude_mcp": 10016,
"nav_heading": 265.1,
"nav_modes": [
"vnav",
"tcas"
],
"lat": 49.242096,
"lon": -123.899546,
"nic": 8,
"rc": 186,
"seen_pos": 0.5,
"version": 2,
"nic_baro": 1,
"nac_p": 9,
"nac_v": 1,
"sil": 3,
"sil_type": "perhour",
"gva": 2,
"sda": 2,
"mlat": [],
"tisb": [],
"messages": 1076,
"seen": 0.5,
"rssi": -17.7
},
{
"hex": "aa3b84",
"flight": "AMX694 ",
"alt_baro": 6175,
"alt_geom": 6550,
"gs": 223.4,
"ias": 223,
"tas": 242,
"mach": 0.376,
"track": 284.8,
"track_rate": 0.03,
"roll": 0.5,
"mag_heading": 269.3,
"baro_rate": -1088,
"geom_rate": -832,
"squawk": "3264",
"emergency": "none",
"category": "A3",
"nav_qnh": 1036,
"nav_altitude_mcp": 3008,
"nav_altitude_fms": 3008,
"nav_heading": 267.9,
"lat": 47.096802,
"lon": -124.260827,
"nic": 8,
"rc": 186,
"seen_pos": 1.7,
"version": 2,
"nic_baro": 1,
"nac_p": 10,
"nac_v": 2,
"sil": 3,
"sil_type": "perhour",
"gva": 2,
"sda": 2,
"mlat": [],
"tisb": [],
"messages": 3035,
"seen": 1.7,
"rssi": -17.5
}
]
}