Skip to content

Commit 0045a81

Browse files
emxsysemxsys
committed
Work in progress.
1 parent ad8f285 commit 0045a81

1 file changed

Lines changed: 88 additions & 1 deletion

File tree

‎docs/index.md‎

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,97 @@ In this tutorial, you will learn how to build WorldWind web app using
44
Bootstrap and Knockout. Upon completion you will have a feature-rich
55
web application template ready for customization.
66

7-
## Lesson 1: HTML scaffolding with Bootstrap
7+
## Lesson 1: HTML with Bootstrap
8+
- Responsive web app template
9+
- Menus, panels
10+
- Customizable, themes, CSS
811

12+
### Customizing the BootStrap 4 basic template
13+
To start from scratch, you download this template: [BootStrap Starter Template](https://getbootstrap.com/docs/4.0/examples/starter-template/)
14+
15+
16+
#### Dependencies
17+
18+
In the `<head>` section of you web page, include the CSS for Bootstrap 4 and Font Awesome via CDNs.
19+
20+
```html
21+
<!-- Bootstrap 4.0 CSS compiled and minified -->
22+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
23+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
24+
25+
<!-- Font Awesome icons (see: https://fontawesome.com/icons?d=gallery) -->
26+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
27+
integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
28+
29+
```
30+
31+
Just before the `</body>` tag, add the JavaScript dependencies for BootStrap and JQuery
32+
33+
```html
34+
<!-- JavaScript placed at the end of the document so the page loads faster -->
35+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
36+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
37+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
38+
```
39+
40+
#### NavBar
41+
42+
Our web app will use a Bootstrap [Navbar](https://getbootstrap.com/docs/4.0/components/navbar/) component to render our main menu at the top of the page. The Navbar is responsive: it will automatically adjust its layout based on the page width making it
43+
44+
The Navbar component is placed the beginning of the `<body>` element.
45+
46+
We'll add menu items for the features that we will implement in this tutorial.
47+
48+
```html
49+
<!--Main Menu-->
50+
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
51+
52+
<!--Branding icon and text-->
53+
<a class="navbar-brand" href="https://worldwind.arc.nasa.gov/web">
54+
<img src="images/nasa-logo_32.png" width="30" height="30" class="d-inline-block align-top" alt="">
55+
WorldWind
56+
</a>
57+
58+
<!--Hamburger menu displayed on small screens/windows-->
59+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
60+
<span class="navbar-toggler-icon"></span>
61+
</button>
62+
63+
<!--Main menu content-->
64+
<div class="collapse navbar-collapse" id="main-menu">
65+
<ul class="navbar-nav mr-auto">
66+
<!--Layers-->
67+
<li class="nav-item">
68+
<a class="nav-link" data-toggle="collapse" href="#layers" role="button">
69+
<span class="fas fa-list" aria-hidden="true"></span>
70+
<span class="d-md-none d-lg-inline" aria-hidden="true">Layers</span>
71+
</a>
72+
</li>
73+
<!--Settings-->
74+
<li class="nav-item">
75+
<a class="nav-link" data-toggle="collapse" href="#markers" role="button">
76+
<span class="fas fa-map-marker-alt" aria-hidden="true"></span>
77+
<span class="d-md-none d-lg-inline" aria-hidden="true">Markers</span>
78+
</a>
79+
</li>
80+
</ul>
81+
<form class="form-inline">
82+
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
83+
<button class="btn btn-outline-success" type="submit">
84+
<span class="fas fa-search" aria-hidden="true"></span>
85+
</button>
86+
</form>
87+
</div>
88+
</nav>
89+
90+
```
991
## Lesson 2: WorldWind Globe
92+
- Add a globe to the application
93+
- Add elemental layers
1094

1195
## Lesson 3: Layer Management
96+
- Configure layers and layer categories
97+
- Enable and disable layers
98+
- Configure WMS/WMTS layers
1299

13100
## Lesson 4: Geocoding

0 commit comments

Comments
 (0)