GPX Support in CesiumJS

CesiumJS
1

Hi everyone.

We’re close to merging in support for GPX files in CesiumJS and we’d love to get your feedback on it!

gpx

GPX (GPS Exchange Format) is a popular format for tracking GPS location from wearable devices, drones etc. Using CesiumJS, you can visualize routes, waypoints and tracks - with support for styling, custom symbology and clamping on terrain. Similar to KML support in CesiumJS, GPX files are added as a DataSource:

viewer.dataSources.add(Cesium.GpxDataSource.load(
  "../../SampleData/gpx/lamina.gpx",
  {
    clampToGround: true,
  }
);

The PR for this feature can be found here. If you work with GPX data and have been wanting this feature, please try it out and let us know if you run into any issues or if you have any suggestions for further improvements. We also welcome any sample data that you may have to share that will help us test and validate our implementation. Thanks!

6 Likes
2

Very excited about this one! :slight_smile:

(Currently I’m using a .gpx parser I wrote myself.)

1 Like
3

Hi!
I am trying to use the feature but it does not work.
It returns Uncaught TypeError: Cesium.GpxDataSource is undefined in the console.
Can you suggest me where the problem could be?

Thank you!

4

Hi @BiBonino, can you let us know what version of CesiumJS you are using?

5

Hi @Gabby_Getz
I am using this Cesium js release

src=“https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js”>

Is there the GPX not supported?

Thank you!

6

Hi there,

The feature was release in 1.91. You will need to use CesiumJS 1.91 or later in order to use the feature.

Thanks!
Gabby

7

@Gabby_Getz thank you!

With this version of Cesium there is no error in the console.
However I can not visualize the streets’ tack in the Cesium viewer.

The code is the following:

viewer.dataSources
			.add(
            Cesium.GpxDataSource.load("H:\AssegnoMATERA_Marzo2023-2024\Bonino_File_DigitalTwin\DT\CesiumFiles\strade_principali.gpx",
			
              {
              clampToGround: true,
                trackColor: Cesium.Color.RED,
               routeColor:Cesium.Color.RED
              }
            )
          );

Is there something missing?

8

viewer.dataSources.add(
Cesium.GpxDataSource.load(
“./data/gpx/croisiereVincent.gpx”,
{
clampToGround: true
}
)
)
.then(function (dataSource) {
viewer.zoomTo(dataSource.entities);
});

Is fine for me, Cesium release 1.108

9

Hi @BiBonino,

I would not recommend loading files directly out of your file system, especially if they references any other assets. It can cause security issues in some browser.

Instead you can use a simple static server, like the node package http-server. See https://github.com/CesiumGS/cesium/tree/main/Documentation/OfflineGuide#3d-tiles-gltf-and-other-static-files

1 Like
10

Hi @Gabby_Getz, thank you for the suggestions.
The environment for the GPX visualization now works.

1 Like
11

I’m wondering why when loading GPX data the viewer tilt function disappears. Clicking and moving now pans the map view instead of tilting. I know that GPX is mostly used by bikers or runners, but also it could be used by pilots.

12

Hi @gentunian, I’m not sure what exactly you’re referring to here. Would you mind providing a Sandcastle example that shows the behavior?

13

I @Gabby_Getz thanks for replying, I think I got it. It was my misunderstanding. When loading entities manually and adding a tracked entity, map controls (pan, tilt, zoom, orbiting, etc) changes based on the tracked entity pivot point.

When loading the gpx, the “pin” is not behaving like a tracked entity, and map controls they are quite different. I think this is expected, not sure if there’s a way to “orbit” a pin marker.

14

Ah I see.

You can always access the entities in a datasource, in this case GPX, with the entities property. For example:

const dataSource = await Cesium.GpxDataSource.load(...);
viewer.dataSources.add(dataSource);

const entities = dataSource.entities.values;
for (const entity of entities) {
  if (Cesium.defined(entity.billboard)) {
    viewer.trackedEntity = entity;
  }
}
1 Like
15

Thanks @Gabby_Getz that gives me an idea of the issue. Indeed the viewer controls the map differently when you track an entity (and makes complete sense).

Best