Viewing multiple KML dataSources at the same time

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

Is there a way to go about viewing multiple KML files at once while the timespan scales to include all of the visible files like you can on Google Earth? Ideally I’d like to be able to show the entire DataSourceCollection at once. Searching here (and viewing countless SO question) I was able to find it’s possible load multiple CZML dataSources at the same time with Drag/Drop mixins, but haven’t found anything in the documentation, here or in the Sandcastle examples that even tells me if this is possible with KMLDataSource or not. I would like to start with loading more than one KML at a time and then worry about the time slider later (if it will even be an issue), but all of the examples in Sandcastle (KML, CZML and DataSources tabs) only show one dataSource at a time and the documentation proved unhelpful. Converting to CZML might be an option, but I would prefer to use raw KML.

Side question; are the individual folders and elements of KML accessible by the Cesium API? I’m also looking to create a Tree Table checkbox list as a toolbar similar to that which comes as your “Places” in Google Earth for toggling visibility.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

N/A I’ve modified and played around with the Sandcastle KML example to attempt this, but haven’t been able to find a solution. Adding to the DataSourceCollection is great…but how can I toggle/maintain visibility across different sources?

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Our application has reached the functional plateau with Google Earth and we need something with an active and robust API that already handles the gx KML extension. We need to be able to display multiple KML files at the same time and view how the elements move across time in comparison to other KML elements. They must be separate KML files because we’re receiving them at different times from different sources ourselves. Combining into one large KMZ and refreshing should not really be an option as we want to update the view on the fly while maintaining temporal and positional data integrity as far as “active” (visible) KML elements.

Ideally we want the same functionality Google Earth offered with a powerful API for bi-directional interaction and communication along with a much more robust 3D framework. Hoping Cesium will fit.

4. The Cesium version you’re using, your operating system and browser.

CesiumJS 1.63.1, Windows 10 and Chrome, eventually will need to support Centos 7 and Firefox.

Thank you!

2

Welcome to the Cesium community!

CesiumJS is all about adding data from all kinds of different sources and manipulating it, so this is definitely possible. Adding in multiple KML data sources is no different from adding in multiple CZML, GeoJSON, or any arbitrary 3d model/3D Tiles etc. This KML example shows you how to add different KML files one at a time:

Notice that this code example will clear data sources before adding any new ones, but there’s no need to do that in your application. So you could just add two data sources together like this:

viewer.dataSources.add(Cesium.KmlDataSource.load(’…/SampleData/kml/facilities/facilities.kml’, options));
viewer.dataSources.add(Cesium.KmlDataSource.load(’…/SampleData/kml/gdpPerCapita2008.kmz’, options));

``

By default, the viewer clock should be tracking the start/stop time of loaded in data sources (see “automaticallyTrackDataSourceClocks” in https://cesium.com/docs/cesiumjs-ref-doc/Viewer.html?classFilter=viewer). Off the top of my head, I think the default behavior should be what you expect, but if it isn’t, you’ll need to set that flag to false when creating the viewer, then get the clock of each of the KML data sources you added (see https://cesium.com/docs/cesiumjs-ref-doc/KmlDataSource.html?classFilter=KMLD#clock) which will tell you the start/stop time, and you can write a little script to then always get the earliest start and the latest stop to make the viewer timeline span that timespan.

Once you load your KML data source, all the loaded geometry becomes regular entities in CesiumJS (so it all becomes the same thing regardless of whether it was added as CZML, GeoJSON, or created directly with the CesiumJS API). This is a good starting point describing entities:

This GeoJSON code example shows you how to manipulate entities loaded in:

The “custom styling” one takes the flat polygons defined in the GeoJSON and extrudes them. Even though this example uses GeoJSON, the same code will work for your KMLDataSource. So this way you can enumerate all the loaded in objects and create UI to toggle them on/off.

1 Like
3

Wow, thank you for the incredibly detailed reply. This is exactly what I was hoping for. Will try and get something stood up in the next day or so. Thanks again!