# How to ZOOM to KML ?

**URL:** <https://community.cesium.com/t/how-to-zoom-to-kml/3561>\
**Category:** CesiumJS\
**Created:** [January 14, 2016, 10:45am UTC](https://community.cesium.com/t/how-to-zoom-to-kml/3561 "2016-01-14T10:45:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Roberto\_Angeletti](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@Roberto\_Angeletti](https://community.cesium.com/u/Roberto_Angeletti)\
**Post date:** [January 14, 2016, 10:45am UTC](https://community.cesium.com/t/how-to-zoom-to-kml/3561/1 "2016-01-14T10:45:21Z")

</div>

Hello,

I need to zoom to my loaded KML in javascript.

This is my source code inside my index.html

// Load my QGIS published KML -----------------------------

&nbsp;&nbsp;&nbsp;&nbsp;var viewer = new Cesium.Viewer('cesiumContainer');

&nbsp;&nbsp;&nbsp;&nbsp;viewer.dataSources.add(Cesium.KmlDataSource.load('gaetaDoc.kml'));  
&nbsp;&nbsp;&nbsp;&nbsp;  
// How to FlyTo or ZoomTo the extents of a KML file? Something like:  
// viewer.camera.flyTo(

What is the correct syntax ?

Thank you for any help

Roberto

---

<div class="post-metadata">

**Author:** ![Yonatan\_Kra](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/yonatan_kra/32/2298_2.png) [@Yonatan\_Kra](https://community.cesium.com/u/Yonatan_Kra)\
**Post date:** [January 14, 2016, 11:39am UTC](https://community.cesium.com/t/how-to-zoom-to-kml/3561/2 "2016-01-14T11:39:50Z")

</div>

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

var promise = viewer.dataSources.add(Cesium.KmlDataSource.load(‘gaetaDoc.kml’));

// when the DS done loading datam fly to it (flyTo would get the resolved value which is the filled data source)

Cesium.when(promise, viewer.flyTo);

---

<div class="post-metadata">

**Author:** ![Roberto\_Angeletti](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@Roberto\_Angeletti](https://community.cesium.com/u/Roberto_Angeletti)\
**Post date:** [January 14, 2016, 2:39pm UTC](https://community.cesium.com/t/how-to-zoom-to-kml/3561/3 "2016-01-14T14:39:00Z")

</div>

Yonatan,

I changed your code and now it works :

var promise = viewer.dataSources.add(Cesium.KmlDataSource.load('gaetaDoc.kml'));  
Cesium.when(viewer.flyTo(promise));

Correct ?

Thank you for the suggestion

Roberto

---

<div class="post-metadata">

**Author:** ![Yonatan\_Kra](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/yonatan_kra/32/2298_2.png) [@Yonatan\_Kra](https://community.cesium.com/u/Yonatan_Kra)\
**Post date:** [January 14, 2016, 3:16pm UTC](https://community.cesium.com/t/how-to-zoom-to-kml/3561/4 "2016-01-14T15:16:17Z")

</div>

Yea. I forgot that flyTo also accepts a promise. Cheers 🙂

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [January 14, 2016, 9:56pm UTC](https://community.cesium.com/t/how-to-zoom-to-kml/3561/5 "2016-01-14T21:56:46Z")

</div>

You don’t need the Cesium.when either. The below works fine.

var promise = viewer.dataSources.add(Cesium.KmlDataSource.load(‘gaetaDoc.kml’));  
viewer.flyTo(promise);

---

<div class="post-metadata">

**Author:** ![Roberto\_Angeletti](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@Roberto\_Angeletti](https://community.cesium.com/u/Roberto_Angeletti)\
**Post date:** [January 15, 2016, 7:06am UTC](https://community.cesium.com/t/how-to-zoom-to-kml/3561/6 "2016-01-15T07:06:45Z")

</div>

Yes, thanks. But, "Cesium.when(viewer.flyTo(promise));" zoom only  
after fully loaded KML.  
In my case it works better.

Great !

🙂

Roberto

---

<div class="post-metadata">

**Author:** ![Yonatan\_Kra](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/yonatan_kra/32/2298_2.png) [@Yonatan\_Kra](https://community.cesium.com/u/Yonatan_Kra)\
**Post date:** [January 15, 2016, 7:24am UTC](https://community.cesium.com/t/how-to-zoom-to-kml/3561/7 "2016-01-15T07:24:51Z")

</div>

They are both supposed to run after the KML fully loaded. The  
"Cesium.when(viewer.flyTo(promise)" is supposed to give you the ability to  
do something after flight was over -  
Cesium.when(viewer.flyTo(promise, someMethodAfterFlight)  
Haven't tried either, but according to docs it's supposed to work 🙂