How to embed cesium map with .kml layers to website?

I downloaded cesium purely because I had been working on a project on Earth, but had no way of embedding it on my website and heard cesium was a good alternative.

How do I a) add a .kml layer to my cesium map and b) embed that map onto my website?

I'll admit that I am pretty rubbish at coding, by which I mean that I know next to nothing. Is it possible to do these two things without writing a line of code? To give an idea of my inexperience, I couldn't understand this (https://stackoverflow.com/questions/26910237/display-of-kml-in-cesium), and just copy and pasted the code to sandbox.

Also, I think the cesium for google earth developers link is broken.

I am using the latest version of chrome and cesium. The websites are wordpress and google sites

Thanks in advance!

Hey Yusuf,

If you’re talking about this google earth enterprise link:

This is an issue with their server that they haven’t fixed yet. If you just have a KML you want to show this should be a good example:

An even simpler one would just be:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var options = {

camera : viewer.scene.camera,

canvas : viewer.scene.canvas

};

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

``

All you have to do is provide a URL to your KML file there.

In terms of embedding it, again that should be pretty straightforward, but it’s a little hard without writing any code. This actually gives me the idea that it would be nice if we can make this even more straightforward, so you can just grab an example and paste that in your wordpress/site.

For the moment, I would start with the “HelloWorld.html” example that ships with Cesium. See if you can load your KML in that using the above code inside the tag. If you get that to work, putting it in WordPress would just involve copying the script tag and the cesiumContainer div onto your page, and including the Cesium.js file.

I haven’t used WordPress in a while so I can’t give you any more specific directions.

Actually, after doing a little bit of searching on this forum, I found this thread trying to do a similar thing:

https://groups.google.com/forum/#!searchin/cesium-dev/embed|sort:date/cesium-dev/R3O5KSL_HFw/MmpZQS4MBAAJ

And what he’s doing there is just using the cesium viewer that we host, and providing a link to the KML file in the URL. So if you had KML hosted in a URL like:

You could create a viewer that loads this data like this:

https://cesiumjs.org/Cesium/Build/Apps/CesiumViewer/index.html?source=https://cesiumjs.org/Cesium/Apps/SampleData/kml/facilities/facilities.kml

And then you could just use an iframe in WordPress, give it that link, and you should have that data displayed in Cesium, in your website, no code needed!

Of course the drawback here is that if you want to customize the map in any way you would have to write some code to do that. That’s kind of the big draw of Cesium is how much you can alter and customize. The other drawback to this is that since it’s cesiumjs.org that’s hosting the map, you might run into rate limits since you’re using the default Cesium token for loading imagery as opposed to getting your own token from ion (http://cesium.com/ion).

wow, Omar thanks so much for this; you dumbed it down to a level that even I could understand! This has really made my day and worked incredibly well. The actual embedding of the map was the easiest part, all I had to do was copy and paste the link and it did it for me. Stay safe and best of luck in your future work!