Cesium - add datasource from a button click event

Question

I am new to Cesium (and JavaScript) and I am trying to create a web page where the user can select a KML file, click a load button and have the KML load into the Cesium viewer. I have set up a test page with a hard-coded file for now, but when I click the button it does not load the KML. How do I accomplish this? Here is my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
  <title>Map Demo of Cesium</title>
  <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
  <style type="text/css">
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  </style>
<script type="text/javascript">
function load_file()
    cesiumContainer.viewer.dataSources.removeAll(); 
    cesiumContainer.viewer.dataSources.add(Cesium.KmlDataSource.load(../apps/SampleData/kml/MyData.kml'));          
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label">Select a file for viewing:</asp:Label>
        <br />
        <asp:DropDownList ID="DropDownList1" runat="server" Width="208px">
        </asp:DropDownList>
        <br />    
        <asp:Button ID="Button1" runat="server" Text="View" OnClientClick ="load_file()" />
        <br />
        <br />
    </div>
  <div id="cesiumContainer" ></div>
  <script type="text/javascript" >
    var viewer = new Cesium.Viewer('cesiumContainer', 
        {imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
            url : '//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        }),

        baseLayerPicker : false, timeline : false, animation : false
    });
var layers = viewer.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
        url : '//server.arcgisonline.com/ArcGIS/rest/services/reference/World_Boundaries_and_Places/MapServer'
}));    

        viewer.homeButton.viewModel.command();  

    viewer.camera.setView({position  : Cesium.Cartesian3.fromDegrees(10.00, 45.0, 4500000.0)});


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

After trying the answers provided so far this is still not working. What it appears to be doing is recreating the viewer each time the button is clicked. So while it may be loading the kml file the new instance of the viewer is wiping it out. How do I get it to only create the viewer once, then only load the file when the button is clicked? — jdixon, Jul 16 '15 at 14:30

score 0 · Answer 1 · answered Jul 10 '15 at 15:33

0

Check out the Cesium for Google Earth Developers website. The KML fetching example sounds like it's exactly what you need.

answered Jul 10 '15 at 15:33

Mike LP

671
8
13

score 0 · Answer 2 · answered Jul 10 '15 at 17:43

Be careful using old ASP.NET pages with a client-heavy app like Cesium. ASP.NET uses a lot of server interactions that can potentially reload the page, causing the user to lose their place in Cesium. ASP.NET is obsolete, replaced by RAZOR and MVC, so if you're just starting to learn Microsoft's various web technologies you should start there instead.

That said, if you want to fix the above example, try this:

Fix the missing quote at the start of the KML filename
Move the load_file function to the very bottom, just before the end of the last script tag
Remove the cesiumContainer. prefix from both viewer references in the load_file function.

Reload the page and hit F12 to bring up the developer tools (Chrome, Firefox, and IE11), then look for any remaining errors in the console tab.

Cesium - add datasource from a button click event

2 Answers2