diff --git a/public/udigit4icity/STC.html b/public/udigit4icity/STC.html
index d2dedca53b7be64a89d0856b91c6a214462725dc..37ec7692fd93694d19255e10bef878cbed630f06 100644
--- a/public/udigit4icity/STC.html
+++ b/public/udigit4icity/STC.html
@@ -10,25 +10,32 @@
<script src="https://cdn.jsdelivr.net/npm/plotly.js-dist@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<style>
+ body {
+ background-color: white; /* Set the background color to white */
+ }
- #plotlyContainer {
- height: 100vh;
- position: absolute;
- bottom: 0;
- left: 0;
- top: 6%;
- right:100;
- width: 100%;
- z-index: 3;
-}
+ #plotlyContainer {
+ height: 100vh;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ top: 6%;
+ right: 100; /* Assuming you meant right: 100px */
+ width: 100%;
+ z-index: 3;
+ }
+ #toggleSpaceTime {
+ padding: 10px 20px;
+ font-size: 16px;
+ }
</style>
</head>
<body>
<!-- Add your HTML content here -->
- <button id="toggleSpaceTime">Toggle Space-Time Cube</button>
+ <button id="toggleSpaceTime">Bus Space-Time Cube Visualization </button>
<div id="spaceTimeCubeContainer" style="display: none;">
<!-- Container for the space-time cube visualization -->
<div id="spaceTimeCube"></div>
@@ -38,7 +45,6 @@
<div id="plotlyContainer"></div>
<script>
-
document.getElementById("toggleSpaceTime").addEventListener("click", function () {
const spaceTimeContainer = document.getElementById("spaceTimeCubeContainer");
console.log("Toggle button clicked");
@@ -53,121 +59,115 @@
}
});
- function animateSpaceTimeRoute(url, containerId, trainColor, trainName) {
- fetch(url)
+ function animateSpaceTimeRoute(url) {
+ fetch(url)
.then(response => response.json())
.then(data => {
- if (!data || !data.features) {
- console.error('Invalid data format:', data);
- return;
- }
-const frames = data.features.map((feature, index) => {
- const coordinates = feature.geometry.coordinates;
- const timestamps = feature.properties.datetimes;
-
- if (!Array.isArray(coordinates) || !Array.isArray(timestamps)) {
- console.error('Invalid feature format:', feature);
- return;
- }
-
- const lineColors = Array.from({ length: coordinates.length - 1 }, () => 'orange'); // Create an array of orange colors
-
- return {
- data: [
- {
- type: 'scattermapbox',
- lat: coordinates.map(coord => coord[1]),
- lon: coordinates.map(coord => coord[0]),
- mode: 'lines+markers', // Display both points and lines
- marker: { size: 6, color: 'black' },
- line: { color: 'black' }, // This line is not used when mode is 'lines+markers'
- name: 'Bus route',
- },
- {
- type: 'scatter3d',
- x: coordinates.map(coord => coord[0]),
- y: coordinates.map(coord => coord[1]),
- z: timestamps.map((time, i) => new Date(time).toISOString()),
- mode: 'lines+markers', // Change mode to display both points and lines
- marker: { color: 'black', size: 5 },
- line: { color: 'red', size: 3 },
- name: 'Bus trajectory line',
- },
- ],
- name: `frame${index + 1}`,
- };
-});
-
- // Set the layout with mapbox style and access token
- const layout = {
- mapbox: {
- style: 'light',
- center: { lon: frames[0].data[0].lon[0], lat: frames[0].data[0].lat[0] },
- zoom: 10,
- accesstoken: 'pk.eyJ1IjoicmVkaWV0OTk2MyIsImEiOiJjbHJ1cmk5aGUwaDRvMmpuYWM4Z2NqcmZuIn0.c11HYT-5ucd6g6mL03bp3Q', // Mapbox access token
- },
- margin: { t: 0, b: 0, l: 0, r: 0 },
- scene: {
- xaxis: {
- title: 'Long',
- titlefont: {
- family: 'Arial, sans-serif',
- size: 15,
- color: 'black'
- },
- tickfont: {
- family: 'Arial, sans-serif',
- size: 15,
- color: 'black',
- bold: true
- }
- },
- yaxis: {
- title: 'Lat',
- titlefont: {
- family: 'Arial, sans-serif',
- size: 15,
- color: 'black'
- },
- tickfont: {
- family: 'Arial, sans-serif',
- size: 15,
- color: 'black',
- bold: true
- }
- },
- zaxis: {
- title: 'Time',
- titlefont: {
- family: 'Arial, sans-serif',
- size: 16,
- color: 'black'
- },
- tickfont: {
- family: 'Arial, sans-serif',
- size: 15,
- color: 'black',
- bold: true
+ if (!data || !data.features) {
+ console.error('Invalid data format:', data);
+ return;
+ }
+ const frames = data.features.map((feature, index) => {
+ const coordinates = feature.geometry.coordinates;
+ const timestamps = feature.properties.datetimes;
+
+ if (!Array.isArray(coordinates) || !Array.isArray(timestamps)) {
+ console.error('Invalid feature format:', feature);
+ return;
}
- },
- // Common font settings for both
- font: {
+
+ return {
+ data: [{
+ type: 'scatter3d',
+ x: coordinates.map(coord => coord[0]),
+ y: coordinates.map(coord => coord[1]),
+ z: timestamps.map((time, i) => new Date(time).toISOString()),
+ mode: 'lines+markers', // Change mode to display both points and lines
+ marker: {color: 'black',size: 5},
+ line: {color: 'red',size: 3
+ },
+
+
+ name: 'Bus trajectory line',
+ },
+ ],
+ name: `frame${index + 1}`,
+ };
+ });
+const layout = {
+ margin: {
+ t: 0,
+ b: 0,
+ l: 0,
+ r: 0
+ },
+ paper_bgcolor: 'white',
+ plot_bgcolor: 'white',
+ scene: {
+ xaxis: {
+ title: 'Long',
+ titlefont: {
+ family: 'Arial, sans-serif',
+ size: 15,
+ color: 'black'
+ },
+ tickfont: {
+ family: 'Arial, sans-serif',
+ size: 15,
+ color: 'black',
+ bold: true
+ }
+ },
+ yaxis: {
+ title: 'Lat',
+ titlefont: {
+ family: 'Arial, sans-serif',
+ size: 15,
+ color: 'black'
+ },
+ tickfont: {
family: 'Arial, sans-serif',
- size: 12,
+ size: 15,
color: 'black',
bold: true
- }
}
- };
+ },
+ zaxis: {
+ title: 'Time',
+ titlefont: {
+ family: 'Arial, sans-serif',
+ size: 16,
+ color: 'black'
+ },
+ tickfont: {
+ family: 'Arial, sans-serif',
+ size: 15,
+ color: 'black',
+ bold: true
+ }
+ },
+ font: {
+ family: 'Arial, sans-serif',
+ size: 12,
+ color: 'black',
+ bold: true
+ }
+ },
+ legend: {
+ traceorder: 'normal' // Set traceorder to 'normal' to display legends
+ }
+};
+
- // Initialize Plotly container
- Plotly.newPlot('plotlyContainer', frames[0].data, layout);
- Plotly.addFrames('plotlyContainer', frames);
+ // Initialize Plotly container
+ Plotly.newPlot('plotlyContainer', frames[0].data, layout);
+ Plotly.addFrames('plotlyContainer', frames);
})
.catch(error => {
- console.error('Error fetching data:', error);
+ console.error('Error fetching data:', error);
});
- }
+}
+
</script>
</body>