Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<!-- 
    A sample framework for ESA-NASA Web WorldWind applications.
    Author: Bruce Schubert
    License: MIT
    See: https://worldwind.arc.nasa.gov/web/ 
-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="ESA-NASA Web WorldWind application framework using Bootstrap and KnockoutJS by Bruce Schubert">
  <meta name="author" content="Bruce Schubert">
​
  <title>WebWorldWind Example App</title>
​
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/slate/bootstrap.min.css" type="text/css" />
</head>
​
</head>
​
<body>
  <!-- Main Menu NavBar -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!-- Branding and 'hamburger' menu -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="https://worldwind.arc.nasa.gov/web" target="_blank">ESA-NASA Web WorldWind</a>
      </div>
      <!-- Navigation links, Projections and Search Box -->
      <div class="collapse navbar-collapse" id="main-navbar">
        <ul class="nav navbar-nav" role="tablist">
          <!-- Home -->
          <li class="active">
            <a href="#home" role="tab" data-toggle="tab">
              <span class="glyphicon glyphicon-home visible-sm-block" aria-hidden="true" style="padding-top:4px; padding-bottom:4px"></span>
              <span class="hidden-sm" aria-hidden="true">Home</span>
            </a>
          </li>
          <!-- Layers -->
          <li>
            <a href="#layers" role="tab" data-toggle="tab">
              <span class="glyphicon glyphicon-list visible-sm-block" aria-hidden="true" style="padding-top:4px; padding-bottom:4px"></span>
              <span class="hidden-sm" aria-hidden="true">Layers</span>
            </a>
          </li>
          <!-- Markers -->
          <li>
            <a href="#markers" role="tab" data-toggle="tab">
              <span class="glyphicon glyphicon-map-marker visible-sm-block" aria-hidden="true" style="padding-top:4px; padding-bottom:4px"></span>
              <span class="hidden-sm" aria-hidden="true">Markers</span>
            </a>
          </li>
        </ul>
        <!-- Search Box -->
        <div>
          <form id="search" class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Destination" id="searchText" data-bind="value: searchText, valueUpdate: 'keyup', event: {keypress: onEnter}" />
            </div>
            <button id="searchButton" class="btn btn-primary" type="submit" data-bind="click: $root.performSearch">Go To</button>
          </form>
        </div>
        <ul class="nav navbar-nav navbar-right">
          <!-- Projections dropdown -->
          <li id="projections" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span data-bind="text: currentProjection"></span> <span class="caret"></span></a>
            <!-- Bind the list to the 'projections' observableArray -->
            <ul id="projections-menu" class="dropdown-menu" data-bind="foreach: $root.projections">
              <li data-bind="click: $root.changeProjection">
                <a><span data-bind="text: $data"></span></a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
  <!-- /NavBar -->
​
  <!-- Content -->
  <div class="container-fluid">
    <div class="row">
      <!-- Sidebar -->
      <div id="left-sidebar" class="col-sm-4 col-md-3 sidebar-left tab-content">
​
        <!-- Home tab -->
        <div id="home" class="tab-pane active" role="tabpanel">
          <div class="section-heading">
            <h4 class="sub-header">
                                <span class="glyphicon glyphicon-home" aria-hidden="true" style="padding-right:5px;"></span>
                                Home 
                                <a class="section-toggle" data-toggle="collapse" href="#home-body"></a>
                            </h4>
          </div>
          <div id="home-body" class="section-body collapse in">
            <p>This is a 3D virtual globe application built from <a href="https://worldwind.arc.nasa.gov/web">ESA-NASA Web WorldWind</a> and the <a href="https://getbootstrap.com/docs/3.3/">Bootstrap</a> and <a href="http://knockoutjs.com/">KnockoutJS</a>              libraries.</p>
            <p>It features a 3D globe and 2D map projections, layer management, markers and a place name finder.
            </p>
          </div>
        </div>
        <!-- /Home -->
​
        <!-- Layers tab -->
        <div id="layers" class="tab-pane" role="tabpanel">
          <div class="section-heading">
            <h4 class="sub-header">
                                <span class="glyphicon glyphicon-list" aria-hidden="true" style="padding-right:5px;"></span>
                                Layers 
                                <a class="section-toggle" data-toggle="collapse" href="#layers-body">
                                </a>
                            </h4>
          </div>
          <div id="layers-body" class="section-body collapse in">
            <!-- layer buttons bound to 'layers' observableArray -->
            <!-- the button's active class is bound to 'layerEnabled' observable -->
            <div class="list-group" data-bind="foreach: layers">
              <button class="list-group-item btn btn-block" data-bind="click: $root.toggleLayer, css: {active: $data.layerEnabled}">
                <span data-bind="text: $data.displayName"></span>
              </button>
            </div>
          </div>
        </div>
        <!-- /Layer -->
