GPX Support in CesiumJS

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

Very excited about this one! :slight_smile:

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

1 Like

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!

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

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!

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

@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?

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

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

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

1 Like