You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/index.md
+29-8Lines changed: 29 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,24 @@
1
1
# How to Build a WorldWind Web App
2
2
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
6
22
7
23
## Lesson 1: HTML with Bootstrap
8
24
- 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
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.
50
68
51
69
The Navbar component is placed the beginning of the `<body>` element.
52
70
@@ -98,7 +116,6 @@ We'll add menu items for the features that we will implement in this tutorial, i
98
116
</form>
99
117
</div>
100
118
</nav>
101
-
102
119
```
103
120
104
121
### Main element
@@ -125,9 +142,13 @@ body {
125
142
}
126
143
```
127
144
128
-
### Cards: panels for layers and settings
129
145
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`.
0 commit comments