├── img
├── logo.png
└── DOC_Tutorial_header.jpg
├── font-awesome
├── fonts
│ ├── FontAwesome.otf
│ ├── fontawesome-webfont.eot
│ ├── fontawesome-webfont.ttf
│ ├── fontawesome-webfont.woff
│ └── fontawesome-webfont.woff2
├── less
│ ├── fixed-width.less
│ ├── bordered-pulled.less
│ ├── larger.less
│ ├── list.less
│ ├── font-awesome.less
│ ├── core.less
│ ├── stacked.less
│ ├── rotated-flipped.less
│ ├── path.less
│ ├── animated.less
│ ├── mixins.less
│ ├── variables.less
│ └── icons.less
├── scss
│ ├── _fixed-width.scss
│ ├── _bordered-pulled.scss
│ ├── _larger.scss
│ ├── _list.scss
│ ├── font-awesome.scss
│ ├── _core.scss
│ ├── _stacked.scss
│ ├── _rotated-flipped.scss
│ ├── _path.scss
│ ├── _animated.scss
│ ├── _mixins.scss
│ └── _variables.scss
└── css
│ ├── font-awesome.min.css
│ └── font-awesome.css
├── fonts
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
├── css
├── parallax.css
└── creative.css
├── js
├── parallax.js
├── cbpAnimatedHeader.js
├── creative.js
└── bootstrap.min.js
└── README.md
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/img/logo.png
--------------------------------------------------------------------------------
/img/DOC_Tutorial_header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/img/DOC_Tutorial_header.jpg
--------------------------------------------------------------------------------
/font-awesome/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/font-awesome/fonts/FontAwesome.otf
--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/font-awesome/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/font-awesome/fonts/fontawesome-webfont.eot
--------------------------------------------------------------------------------
/font-awesome/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/font-awesome/fonts/fontawesome-webfont.ttf
--------------------------------------------------------------------------------
/font-awesome/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/font-awesome/fonts/fontawesome-webfont.woff
--------------------------------------------------------------------------------
/font-awesome/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CommerceDataService/tutorial_mapbox_part2/HEAD/font-awesome/fonts/fontawesome-webfont.woff2
--------------------------------------------------------------------------------
/font-awesome/less/fixed-width.less:
--------------------------------------------------------------------------------
1 | // Fixed Width Icons
2 | // -------------------------
3 | .@{fa-css-prefix}-fw {
4 | width: (18em / 14);
5 | text-align: center;
6 | }
7 |
--------------------------------------------------------------------------------
/font-awesome/scss/_fixed-width.scss:
--------------------------------------------------------------------------------
1 | // Fixed Width Icons
2 | // -------------------------
3 | .#{$fa-css-prefix}-fw {
4 | width: (18em / 14);
5 | text-align: center;
6 | }
7 |
--------------------------------------------------------------------------------
/font-awesome/less/bordered-pulled.less:
--------------------------------------------------------------------------------
1 | // Bordered & Pulled
2 | // -------------------------
3 |
4 | .@{fa-css-prefix}-border {
5 | padding: .2em .25em .15em;
6 | border: solid .08em @fa-border-color;
7 | border-radius: .1em;
8 | }
9 |
10 | .pull-right { float: right; }
11 | .pull-left { float: left; }
12 |
13 | .@{fa-css-prefix} {
14 | &.pull-left { margin-right: .3em; }
15 | &.pull-right { margin-left: .3em; }
16 | }
17 |
--------------------------------------------------------------------------------
/font-awesome/scss/_bordered-pulled.scss:
--------------------------------------------------------------------------------
1 | // Bordered & Pulled
2 | // -------------------------
3 |
4 | .#{$fa-css-prefix}-border {
5 | padding: .2em .25em .15em;
6 | border: solid .08em $fa-border-color;
7 | border-radius: .1em;
8 | }
9 |
10 | .pull-right { float: right; }
11 | .pull-left { float: left; }
12 |
13 | .#{$fa-css-prefix} {
14 | &.pull-left { margin-right: .3em; }
15 | &.pull-right { margin-left: .3em; }
16 | }
17 |
--------------------------------------------------------------------------------
/font-awesome/less/larger.less:
--------------------------------------------------------------------------------
1 | // Icon Sizes
2 | // -------------------------
3 |
4 | /* makes the font 33% larger relative to the icon container */
5 | .@{fa-css-prefix}-lg {
6 | font-size: (4em / 3);
7 | line-height: (3em / 4);
8 | vertical-align: -15%;
9 | }
10 | .@{fa-css-prefix}-2x { font-size: 2em; }
11 | .@{fa-css-prefix}-3x { font-size: 3em; }
12 | .@{fa-css-prefix}-4x { font-size: 4em; }
13 | .@{fa-css-prefix}-5x { font-size: 5em; }
14 |
--------------------------------------------------------------------------------
/font-awesome/scss/_larger.scss:
--------------------------------------------------------------------------------
1 | // Icon Sizes
2 | // -------------------------
3 |
4 | /* makes the font 33% larger relative to the icon container */
5 | .#{$fa-css-prefix}-lg {
6 | font-size: (4em / 3);
7 | line-height: (3em / 4);
8 | vertical-align: -15%;
9 | }
10 | .#{$fa-css-prefix}-2x { font-size: 2em; }
11 | .#{$fa-css-prefix}-3x { font-size: 3em; }
12 | .#{$fa-css-prefix}-4x { font-size: 4em; }
13 | .#{$fa-css-prefix}-5x { font-size: 5em; }
14 |
--------------------------------------------------------------------------------
/css/parallax.css:
--------------------------------------------------------------------------------
1 | .scroll {
2 | /*Set a css background */
3 | background:url(../img/DOC_Tutorial_header.jpg);
4 |
5 | /*Dont mind the rest*/
6 | position:relative;
7 | height:130%;
8 | background-position:bottom;
9 | -webkit-background-size: cover;
10 | -moz-background-size: cover;
11 | background-repeat: no-repeat;
12 |
13 | text-align:center;
14 | color:#fff;
15 | font-family:'Open Sans' sans-serif;
16 | }
17 |
--------------------------------------------------------------------------------
/font-awesome/less/list.less:
--------------------------------------------------------------------------------
1 | // List Icons
2 | // -------------------------
3 |
4 | .@{fa-css-prefix}-ul {
5 | padding-left: 0;
6 | margin-left: @fa-li-width;
7 | list-style-type: none;
8 | > li { position: relative; }
9 | }
10 | .@{fa-css-prefix}-li {
11 | position: absolute;
12 | left: -@fa-li-width;
13 | width: @fa-li-width;
14 | top: (2em / 14);
15 | text-align: center;
16 | &.@{fa-css-prefix}-lg {
17 | left: (-@fa-li-width + (4em / 14));
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/font-awesome/scss/_list.scss:
--------------------------------------------------------------------------------
1 | // List Icons
2 | // -------------------------
3 |
4 | .#{$fa-css-prefix}-ul {
5 | padding-left: 0;
6 | margin-left: $fa-li-width;
7 | list-style-type: none;
8 | > li { position: relative; }
9 | }
10 | .#{$fa-css-prefix}-li {
11 | position: absolute;
12 | left: -$fa-li-width;
13 | width: $fa-li-width;
14 | top: (2em / 14);
15 | text-align: center;
16 | &.#{$fa-css-prefix}-lg {
17 | left: -$fa-li-width + (4em / 14);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/font-awesome/scss/font-awesome.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
4 | */
5 |
6 | @import "variables";
7 | @import "mixins";
8 | @import "path";
9 | @import "core";
10 | @import "larger";
11 | @import "fixed-width";
12 | @import "list";
13 | @import "bordered-pulled";
14 | @import "animated";
15 | @import "rotated-flipped";
16 | @import "stacked";
17 | @import "icons";
18 |
--------------------------------------------------------------------------------
/js/parallax.js:
--------------------------------------------------------------------------------
1 | //Parallax -- COVER
2 | function simpleParallax() {
3 | //This variable is storing the distance scrolled
4 | var scrolled = $(window).scrollTop() + 1;
5 |
6 | //Every element with the class "scroll" will have parallax background
7 | //Change the "0.3" for adjusting scroll speed.
8 | $('.scroll').css('background-position', '0' + -(scrolled * 0.05) + 'px');
9 | }
10 | //Everytime we scroll, it will fire the function
11 | $(window).scroll(function (e) {
12 | simpleParallax();
13 | });
14 |
--------------------------------------------------------------------------------
/font-awesome/less/font-awesome.less:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
4 | */
5 |
6 | @import "variables.less";
7 | @import "mixins.less";
8 | @import "path.less";
9 | @import "core.less";
10 | @import "larger.less";
11 | @import "fixed-width.less";
12 | @import "list.less";
13 | @import "bordered-pulled.less";
14 | @import "animated.less";
15 | @import "rotated-flipped.less";
16 | @import "stacked.less";
17 | @import "icons.less";
18 |
--------------------------------------------------------------------------------
/font-awesome/less/core.less:
--------------------------------------------------------------------------------
1 | // Base Class Definition
2 | // -------------------------
3 |
4 | .@{fa-css-prefix} {
5 | display: inline-block;
6 | font: normal normal normal @fa-font-size-base/1 FontAwesome; // shortening font declaration
7 | font-size: inherit; // can't have font-size inherit on line above, so need to override
8 | text-rendering: auto; // optimizelegibility throws things off #1094
9 | -webkit-font-smoothing: antialiased;
10 | -moz-osx-font-smoothing: grayscale;
11 | transform: translate(0, 0); // ensures no half-pixel rendering in firefox
12 |
13 | }
14 |
--------------------------------------------------------------------------------
/font-awesome/less/stacked.less:
--------------------------------------------------------------------------------
1 | // Stacked Icons
2 | // -------------------------
3 |
4 | .@{fa-css-prefix}-stack {
5 | position: relative;
6 | display: inline-block;
7 | width: 2em;
8 | height: 2em;
9 | line-height: 2em;
10 | vertical-align: middle;
11 | }
12 | .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
13 | position: absolute;
14 | left: 0;
15 | width: 100%;
16 | text-align: center;
17 | }
18 | .@{fa-css-prefix}-stack-1x { line-height: inherit; }
19 | .@{fa-css-prefix}-stack-2x { font-size: 2em; }
20 | .@{fa-css-prefix}-inverse { color: @fa-inverse; }
21 |
--------------------------------------------------------------------------------
/font-awesome/scss/_core.scss:
--------------------------------------------------------------------------------
1 | // Base Class Definition
2 | // -------------------------
3 |
4 | .#{$fa-css-prefix} {
5 | display: inline-block;
6 | font: normal normal normal #{$fa-font-size-base}/1 FontAwesome; // shortening font declaration
7 | font-size: inherit; // can't have font-size inherit on line above, so need to override
8 | text-rendering: auto; // optimizelegibility throws things off #1094
9 | -webkit-font-smoothing: antialiased;
10 | -moz-osx-font-smoothing: grayscale;
11 | transform: translate(0, 0); // ensures no half-pixel rendering in firefox
12 |
13 | }
14 |
--------------------------------------------------------------------------------
/font-awesome/scss/_stacked.scss:
--------------------------------------------------------------------------------
1 | // Stacked Icons
2 | // -------------------------
3 |
4 | .#{$fa-css-prefix}-stack {
5 | position: relative;
6 | display: inline-block;
7 | width: 2em;
8 | height: 2em;
9 | line-height: 2em;
10 | vertical-align: middle;
11 | }
12 | .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
13 | position: absolute;
14 | left: 0;
15 | width: 100%;
16 | text-align: center;
17 | }
18 | .#{$fa-css-prefix}-stack-1x { line-height: inherit; }
19 | .#{$fa-css-prefix}-stack-2x { font-size: 2em; }
20 | .#{$fa-css-prefix}-inverse { color: $fa-inverse; }
21 |
--------------------------------------------------------------------------------
/font-awesome/less/rotated-flipped.less:
--------------------------------------------------------------------------------
1 | // Rotated & Flipped Icons
2 | // -------------------------
3 |
4 | .@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
5 | .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
6 | .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
7 |
8 | .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
9 | .@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); }
10 |
11 | // Hook for IE8-9
12 | // -------------------------
13 |
14 | :root .@{fa-css-prefix}-rotate-90,
15 | :root .@{fa-css-prefix}-rotate-180,
16 | :root .@{fa-css-prefix}-rotate-270,
17 | :root .@{fa-css-prefix}-flip-horizontal,
18 | :root .@{fa-css-prefix}-flip-vertical {
19 | filter: none;
20 | }
21 |
--------------------------------------------------------------------------------
/font-awesome/scss/_rotated-flipped.scss:
--------------------------------------------------------------------------------
1 | // Rotated & Flipped Icons
2 | // -------------------------
3 |
4 | .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
5 | .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
6 | .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
7 |
8 | .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
9 | .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }
10 |
11 | // Hook for IE8-9
12 | // -------------------------
13 |
14 | :root .#{$fa-css-prefix}-rotate-90,
15 | :root .#{$fa-css-prefix}-rotate-180,
16 | :root .#{$fa-css-prefix}-rotate-270,
17 | :root .#{$fa-css-prefix}-flip-horizontal,
18 | :root .#{$fa-css-prefix}-flip-vertical {
19 | filter: none;
20 | }
21 |
--------------------------------------------------------------------------------
/font-awesome/less/path.less:
--------------------------------------------------------------------------------
1 | /* FONT PATH
2 | * -------------------------- */
3 |
4 | @font-face {
5 | font-family: 'FontAwesome';
6 | src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
7 | src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
8 | url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
9 | url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
10 | url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
11 | url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
12 | // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
13 | font-weight: normal;
14 | font-style: normal;
15 | }
16 |
--------------------------------------------------------------------------------
/font-awesome/scss/_path.scss:
--------------------------------------------------------------------------------
1 | /* FONT PATH
2 | * -------------------------- */
3 |
4 | @font-face {
5 | font-family: 'FontAwesome';
6 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
7 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
8 | url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
9 | url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
10 | url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
11 | url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
12 | // src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
13 | font-weight: normal;
14 | font-style: normal;
15 | }
16 |
--------------------------------------------------------------------------------
/font-awesome/less/animated.less:
--------------------------------------------------------------------------------
1 | // Animated Icons
2 | // --------------------------
3 |
4 | .@{fa-css-prefix}-spin {
5 | -webkit-animation: fa-spin 2s infinite linear;
6 | animation: fa-spin 2s infinite linear;
7 | }
8 |
9 | .@{fa-css-prefix}-pulse {
10 | -webkit-animation: fa-spin 1s infinite steps(8);
11 | animation: fa-spin 1s infinite steps(8);
12 | }
13 |
14 | @-webkit-keyframes fa-spin {
15 | 0% {
16 | -webkit-transform: rotate(0deg);
17 | transform: rotate(0deg);
18 | }
19 | 100% {
20 | -webkit-transform: rotate(359deg);
21 | transform: rotate(359deg);
22 | }
23 | }
24 |
25 | @keyframes fa-spin {
26 | 0% {
27 | -webkit-transform: rotate(0deg);
28 | transform: rotate(0deg);
29 | }
30 | 100% {
31 | -webkit-transform: rotate(359deg);
32 | transform: rotate(359deg);
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/font-awesome/scss/_animated.scss:
--------------------------------------------------------------------------------
1 | // Spinning Icons
2 | // --------------------------
3 |
4 | .#{$fa-css-prefix}-spin {
5 | -webkit-animation: fa-spin 2s infinite linear;
6 | animation: fa-spin 2s infinite linear;
7 | }
8 |
9 | .#{$fa-css-prefix}-pulse {
10 | -webkit-animation: fa-spin 1s infinite steps(8);
11 | animation: fa-spin 1s infinite steps(8);
12 | }
13 |
14 | @-webkit-keyframes fa-spin {
15 | 0% {
16 | -webkit-transform: rotate(0deg);
17 | transform: rotate(0deg);
18 | }
19 | 100% {
20 | -webkit-transform: rotate(359deg);
21 | transform: rotate(359deg);
22 | }
23 | }
24 |
25 | @keyframes fa-spin {
26 | 0% {
27 | -webkit-transform: rotate(0deg);
28 | transform: rotate(0deg);
29 | }
30 | 100% {
31 | -webkit-transform: rotate(359deg);
32 | transform: rotate(359deg);
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/js/cbpAnimatedHeader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * cbpAnimatedHeader.js v1.0.0
3 | * http://www.codrops.com
4 | *
5 | * Licensed under the MIT license.
6 | * http://www.opensource.org/licenses/mit-license.php
7 | *
8 | * Copyright 2013, Codrops
9 | * http://www.codrops.com
10 | */
11 | var cbpAnimatedHeader = (function() {
12 |
13 | var docElem = document.documentElement,
14 | header = document.querySelector( '.navbar-default' ),
15 | didScroll = false,
16 | changeHeaderOn = 300;
17 |
18 | function init() {
19 | window.addEventListener( 'scroll', function( event ) {
20 | if( !didScroll ) {
21 | didScroll = true;
22 | setTimeout( scrollPage, 250 );
23 | }
24 | }, false );
25 | }
26 |
27 | function scrollPage() {
28 | var sy = scrollY();
29 | if ( sy >= changeHeaderOn ) {
30 | classie.add( header, 'navbar-shrink' );
31 | }
32 | else {
33 | classie.remove( header, 'navbar-shrink' );
34 | }
35 | didScroll = false;
36 | }
37 |
38 | function scrollY() {
39 | return window.pageYOffset || docElem.scrollTop;
40 | }
41 |
42 | init();
43 |
44 | })();
--------------------------------------------------------------------------------
/font-awesome/less/mixins.less:
--------------------------------------------------------------------------------
1 | // Mixins
2 | // --------------------------
3 |
4 | .fa-icon() {
5 | display: inline-block;
6 | font: normal normal normal @fa-font-size-base/1 FontAwesome; // shortening font declaration
7 | font-size: inherit; // can't have font-size inherit on line above, so need to override
8 | text-rendering: auto; // optimizelegibility throws things off #1094
9 | -webkit-font-smoothing: antialiased;
10 | -moz-osx-font-smoothing: grayscale;
11 | transform: translate(0, 0); // ensures no half-pixel rendering in firefox
12 |
13 | }
14 |
15 | .fa-icon-rotate(@degrees, @rotation) {
16 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);
17 | -webkit-transform: rotate(@degrees);
18 | -ms-transform: rotate(@degrees);
19 | transform: rotate(@degrees);
20 | }
21 |
22 | .fa-icon-flip(@horiz, @vert, @rotation) {
23 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1);
24 | -webkit-transform: scale(@horiz, @vert);
25 | -ms-transform: scale(@horiz, @vert);
26 | transform: scale(@horiz, @vert);
27 | }
28 |
--------------------------------------------------------------------------------
/font-awesome/scss/_mixins.scss:
--------------------------------------------------------------------------------
1 | // Mixins
2 | // --------------------------
3 |
4 | @mixin fa-icon() {
5 | display: inline-block;
6 | font: normal normal normal #{$fa-font-size-base}/1 FontAwesome; // shortening font declaration
7 | font-size: inherit; // can't have font-size inherit on line above, so need to override
8 | text-rendering: auto; // optimizelegibility throws things off #1094
9 | -webkit-font-smoothing: antialiased;
10 | -moz-osx-font-smoothing: grayscale;
11 | transform: translate(0, 0); // ensures no half-pixel rendering in firefox
12 |
13 | }
14 |
15 | @mixin fa-icon-rotate($degrees, $rotation) {
16 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
17 | -webkit-transform: rotate($degrees);
18 | -ms-transform: rotate($degrees);
19 | transform: rotate($degrees);
20 | }
21 |
22 | @mixin fa-icon-flip($horiz, $vert, $rotation) {
23 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
24 | -webkit-transform: scale($horiz, $vert);
25 | -ms-transform: scale($horiz, $vert);
26 | transform: scale($horiz, $vert);
27 | }
28 |
--------------------------------------------------------------------------------
/js/creative.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Start Bootstrap - Creative Bootstrap Theme (http://startbootstrap.com)
3 | * Code licensed under the Apache License v2.0.
4 | * For details, see http://www.apache.org/licenses/LICENSE-2.0.
5 | */
6 |
7 | (function($) {
8 | "use strict"; // Start of use strict
9 |
10 | // jQuery for page scrolling feature - requires jQuery Easing plugin
11 | $('a.page-scroll').bind('click', function(event) {
12 | var $anchor = $(this);
13 | $('html, body').stop().animate({
14 | scrollTop: ($($anchor.attr('href')).offset().top - 50)
15 | }, 1250, 'easeInOutExpo');
16 | event.preventDefault();
17 | });
18 |
19 | // Highlight the top nav as scrolling occurs
20 | $('body').scrollspy({
21 | target: '.navbar-fixed-top',
22 | offset: 51
23 | })
24 |
25 | // Closes the Responsive Menu on Menu Item Click
26 | $('.navbar-collapse ul li a').click(function() {
27 | $('.navbar-toggle:visible').click();
28 | });
29 |
30 | // Fit Text Plugin for Main Header
31 | $("h1").fitText(
32 | 1.2, {
33 | minFontSize: '35px',
34 | maxFontSize: '65px'
35 | }
36 | );
37 |
38 | // Offset for Main Navigation
39 | $('#mainNav').affix({
40 | offset: {
41 | top: 100
42 | }
43 | })
44 |
45 | // Initialize WOW.js Scrolling Animations
46 | new WOW().init();
47 |
48 | })(jQuery); // End of use strict
49 |
--------------------------------------------------------------------------------
/css/creative.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | html,
4 | body {
5 | width: 100%;
6 | height: 100%;
7 | }
8 |
9 |
10 |
11 | hr {
12 | max-width: 50px;
13 | border-color: #002952;
14 | border-width: 3px;
15 | }
16 |
17 | hr.light {
18 | border-color: #fff;
19 | }
20 |
21 | a {
22 | color: #002952;
23 | -webkit-transition: all .35s;
24 | -moz-transition: all .35s;
25 | transition: all .35s;
26 | }
27 |
28 | a:hover,
29 | a:focus {
30 | color: #f;
31 | }
32 |
33 | h1,
34 | h2,
35 | h3,
36 | h4,
37 | h5,
38 | h6 {
39 | font-family: 'SourceSansProRegular','Open Sans','Helvetica Neue',Arial,sans-serif;
40 | }
41 |
42 | p {
43 | margin-bottom: 20px;
44 | font-size: 16px;
45 | line-height: 1.5;
46 | }
47 |
48 | .bg-primary {
49 | background-color: #002952;
50 | }
51 |
52 | .bg-dark {
53 | color: #fff;
54 | background-color: #222;
55 | }
56 |
57 | .text-faded {
58 | color: rgba(255,255,255,.7);
59 | }
60 |
61 | section.datacorps {
62 | padding: 100px 0;
63 | }
64 |
65 | aside {
66 | padding: 50px 0;
67 | }
68 |
69 | .no-padding {
70 | padding: 0;
71 | }
72 |
73 | .navbar-default {
74 | border-color: rgba(34,34,34,.05);
75 | font-family: "SourceSansProRegular",'Open Sans','Helvetica Neue',Arial,sans-serif;
76 | background-color: #fff;
77 | -webkit-transition: all .35s;
78 | -moz-transition: all .35s;
79 | transition: all .35s;
80 | }
81 |
82 | .navbar-default .navbar-header .navbar-brand {
83 | text-transform: uppercase;
84 | font-family: "SourceSansProRegular",'Open Sans','Helvetica Neue',Arial,sans-serif;
85 | font-weight: 700;
86 | color: #002952;
87 | }
88 |
89 | .navbar-default .navbar-header .navbar-brand:hover,
90 | .navbar-default .navbar-header .navbar-brand:focus {
91 | color: #eb3812;
92 | }
93 |
94 | .navbar-default .nav > li>a,
95 | .navbar-default .nav>li>a:focus {
96 | text-transform: uppercase;
97 | font-size: 13px;
98 | font-weight: 700;
99 | color: #222;
100 | }
101 |
102 | .navbar-default .nav > li>a:hover,
103 | .navbar-default .nav>li>a:focus:hover {
104 | color: #002952;
105 | }
106 |
107 | .navbar-default .nav > li.active>a,
108 | .navbar-default .nav>li.active>a:focus {
109 | color: #002952!important;
110 | background-color: transparent;
111 | }
112 |
113 | .navbar-default .nav > li.active>a:hover,
114 | .navbar-default .nav>li.active>a:focus:hover {
115 | background-color: transparent;
116 | }
117 |
118 | @media(min-width:768px) {
119 | .navbar-default {
120 | border-color: rgba(255,255,255,.3);
121 | background-color: black;
122 | }
123 |
124 | .navbar-default .navbar-header .navbar-brand {
125 | color: rgba(255,255,255,.7);
126 | }
127 |
128 | .navbar-default .navbar-header .navbar-brand:hover,
129 | .navbar-default .navbar-header .navbar-brand:focus {
130 | color: #fff;
131 | }
132 |
133 | .navbar-default .nav > li>a,
134 | .navbar-default .nav>li>a:focus {
135 | color: rgba(255,255,255,1);
136 | }
137 |
138 | .navbar-default .nav > li>a:hover,
139 | .navbar-default .nav>li>a:focus:hover {
140 | color: #fff;
141 | }
142 |
143 | .navbar-default.affix {
144 | border-color: rgba(34,34,34,.05);
145 | background-color: #fff;
146 | }
147 |
148 | .navbar-default.affix .navbar-header .navbar-brand {
149 | font-size: 14px;
150 | color: #002952;
151 | }
152 |
153 | .navbar-default.affix .navbar-header .navbar-brand:hover,
154 | .navbar-default.affix .navbar-header .navbar-brand:focus {
155 | color: #eb3812;
156 | }
157 |
158 | .navbar-default.affix .nav > li>a,
159 | .navbar-default.affix .nav>li>a:focus {
160 | color: #222;
161 | }
162 |
163 | .navbar-default.affix .nav > li>a:hover,
164 | .navbar-default.affix .nav>li>a:focus:hover {
165 | color: #002952;
166 | }
167 | }
168 |
169 | .backie {
170 | position: relative;
171 |
172 | height:120%;
173 |
174 | min-height: auto;
175 |
176 | text-align: center;
177 | color: #fff;
178 | background-image: url(../img/DOC_Tutorial_header.jpg);
179 |
180 | -webkit-background-size: cover;
181 | -moz-background-size: cover;
182 | background-size: cover;
183 | -o-background-size: cover;
184 | background-repeat: no-repeat;
185 | }
186 |
187 |
188 |
189 | header .header-content {
190 | position: relative;
191 | width: 100%;
192 | padding: 100px 15px;
193 | text-align: center;
194 | }
195 |
196 | header .header-content .header-content-inner h1 {
197 | margin-top: 0;
198 | margin-bottom: 0;
199 | text-transform: uppercase;
200 | font-weight: 700;
201 | }
202 |
203 | header .header-content .header-content-inner hr {
204 | margin: 30px auto;
205 | }
206 |
207 | header .header-content .header-content-inner p {
208 | margin-bottom: 50px;
209 | font-size: 16px;
210 | font-weight: 300;
211 | color: rgba(255,255,255,.7);
212 | }
213 |
214 | @media(min-width:768px) {
215 | header {
216 | min-height: 100%;
217 | }
218 |
219 | header .header-content {
220 | position: absolute;
221 | top: 50%;
222 | padding: 0 50px;
223 | -webkit-transform: translateY(-50%);
224 | -ms-transform: translateY(-50%);
225 | transform: translateY(-50%);
226 | }
227 |
228 | header .header-content .header-content-inner {
229 | margin-right: auto;
230 | margin-left: auto;
231 | max-width: 1000px;
232 | }
233 |
234 | header .header-content .header-content-inner p {
235 | margin-right: auto;
236 | margin-left: auto;
237 | max-width: 80%;
238 | font-size: 18px;
239 | }
240 | }
241 |
242 | .section-heading {
243 | margin-top: 0;
244 | }
245 |
246 | .service-box {
247 | margin: 50px auto 0;
248 | max-width: 400px;
249 | }
250 |
251 | @media(min-width:992px) {
252 | .service-box {
253 | margin: 20px auto 0;
254 | }
255 | }
256 |
257 | .service-box p {
258 | margin-bottom: 0;
259 | }
260 |
261 | .portfolio-box {
262 | display: block;
263 | position: relative;
264 | margin: 0 auto;
265 | max-width: 650px;
266 | }
267 |
268 | .portfolio-box .portfolio-box-caption {
269 | display: block;
270 | position: absolute;
271 | bottom: 0;
272 | width: 100%;
273 | height: 100%;
274 | text-align: center;
275 | color: #002952;
276 | opacity: 0;
277 | background: #B2D1FF;
278 | -webkit-transition: all .35s;
279 | -moz-transition: all .35s;
280 | transition: all .35s;
281 | }
282 |
283 | .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
284 | position: absolute;
285 | top: 50%;
286 | width: 100%;
287 | text-align: center;
288 | transform: translateY(-50%);
289 | }
290 |
291 | .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
292 | .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
293 | padding: 0 15px;
294 | font-family:'SourceSansProRegular', 'Open Sans','Helvetica Neue',Arial,sans-serif;
295 | }
296 |
297 | .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
298 | text-transform: uppercase;
299 | font-size: 14px;
300 | font-weight: 600;
301 | }
302 |
303 | .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
304 | font-size: 18px;
305 | }
306 |
307 | .portfolio-box:hover .portfolio-box-caption {
308 | opacity: 0.95;
309 | }
310 |
311 | @media(min-width:768px) {
312 | .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
313 | font-size: 16px;
314 | }
315 |
316 | .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
317 | font-size: 22px;
318 | }
319 | }
320 |
321 | .call-to-action h2 {
322 | margin: 0 auto 20px;
323 | }
324 |
325 | .text-primary {
326 | color: #002952;
327 | }
328 |
329 |
330 |
331 | .no-gutter > [class*=col-] {
332 | padding-right: 0;
333 | padding-left: 0;
334 | }
335 |
336 | .btn-default {
337 | border-color: #fff;
338 | color: #222;
339 | background-color: #fff;
340 | -webkit-transition: all .35s;
341 | -moz-transition: all .35s;
342 | transition: all .35s;
343 | }
344 |
345 | .btn-default:hover,
346 | .btn-default:focus,
347 | .btn-default.focus,
348 | .btn-default:active,
349 | .btn-default.active,
350 | .open > .dropdown-toggle.btn-default {
351 | border-color: #ededed;
352 | color: #222;
353 | background-color: #f2f2f2;
354 | }
355 |
356 | .btn-default:active,
357 | .btn-default.active,
358 | .open > .dropdown-toggle.btn-default {
359 | background-image: none;
360 | }
361 |
362 | .btn-default.disabled,
363 | .btn-default[disabled],
364 | fieldset[disabled] .btn-default,
365 | .btn-default.disabled:hover,
366 | .btn-default[disabled]:hover,
367 | fieldset[disabled] .btn-default:hover,
368 | .btn-default.disabled:focus,
369 | .btn-default[disabled]:focus,
370 | fieldset[disabled] .btn-default:focus,
371 | .btn-default.disabled.focus,
372 | .btn-default[disabled].focus,
373 | fieldset[disabled] .btn-default.focus,
374 | .btn-default.disabled:active,
375 | .btn-default[disabled]:active,
376 | fieldset[disabled] .btn-default:active,
377 | .btn-default.disabled.active,
378 | .btn-default[disabled].active,
379 | fieldset[disabled] .btn-default.active {
380 | border-color: #fff;
381 | background-color: #fff;
382 | }
383 |
384 | .btn-default .badge {
385 | color: #fff;
386 | background-color: #222;
387 | }
388 |
389 | .btn-primary {
390 | border-color: white;
391 | color: #fff;
392 | background-color: red;
393 | -webkit-transition: all .35s;
394 | -moz-transition: all .35s;
395 | transition: all .35s;
396 | }
397 |
398 | .btn-primary:hover,
399 | .btn-primary:focus,
400 | .btn-primary.focus,
401 | .btn-primary:active,
402 | .btn-primary.active,
403 | .open > .dropdown-toggle.btn-primary {
404 | border-color: #ed431f;
405 | color: red;
406 | background-color: orange;
407 | }
408 |
409 | .btn-primary:active,
410 | .btn-primary.active,
411 | .open > .dropdown-toggle.btn-primary {
412 | background-image: none;
413 | }
414 |
415 | .btn-primary.disabled,
416 | .btn-primary[disabled],
417 | fieldset[disabled] .btn-primary,
418 | .btn-primary.disabled:hover,
419 | .btn-primary[disabled]:hover,
420 | fieldset[disabled] .btn-primary:hover,
421 | .btn-primary.disabled:focus,
422 | .btn-primary[disabled]:focus,
423 | fieldset[disabled] .btn-primary:focus,
424 | .btn-primary.disabled.focus,
425 | .btn-primary[disabled].focus,
426 | fieldset[disabled] .btn-primary.focus,
427 | .btn-primary.disabled:active,
428 | .btn-primary[disabled]:active,
429 | fieldset[disabled] .btn-primary:active,
430 | .btn-primary.disabled.active,
431 | .btn-primary[disabled].active,
432 | fieldset[disabled] .btn-primary.active {
433 | border-color: #002952;
434 | background-color: #002952;
435 | }
436 |
437 | .btn-primary .badge {
438 | color: #002952;
439 | background-color: #fff;
440 | }
441 |
442 | .btn {
443 | border: 0;
444 | border-radius: 300px;
445 | text-transform: uppercase;
446 | font-family: 'SourceSansProRegular','Open Sans','Helvetica Neue',Arial,sans-serif;
447 | font-weight: 700;
448 | }
449 |
450 | .btn-xl {
451 | padding: 15px 30px;
452 | }
453 |
454 | ::-moz-selection {
455 | text-shadow: none;
456 | color: #fff;
457 | background: #222;
458 | }
459 |
460 | ::selection {
461 | text-shadow: none;
462 | color: #fff;
463 | background: #222;
464 | }
465 |
466 | img::selection {
467 | color: #fff;
468 | background: 0 0;
469 | }
470 |
471 | img::-moz-selection {
472 | color: #fff;
473 | background: 0 0;
474 | }
475 |
476 | body {
477 | webkit-tap-highlight-color: #222;
478 | }
479 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Mapbox: Living Weather Data on Web Maps
2 | #####
3 | By Damon Burgett, Geographer, Mapbox and Charlie Lloyd, Mapbox
4 |
5 | ##### *Part 2: Using Mapbox and Open source tools to animate map atmospheric water*
6 | By [Damon Burgett](https://www.mapbox.com/about/team/#damon-burgett), Geographer, Mapbox and Charlie Lloyd, Mapbox
7 |
8 | *As part of the [Commerce Data Usability Project](https://www.commerce.gov/datausability/), Mapbox in collaboration with the [Commerce Data Service](https://www.commerce.gov/dataservice/) has created a two part tutorial that will guide you though processing and visualizating precipitable water data from NOAA. If you have question, feel free to reach out to the Commerce Data Service at data@doc.gov or Mapbox at help@mapbox.com.*
9 |
10 |
11 | #### Atmospheric data is a digital representation of the living environment.
12 |
13 | In this second tutorial in a two part series working with National Oceanic + Atmospheric Administration (NOAA) Precipitable Water (Pwat) data, we extend the data processing and visualization demonstrated in Part One and an animated interactive map of global Pwat over 12 days. In this segment, we’ll be repeating the steps from [Part One](http://commercedataservice.github.io/tutorial_mapbox_part1/), but in bulk and in parallel on over 100 datasets. At the end of this tutorial, we’ll have an animated, interactive map of global pwat over 12 days.
14 |
15 |
16 | 
17 |
18 | ## Getting Started
19 |
20 | To get started quickly, the code for this tutorial can be found at the following [Github repo]([https://github.com/CommerceDataService/tutorial_mapbox_part2]).
21 |
22 | ### Step 1: Preliminaries
23 |
24 | #### Libraries and Utilities
25 | We'll be using the following tools to wrangle the weather model output files:
26 |
27 | - **[GDAL](http://www.gdal.org/)**: Translator library for raster and vector geospatial data formats;
28 | - **[parallel](http://www.gnu.org/software/parallel/)**: Shell tool for executing jobs in parallel;
29 | - **[rasterio](https://github.com/mapbox/rasterio)**: Clean and fast and geospatial raster I/O for Python programmers who use Numpy;
30 | - **[gribdoctor](https://github.com/mapbox/grib-doctor)**: Utilities for handling quirks of weather data General Regularly-distributed Information in Binary form (grib) files. grib data is a concise data format commonly used in meteorology to store historical and forecast weather data which can looked at using software applications; and
31 | - **[ffmpeg](https://www.ffmpeg.org/)**: Library to record, convert and stream audio and video
32 |
33 | #### Folder Setup
34 |
35 | Let's first setup a few folders to store intermediate files. In your working directory, make these 6 files - keeping it organized as such will keep things simpler down the line:
36 |
37 | ```
38 | working directory
39 | +-data
40 | +-global
41 | +-clip
42 | +-mercator
43 | +-pngs
44 | +-output
45 | ```
46 |
47 | As a command (from within your working directory):
48 |
49 | ```
50 | mkdir data global clip mercator color png output
51 | ```
52 |
53 | ### Step 2: Get the data
54 |
55 | From part one of our tutorial, we have the following url:
56 |
57 | ```
58 | http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs_0p25.pl?file=gfs.t12z.pgrb2.0p25.f000&all_lev=on&var_PWAT=on&leftlon=0&rightlon=360&toplat=90&bottomlat=-90&dir=%2Fgfs.2016011212
59 | ```
60 |
61 | This links to the Global Forecast System (GFS) model of Pwat on 01/12/2016 at 12 GST, for a forecast of 0 hours. The GFS forcast dataset is created every six hours, with predictions produced from each model every 3 hours. By combining every six-hour model run's hour 0 and hour 3 prediction data, we'll be able to download data at a 3-hour interval.
62 |
63 | [GNU Parallel](http://www.gnu.org/software/parallel/) offers an efficient approach to abstract away a lot of the complication of iterating over numerous files. In particular, `parallel`'s abstraction of number expansion makes this manageable. Taking the above URL and replacing all the variables we want to iterate over, we have the following:
64 |
65 | ```
66 | http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs_0p25.pl?file=gfs.t{time}z.pgrb2.0p25.f{time}&all_lev=on&var_PWAT=on&leftlon=0&rightlon=360&toplat=90&bottomlat=-90&dir=%2Fgfs.201603{date}{time}
67 | ```
68 | Iterations are determined by the following three variables:
69 |
70 | - `{date}` = Prediction date. We want 12 days, from the to 5th to the 17th, as two-digit numbers `{05..17}`
71 |
72 | - `{hour}` = Prediction hour. We want 0, 6, 12, and 18 hours (every 6 hours), as two digit numbers `{00..18..6}`
73 |
74 | - `{time}` = Prediction time. We want the 0 and 3 hour predictions, as three-digit numbers `{000..003..3}`
75 |
76 | Let's put it all together to see how it works:
77 | ```
78 | parallel --header : echo {date}-{hour}-{off} ::: off {000..003..3} ::: date {05..17} ::: hour {00..18..6}
79 | ```
80 | This should create 104 combinations of our input ranges in no particular order. With the URL, we can simply put these variables in place of the static numbers we see in the download link as in the example above.
81 |
82 | Here, we use `wget`, a command to download data from a URL. Plugging it into `parallel` means that for every combination of numbers we input, we'll perform `wget`. Let's first "dryrun" (`--dryrun`) to see the URLs we are creating:
83 | ```
84 | parallel --dryrun --header : wget '"http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs_0p25.pl?file=gfs.t{time}z.pgrb2.0p25.f{time}&all_lev=on&var_PWAT=on&leftlon=0&rightlon=360&toplat=90&bottomlat=-90&dir=%2Fgfs.201603{date}{time}"' ::: date {05..17} ::: time {00..18..06} ::: hour {000..003..003}
85 | ```
86 | This will print the URLs we'll want - grab one and paste it into a browser to see if it works. It should start downloading a *grib2* file. If not, double check your syntax. Keep an eye out for the URL string formatting; various shells handle these characters differently.
87 |
88 | To keep the gribs in sorted order for the rest of the process, use the date-hour prediction number as the filename. This will ensure that we can simple re-use the iteration numbers as the output, saving in our `raw` folder as `data/{date}{time}{hour}.grib2`. Add this, remove the `--dryrun` flag, and re-run.
89 | ```
90 | parallel --header : wget '"http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs_0p25.pl?file=gfs.t{time}z.pgrb2.0p25.f{time}&all_lev=on&var_PWAT=on&leftlon=0&rightlon=360&toplat=90&bottomlat=-90&dir=%2Fgfs.201603{date}{time}"' -O data/{date}{time}{hour}.grib2 ::: date {05..17} ::: time {00..18..06} ::: hour {000..003..003}
91 | ```
92 | If this worked, you'll have a directory of numerically sorted grib files! Open any of these freshly downloaded raster files in a desktop GIS system such as [QGIS](http://www.qgis.org/) and you should see the following:
93 |
94 | 
95 |
96 | ### Part 3: Geoprocessing
97 |
98 | We are going to repeat each step that we referenced in Part 1, this time in parallel on our 104 input files. Luckily, `parallel` again handles much of the complication for us. A quick introduction to working with files in parallel. To list each file in our data directory with the `.grib2` extension, we can run the following command:
99 |
100 | ```
101 | parallel echo {} ::: data/*.grib2
102 | ```
103 |
104 | This should list out all the `grib2`s in your data directory. To list just the base filename:
105 |
106 | ```
107 | parallel echo {/} ::: data/*.grib2
108 | ```
109 |
110 | And to list just the filename without the file extension:
111 | ```
112 | parallel echo {/.} ::: data/*.grib2
113 | ```
114 |
115 | We'll use these three abstractions to process our data.
116 |
117 | #### Converting to global grib using `gribdoctor`
118 |
119 | A quick refresh on usage of this tool (see Part 1 for details):
120 |
121 | ```
122 | gribdoctor smoosh -dev -uw .grib2