CODEWITHSUNDEEP
javascriptviewercesiumjs
jdixon
jdixon

Reputation: 1

Cesium - add datasource from a button click event

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>

Upvotes: 0

Views: 2496

Answers (2)

emackey
emackey

Reputation: 12418

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.

Upvotes: 0

Mike LP
Mike LP

Reputation: 709

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

Upvotes: 0

Related Questions