index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 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>dojo client</title>
  <link href="images/favicon.png" rel="icon">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="lib/Cesium143/Widgets/widgets.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <link href="css/legend.css" rel="stylesheet">
</head>

<body>
  <div id="wrapper">
    <div id="sidebar">
      <form>
        <div class="row">
          <div class="col-8">
            <div class="form-group">
              <label>host</label>
              <input type="text" class="form-control" id="host" />
            </div>
          </div>
          <div class="col-4">
            <div class="form-group">
              <label>port</label>
              <input type="text" class="form-control" id="port" />
            </div>
          </div>
        </div>
        <div class="form-group">
          <label>endpoint</label>
          <input type="text" class="form-control" id="endpoint" />
        </div>

        <div class="form-group">
          <label>layers</label>
          <select class="form-control" id="layersList" size="10"></select>
          <button id="getLayers" class="btn btn-primary btn-block" type="button">Get Layers</button>
        </div>

        <div class="form-group">
          <label>bounding box</label>
          <input id="boundingBoxInput" type="text" class="form-control mb-2" />
          <button id="setBoundingBox" class="btn btn-primary btn-block" type="button">Set</button>
        </div>
        <div class="form-group">
          <label for="stylesList">style</label>
          <select class="form-control" id="stylesList">
            <option>Default</option>
            <option>Node Level</option>
          </select>
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="toggleFreezeScene" disabled>
          <label class="form-check-label" for="toggleFreezeScene">Freeze Scene</label>
        </div>
      </form>
    </div>
    <div id="cesiumContainer"></div>
    <div id="statusBar">
      <div id="statusBarMessage"></div>
      <div id="statusBarLoader" class="loader"></div>
    </div>
  </div>
</body>
<script src="lib/jquery/jquery-3.1.1.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/Cesium143/Cesium.js"></script>
<!-- configure Dojo -->
<script>
  var dojoConfig = {
    async: true,
    baseUrl: './',
    packages: [
      { name: "helpers", location: "lib/helpers" },
      { name: "state", location: "lib/state" },
      { name: "CesiumAdaptor", location: "lib/CesiumAdaptor" },
      { name: "mappers", location: "lib/mappers" },
      { name: "gui", location: "lib/gui" },
      { name: "style", location: "lib/style" }
    ]
  };
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js"></script>
<script src="lib/main.js"></script>

</html>