# KML does not load when using a drop-down list

**URL:** https://community.cesium.com/t/kml-does-not-load-when-using-a-drop-down-list/14944
**Category:** CesiumJS
**Created:** [August 22, 2021, 11:18am UTC](https://community.cesium.com/t/kml-does-not-load-when-using-a-drop-down-list/14944 "2021-08-22T11:18:18Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![JC\_2021](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jc_2021/32/3476_2.png) [@JC\_2021](https://community.cesium.com/u/JC_2021)
#### Post date: [August 22, 2021, 11:18am UTC](https://community.cesium.com/t/kml-does-not-load-when-using-a-drop-down-list/14944/1 "2021-08-22T11:18:18Z")

</div>

I am new to Cesium so excuse this question which may have a very simple solution. I am trying to create a drop-down layer list as in this Sandcastle example. I changed the first entry to “Ports”, adding a kml file I created. However, the code does not work when I add this data source, so I am not sure what I am doing wrong as I only changed the data source path and the text to show on the drop-down list. Please let me know if you have any suggestions on what I am doing wrong here.  
[Sandcastle link](https://sandcastle.cesium.com/index.html#c=zVVRb9owEP4rVp6C1Dpse5kKrdaGapsobdW0k7ZlqkxygIXjRLYDpRP/fecESAhhmiZNGg9Gvrvv/N3n82XBFFlwWIIi50TCkvigeZ7QL4XNDZ2o2PupNIxLUKHT6YVygag0MzyVGmE/Q0lIxBJQ7GyTjOoIJNDSeFL6EaUP/NaI/jUmDWXAZBwxbQRQFsePaSrGTI1A5q7N8N0upDzN/gy8mDMSOvepMjp0TrZ2JAUCIvRNchlZksTtVDCypVCSoxOx+pQm4HZtYY2QmBkWpLlCESwjtwogW6GGiRjsoqhI2X4UQYL+mVcGewXVZ3jJ6DwRNcob4qWidWOn2lT01hvc9v9AkeHoG1lyMyOQjCGOISa2EHJKPg7uSYZXHbGMG/Y/a0apF7AkE2ADPVTLm8bZPSi/YP62232PEr7+OwmnL2Q4uiG4A6mLPj8lV3wO5IHH8BfC1VSpkztQ6M81aldpjBwtxdYGa9VnT6HGhpoZSLeqrKpir8Z6g4g0mlM9S3MRX0qeMAM4ISZMaOg1ADhDFDK1g6fKS0Eabjj2zhTM1eozVu0Y9JRzp+VAbMXH1C0SdZp0D0juUEaxaA7xtT1shQQKfO9IcHnDtei2JMfApSBJLgzPBC+qfdf9fXBTPaPypnjrfTXWxzr7R7FaCYtZGjqh7DRHrQINxl5SU7eWB60gSRdwKYRbnrjHu1gfmJxa0ps29nc2+nR7dfd0O7geHEEGBrIG0Jpo8DV4vB49+zd3/rBXfiqcE6evzUrAxbbsDzzJcLiSXAkXX4UBfBWonvbGOd6RoZHWW436Xh3aj/mC8Pi85UtHIsG0Rs8kFyLgr/juL/oexh9A7fPkcnq3ACXYyobN3lzclEZKad/DbTtydzE7fxnxCw)

---

<div class="post-metadata">

### Author: ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)
#### Post date: [August 23, 2021, 8:11pm UTC](https://community.cesium.com/t/kml-does-not-load-when-using-a-drop-down-list/14944/2 "2021-08-23T20:11:25Z")

</div>

@JC_2021

This is a great question! Thank you for bringing it to the community. In your sandcastle demo, I see that you added the following code.

```
{
  text: "Ports",
  onselect: function () {
    viewer.camera.flyHome(0);
    viewer.dataSources.add(
      Cesium.KmlDataSource.load(
        "C:/Cesium/Ports_exp.kml",
        options
      )
    );
  },
},

```

We are getting the error `Request has failed`. I suspect that CesiumJS is unable to find your file. I would double-check to ensure that you are adding the correct directory for your file.

A more robust alternative would be to [upload your data to Cesium ion](https://cesium.com/learn/3d-tiling/tiler-data-formats/). Once your data is uploaded, select “Open a complete code example”

 ![image](https://global.discourse-cdn.com/cesium/original/2X/8/827983d6eb20403c7081988ec0a59a709b4cfa55.png)

Upon opening the complete code example, you should see the following variable named `promise`.

```auto
var promise = Cesium.IonResource.fromAssetId(########)
  .then(function (resource) {
    return Cesium.KmlDataSource.load(resource, {
      camera: viewer.scene.camera,
      canvas: viewer.scene.canvas,
    });
  })
  .then(function (dataSource) {
    return viewer.dataSources.add(dataSource);
  })
  .then(function (dataSource) {
    return viewer.zoomTo(dataSource);
  })
  .otherwise(function (error) {
    console.log(error);
  });

```

In the CesiumJS documentation, we see that `KmlDataSource.load()` takes a promise.

[https://cesium.com/learn/cesiumjs/ref-doc/KmlDataSource.html?classFilter=kmldata](https://cesium.com/learn/cesiumjs/ref-doc/KmlDataSource.html?classFilter=kmldata)

In your sandcastle demo, you are using an invalid file path as a parameter. Try using the `promise` variable instead. Let me know if this works for you! I was able to get this working on my machine with the sample KML data that I uploaded. Here is a sandcastle demo that showcases what I put together.

> **[Cesium Sandcastle](https://sandcastle.cesium.com/index.html#c=zVZdc+I2FP0rGp5gJiugm7S7m2ymCWGzkBiyAZI4dacj5AsoliWvJCeBDv+9ks1XHEh32j70xYOuzrk6Ole6olpF54oIgxqgWRq3e4hQClojI9FUpgoxKRDRGowORI7BLSlwCCOScnOSgfsyAoE+o6AE0/ZkeE5Zl7Vbg1mr3mEt3RLXB7TR+rkVJXc3jfZHbEHfw/PIgbh/26x3bwfPnWk99m7v2WX/28x/8I3f/1br9uqRd/vlwY+/RJ0HeuDPKLtstJN7m6zTp++9madbMZ+Eduz1/WlnNq51+s19T9TwHb1Ixicd5tc/eo39YfhlcOfdNE/78jT+3vsQpX4y4M/tr/79cxSUDgMRiEeiUKJkzDTYray3eg3a+kABj+zkiXOiFZYPftk/OKhXAoEQNhMQ5VEqqHFeldUCX0F/ummEFJhUiWXGi5ifEUN6eU4uSbhi7C0ZCFESgyKf0CODJ1BYUxCA8+DeGmM161cYF1xg5pVD92O+VWe4UlFUuki4BmhMwnCT8G/SzqSM+3JXNmnTqSdbg42UoJRUq2xUCi25s268mFnwV1XMF7JFFPC0tP0mi5WDEs3GDSkMYQJUUHI8x5KJW01bWrbQ31XgbffnmZgeESEl2li11sC+lHxIlAciLbsMv+X7WdXcwLP5ZO/QlVT2spVWdbaigAO1c2tLKmsaWkrIxeERn36VMZRruS8vIMWSrgHojfO5iULLO7L3MrpwbzNYWQ/WUubLo7m3Y/cX3j16YmaCIB5CGEKInGj0Dp2fXaHElpWShBny//UnKGFc7ZE44eCA1Sjm1XGYXIFqZMp/qtU+4CiebezgP7Zw/IwuvEtkRyB0dqbfoVMWAbpmIfwD4zZc2RT3yqEf92i7S0Or0Um07vBX7mz154VDhcEPNKbiAeGSRlhPZMrDE8FiYtxLMCJcw2GBYPuFskpdk1nnxSAMM8yenTGY06l9JoKSsTN5j9myoD2KthNmiSpFua9ErlhGERpB2HSLTa2AjH+4A5xXeAO9Lckucm5IbN95lnCW7fZ97W1w0T2j0qJ585duzHed7N+zr7Mw65tBKRCVYlu1TycYV6Sib1sutIJYPsIJ5+V8xRe6s+81EeONx7+xiuFB57Q76Jw1z3YwewaSAtGFcM/v9ZveH43LbuPiMH8WSnulI22mHI6X2/6VxYnt+ShVvGxvhQF7K6x7ujpMbY0MplovPTqqblKPQvaIWPh5y6uGKLf/2uzMKOW8x2b23h8fVS3+FdVdTybG3UdQnEwdbFI/vsyDGOOjqh1uZ64Ks5rPEX8B)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

You can use this demo as a reference. Let me know if you have any other questions or concerns! I am looking forward to seeing your project grow 😃

-Sam

---

<div class="post-metadata">

### Author: ![James\_B](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/james_b/32/2424_2.png) [@James\_B](https://community.cesium.com/u/James_B)
#### Post date: [August 26, 2021, 3:33pm UTC](https://community.cesium.com/t/kml-does-not-load-when-using-a-drop-down-list/14944/3 "2021-08-26T15:33:17Z")

</div>

If you’re able to host your data online as Sam suggested, definitely do that!

If you need to load it locally, you should be aware that browsers implement strict limitations on pages that run from the local filesystem (`file://` URLs). I don’t think any browsers have supported dynamically loading data from a URL like “C:/Cesium/Ports\_exp.kml” for a long, long time.

I’m guessing you found Cesium because you want to write a web application that uses it. Whatever you’re using to serve your application during local development – NodeJS with `express`, Python `SimpleHTTPServer`, etc – can also be configured to serve your sample data. If your application is hosted on `https://localhost:8080/index.html`, you could have it serve `https://localhost:8080/data/ports.kml` and configure Cesium to use that URL.

---

<div class="post-metadata">

### Author: ![JC\_2021](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jc_2021/32/3476_2.png) [@JC\_2021](https://community.cesium.com/u/JC_2021)
#### Post date: [August 30, 2021, 3:02pm UTC](https://community.cesium.com/t/kml-does-not-load-when-using-a-drop-down-list/14944/4 "2021-08-30T15:02:31Z")

</div>

Thank you Sam, I will give this a try

---

<div class="post-metadata">

### Author: ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)
#### Post date: [August 31, 2021, 2:27pm UTC](https://community.cesium.com/t/kml-does-not-load-when-using-a-drop-down-list/14944/5 "2021-08-31T14:27:22Z")

</div>

@JC_2021

Great, please keep me in the loop!

A huge thanks to @James_B for providing some additional input 🚀 😀

-Sam
