KML not loading in cesuim Globe

CesiumJS
1

Is there other way to load the kml file on cesium globe because my kml file is not loading on the globe i have included my .html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Use the Viewer Widget to start building new applications or easily embed Cesium into existing applications.">
    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.9/KmlDataSource.js"></script>
  <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.9/Cesium.js"></script>
    
  <script type="text/javascript">
    require.config({
        baseUrl : '../../../Source',
        waitSeconds : 60
    });
    </script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html" data-sandcastle-title="Cesium KML">
<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<script id="cesium_sandcastle_script">
var builtInKml = 'MY KML FILE';
  
    function useBuiltInKml() {
   var viewer = new Cesium.Viewer('cesiumContainer');
   viewer.extend(Cesium.viewerDynamicObjectMixin);

    alert("222");
        var kmlDataSource = new Cesium.KmlDataSource();
    
        kmlDataSource.loadUrl(builtInKml, 'Built-in KML');
        viewer.dataSources.add(kmlDataSource);
    Sandcastle.finishedLoading();
        // Zoom in a little closer...
     //Give the coordinates of your bounding box
        
      var west = Cesium.Math.toRadians(28.5263327654348);
        var south = Cesium.Math.toRadians(77.38484280605337);
        var east = Cesium.Math.toRadians(28.53339715213986);
        var north = Cesium.Math.toRadians(77.39361675250349);
    
        var extent = new Cesium.Extent(west, south, east, north);
    viewer.scene.camera.viewExtent(extent);
    Sandcastle.finishedLoading();
    }
useBuiltInKml()

</script>
</body>
</html>

Thanks

Vaibhav

2

I was going through the code and i found that check2 alert was not working which means there is a problem in line ( var kmlDataSource = new Cesium.KmlDataSource():wink:

Code:

alert(“check1”);

var kmlDataSource = new Cesium.KmlDataSource();

alert(“check2”);

Regards,

vaibhav

3

KML support is not part of the released version yet. It’s being developed in the kml branch: https://github.com/AnalyticalGraphicsInc/cesium/tree/kml so you’ll have to clone from GitHub and build Cesium yourself.

4

Hi Scott,

Thanks for the Link. After building Cesium from the link i copied the Cesium.js and KmlDataSource.js in a separate folder and than ran the file but no change in output occurred.

I was going through the code and i found that check2 alert was not working which means there is a problem in line ( var kmlDataSource = new Cesium.KmlDataSource():wink:

Code:

alert(“check1”);

var kmlDataSource = new Cesium.KmlDataSource();

alert(“check2”);

Regards,

vaibhav

5

I took clone of kml branch from GitHub : (https://github.com/AnalyticalGraphicsInc/cesium/tree/kml)and builded Cesium now facing problem adding kmldatasources in the viewer.

kmlDataSource.loadUrl('C:/xampp/htdocs/kmlcesium/Apps/Temp.kml').then(function(){
            alert("555");
            viewer.dataSources.add(kmlDataSource);
            alert("666");
            viewer.homeButton.viewModel.command();
            alert("777")
                         })

It alerts till 555 . I am unable to understand whats the problem in viewer.dataSources.add(kmlDataSource);
If needed i will upload my full code and KML file.

Regards,

vaibhav

6

Browsers cannot load data from file URLs like: ‘C:/xampp/htdocs/kmlcesium/Apps/Temp.kml’. You must host the KML file on an HTTP server.

7

I hosted my kml, as ‘http://localhost/kmlcesium/KMLOutputSimple.kml’. I build-ed the kml branch downloaded from github and tried to test cesium.js by running simple helloworld.html i figured out that it was not working that means cesium.js is not building properly.

regards,

vaibhav

8

I then downloaded already build folder of cesium-b27 and tested the same helloworld.html(from kml branch) by putting it in cesium-b27 folder and there it ran successfully . Am i thinking correct that cesium.js which i am using in kml branch is correct.

I will also like to mention that while manually building kml branch it builded absolutely error free, and after that i used the cesium.js

regards,

vaibhav

9

This is the error
(
1.Error: Script file not found: http://localhost:81/cesium-kml/Build/Cesium/Workers/transferTypedArrayTest.js

2.Error: Script file not found: http://localhost:81/cesium-kml/Build/Cesium/Workers/cesiumWorkerBootstrapper.js

) which i am getting after running helloworld.html example of kml branch. I went through the build file and i found this part of code in build.xml.

<exclude name="cesiumWorkerBootstrapper.js" /> <exclude name="transferTypedArrayTest.js" /> <exclude name="createTaskProcessorWorker.js" />

why these js need to be excluded and if they are excluded than why the error for these js files is coming.

Regards,

vaibhav