Skip to content

Commit 1f6241f

Browse files
committed
Work in progress.
1 parent 42b7786 commit 1f6241f

2 files changed

Lines changed: 29 additions & 9 deletions

File tree

docs/index.md

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
11
# How to Build a WorldWind Web App
22

3-
In this tutorial, you will learn how to build WorldWind web app using
4-
Bootstrap and Knockout. Upon completion you will have a feature-rich
5-
web application template ready for customization.
3+
In this tutorial, you will learn how to build WorldWind web app using Bootstrap and Knockout. Upon completion
4+
you will have a feature-rich, responsive web application ready for customization. The finished web app features a
5+
WorldWind globe with layer management and geocoding. The WorldWind topics that are covered include:
6+
7+
- Initializing a WorldWind globe (3D globe and 2D map projections)
8+
- Configuring and managing layers and settings
9+
- Place name searches and geocoding
10+
- Creating placemarks
11+
- Go to locations
12+
- Multi-globe support
13+
14+
This tutorial makes use of the [Bootstrap](https://getbootstrap.com/docs/4.0/getting-started/introduction/) and [Knockout](http://knockoutjs.com/index.html) libraries.
15+
Bootstrap is the world's most popular framework for building responsive, mobile-first sites.
16+
Knockout is a library that helps you update sections of UI that update dynamically
17+
(e.g., changing depending on the user's actions or when a WorldWind component changes).
18+
19+
## Quick Start
20+
21+
Do you want to get started with
622

723
## Lesson 1: HTML with Bootstrap
824
- Responsive web app template for mobiles, tablets and desktops.
@@ -44,9 +60,11 @@ Just before the `</body>` tag, add the JavaScript dependencies for BootStrap and
4460
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
4561
```
4662

47-
### NavBar: main-menu
63+
### NavBar: Main menu
4864

49-
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.
65+
Our web app uses a Bootstrap [Navbar](https://getbootstrap.com/docs/4.0/components/navbar/)
66+
component to render the main menu at the top of the page. The Navbar is responsive:
67+
it automatically adjusts its layout based on the page width.
5068

5169
The Navbar component is placed the beginning of the `<body>` element.
5270

@@ -98,7 +116,6 @@ We'll add menu items for the features that we will implement in this tutorial, i
98116
</form>
99117
</div>
100118
</nav>
101-
102119
```
103120

104121
### Main element
@@ -125,9 +142,13 @@ body {
125142
}
126143
```
127144

128-
### Cards: panels for layers and settings
129145

130-
We'll use Bootstrap [Card](https://getbootstrap.com/docs/4.0/components/card/) components to host the WorldWind layers and settings content.
146+
### Cards: Panels for layers and settings
147+
148+
We'll use Bootstrap [Card](https://getbootstrap.com/docs/4.0/components/card/) components
149+
to host the WorldWind layers and settings content. Bootstrap includes a few options for
150+
laying out a series of cards. We'll use Masonry-like columns by wrapping them in `.card-columns`.
151+
131152

132153

133154

docs/lesson-1.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)