How to use zoomTo with kml datasource

CesiumJS
1

Hi!
I have a kml file that i have loaded with the method loadUrl. This file is well loaded in the viewer but I can’t zoom into it programmatically using the method zoomTo.
Here is my code:
<script>
var dataSource1 = new Cesium.KmlDataSource();
dataSource1.loadUrl(“http://localhost:7299/Scripts/Cesium/datasource/MadaTrek.kml”);
viewer.dataSources.add(dataSource1);
</script>
I have looked within the code ‘gx KML extensions - Bike Ride’ in sandCastle example but I can’t adapt my code to it. I got an error when calling the method
viewer.dataSources.add(Cesium.KmlDataSource.load(‘http://localhost:7299/Scripts/Cesium/datasource/MadaTrek.kml’)).then(function(dataSource){
            
        });
Any help will be welcomed
Regards.

2

It looks like you aren’t actually declaring an instance of the viewer object. Assuming you are, can you post a more complete code example. Nothing else jumps out at me as incorrect.

3

Thanks. this is my code:
<script>
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
                timeline: false,
                animation: false,
                homeButton: false,
                screenModePicker: false,
                navigationHelpButton: false,
                sceneMode: Cesium.SceneMode.SCENE3D
            }
        );
        var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
            url: ‘//assets.agi.com/stk-terrain/world’,
            requestWaterMask: true,
            requestVertexNormals: true
        });
viewer.terrainProvider = cesiumTerrainProviderMeshes;
var dataSource1 = new Cesium.KmlDataSource();
dataSource1.loadUrl(“http://localhost:7299/Scripts/Cesium/datasource/MadaTrek.kml”);
viewer.dataSources.add(dataSource1);
viewer.zoomTo(dataSource1)
</script>
And when I have adapted my code to ‘gx KML extensions - Bike Ride’ example, I have done like below:
  viewer.dataSources.add(Cesium.KmlDataSource.load(‘http://localhost:7299/Scripts/Cesium/datasource/MadaTrek.kml’)).then(function(dataSource){
       viewer.zoomTo(dataSource);
});
So I can’t see how to adapt it with the gx kml example.
Regards

4

Is your page running on the same server as your KML file? Does it work without the zoomTo? This code is perfectly valid and works when I use it with one of my own KML files.

5

Yes kml file is on the same server as my page.
and yes, this code doesn’t work even without the zommTo
<script>
viewer.dataSources.add(Cesium.KmlDataSource.load(‘http://localhost:7299/Scripts/Cesium/datasource/MadaTrek.kml’)).then(function(dataSource){
       viewer.zoomTo(dataSource);
});
</script>
I got an error: undefined function on the Cesium.KmlDataSource.load
Regards.

6

Can you share the KML file?

7

I have joined the file with this message if you can test it.
Regards

doc.kml (2.88 MB)

8

I solved my problem by using the camera property of the viewer object. This is what I did:

but the zoomTo or flyTo method of a viewer object didn’t still work.
Regards