​
        <!-- Markers tab -->
        <div id="markers" class="tab-pane" role="tabpanel">
          <div class="section-heading">
            <h4 class="sub-header">
                                <span class="glyphicon glyphicon-map-marker" aria-hidden="true" 
                                      style="padding-right:5px;"></span>
                                Markers
                                <a class="section-toggle" data-toggle="collapse" href="#markers-body"></a>
                            </h4>
          </div>
          <div id="markers-body" class="section-body collapse in">
            <!-- Bind the list to the 'markers' observableArray -->
            <ul id="markers-list" data-bind="foreach: $root.markers">
              <li class="btn-group btn-block btn-group-sm">
                <!-- Goto Button -->
                <button type="button" class="btn btn-default" data-bind="click: $root.gotoMarker">
                  <span><img width="16px" height="16px" data-bind="attr:{src: $data.attributes.imageSource}" />  </span>
                  <span data-bind="text: $data.label"></span>
                </button>
                <!-- Edit Button -->
                <button type="button" class="btn btn-default glyphicon glyphicon-pencil" data-bind="click: $root.editMarker"></button>
                <!-- Delete Button -->
                <button type="button" class="btn btn-default glyphicon glyphicon-trash" data-bind="click: $root.removeMarker"></button>
              </li>
            </ul>
          </div>
        </div>
        <!-- /Markers -->
      </div>
      <!-- /Sidebar -->
​
      <!-- Main Content -->
      <div id="globe" class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main" style="height: calc(100vh - 100px);">
        <div class="row" style="height: 100%;">
          <!-- Globe -->
          <div class="col-md-12" style="height: 100%;">
            <div class="section-heading" style="width: 100%">
              <h4 class="sub-header">
                <span class="glyphicon glyphicon-globe" aria-hidden="true" style="padding-right:5px;"></span>
                Globe
                <!-- Add Marker button and palette -->
                <span class="btn-group" style="float: right">
                  <button type="button" 
                          class="btn btn-primary btn-sm"
                          style="padding-top: 0; padding-bottom: 0;"
                          data-bind="click: $root.addMarker">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <img width="28px" height="28px;" 
                         data-bind="attr:{src: $root.selectedMarkerImage}"/>
                  </button>
                  <button type="button" 
                          class="btn btn-primary btn-sm dropdown-toggle" 
                          data-toggle="dropdown" 
                          aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Markers Dropdown</span>
                  </button>
                  <!-- Bind the list to the 'markerPalette' observableArray -->
                  <ul id="marker-palette" 
                      class="dropdown-menu" 
                      style="left: initial; right: 0; min-width: 30px"
                      data-bind="foreach: markerPalette">
                    <li data-bind="click: $root.selectedMarkerImage">
                      <a><img width="28px" height="28px;" data-bind="attr:{src: $data}"/></a>
                    </li>
                  </ul>
                </span>
              </h4>
            </div>
            <!-- NASA Web World Wind -->
            <canvas id="canvasOne" style="width: 100%; height: 100%; 
                                    background-color: rgb(36,74,101); 
                                    border:1px solid #000000;" data-bind="style: { cursor: dropIsArmed() ? 'crosshair' : 'default' }">
              Try Chrome or FireFox.
            </canvas>
            <!-- NASA Web World Wind -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Edit Marker Modal -->
  <div class="modal fade" id="editMarkerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Edit Marker</h4>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <!--             <span class="input-group-addon" id="name-addon">Name</span>
                                        <input type="text" class="form-control" id="marker-name" aria-describedby="name-addon">
                            -->
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
​
​
  <!-- Libraries -->
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
  <script src="https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/worldwind.min.js"></script>
​
  <!-- Custom auto-expand/collapse behaviors -->
  <script language="javascript">
    // Auto-expand section-bodies when not small
    $(window).resize(function() {
      if ($(window).width() >= 768) {
        $('.section-body').collapse('show');
      }
    });
    // Auto-collapse navbar when tab items are clicked
    $('.navbar-collapse a[role="tab"]').click(function() {
      $(".navbar-collapse").collapse('hide');
    });
    // Auto-scroll-into-view expanded dropdown menus
    $('.dropdown').on('shown.bs.dropdown', function(event) {
      event.target.scrollIntoView(false); // align to bottom   
    });
  </script>
​
</body>
​
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
emxsyspro
0viewers