Using Cesium to visualize KML(KMZ) data

CesiumJS
1

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

I need some help on how to properly use the KmlDataSource option, for example; where to store (host) my KML file. Can anyone help?

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

var viewer = new Cesium.Viewer(“cesiumContainer”);

var options = {
camera: viewer.scene.camera,
canvas: viewer.scene.canvas };

var kmllayer = viewer.dataSources.add(Cesium.KmlDataSource.load(’…kmls\2011_caribou.kmz’, options));

My kmls folder is currently in my site root

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

I have 30 KML files that show a 3D heatmap with a predetermined style, each kml file represents a year. I have to find a way to animate the KML showing the change year by year in a web map. I found the CesiumJS and it seems like a viable option. Cesium ion works really well when I upload the data as a KMZ. It keeps the style and the correct height for each block, needless to say I’m pretty impressed with Cesium. However, do to licencing constraints I cannot use Cesium ion for the project. I want to use the KmlDataSource option in the CesiumJS library but I’m not sure what the best approach is for displaying my data. I’m very new to JavaScript and even newer to Cesium and I didnt really get a full grasp on how the KmlDataSource works.

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

Cesium 1.63.1

Windows 10

Preferably Google Chrome

2

Thanks for the kind words, and welcome to the Cesium community!

If you’re not using Cesium ion to host your KML files, you’ll need to host them on a web server. Either way, once you’re able to load the KML files into your CesiumJS scene, you’d have to write JavaScript code to detect when the year has changed in the timeline, and load the next KML file.

Is there anything particular about the Cesium ion licensing that prevents you from using it for your project? It would make this much easier, especially with upcoming tools we’re working on that’ll make it easier to drag and drop all those files and have them automatically appearing at specific time points.

3

Do you know of anything that can host KMZ/KML? I looked into GeoServer but I dont think it has the capabilities.

Its partly due to cost as we have limited funding that ion is not an option right now. It does sound like a really powerful set of tool though!

4

If they’re simply plain existing KML files, all you need is any generic HTTP static file server, nothing special.

5

For simple examples, you can store your kml in github and then use the ‘Raw’ link to the file like this:

https://raw.githubusercontent.com/hcarter333/rm-rbn-history/main/maps/First_Morning_Wireless_POTA_part_I.kml

7

Hello, how about visualizing geometry objects directly from a database like 3DcityDB without exporting or converting them? I’ve tried using a Flask API to connect the database with CesiumJS, but I don’t know how to retrieve the geometry from 3DcityDB and visualize it using CesiumJS. Can you help me please?

8

I don’t know if 3DcityDB is a database or not. I haven’t used the platform. Howerer, you can stream data into Cesium from a database hosted locally at least. I was able to use my CZML plugin to feed data into the Cesium viewer with a call like:

viewer.dataSources.add(Cesium.CzmlDataSource.load(http://127.0.0.1:8001/rm_toucans.czml?sql=select%0D%0A++tx_lng%2C%0D%0A++tx_lat%2C%0D%0A++rx_lng%2C%0D%0A++rx_lat%2C%0D%0A++rm_rnb_history_pres.timestamp%2C%0D%0A++rm_rnb_history_pres.dB%2C%0D%0A++rm_rnb_history_pres.Spotter%0D%0Afrom%0D%0A++rm_rnb_history_pres%0D%0Awhere%0D%0A++%28%0D%0A++db+%3E+100%0D%0A++%29+and%0D%0A++rm_rnb_history_pres.timestamp+%3E+%272023-09-17%27%0D%0A++and+rm_rnb_history_pres.timestamp+%3C+%272023-09-18%27%0D%0Aorder+by%0D%0A++rm_rnb_history_pres.timestamp+desc%0D%0A));

The link is the query into the database running locally on 127.0.0.1:8001