Skip to content

Commit bb6ba69

Browse files
jkrrvjkrrv
committed
Improved loading experience; moved fullscreen button (closes #3)
1 parent fae499c commit bb6ba69

File tree

6 files changed

+116
-82
lines changed

6 files changed

+116
-82
lines changed

‎.gitignore

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@ data/raw/JoshuaProject/**
33
data/raw/NASA/**
44
!data/raw/NASA/nasaPopModified.csv
55

6+
*.css
7+
68
node_modules/
79
.idea
810

911
geo.json
1012

11-
package-lock.json
13+
package-lock.json
14+
15+
Thumbs.db

‎app/main.js

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -502,6 +502,7 @@ requirejs(['Cesium'], function(Cesium) {
502502
skyBox: false,
503503
baseLayerPicker : false,
504504
infoBox: true,
505+
fullscreenButton: false,
505506
scene: {
506507
globe: {
507508
enableLighting: true
@@ -511,9 +512,10 @@ requirejs(['Cesium'], function(Cesium) {
511512

512513
viewer.infoBox.frame.sandbox = "allow-same-origin allow-top-navigation allow-pointer-lock allow-popups allow-forms allow-scripts";
513514

514-
515515
viewer.scene.globe.enableLighting = true;
516516

517+
new Cesium.FullscreenButton(viewer._toolbar);
518+
517519
var imageryLayers = viewer.imageryLayers;
518520
// if (imageryLayers.length > 0) {
519521
// var layer = imageryLayers.get(0);
@@ -535,9 +537,16 @@ requirejs(['Cesium'], function(Cesium) {
535537
// // layer.brightness = 0.8;
536538
// }
537539

538-
viewer.dataSources.add(dataSource).then(); // TODO use this to close the loading overlay
540+
viewer.dataSources.add(dataSource).then(function() {
541+
document.getElementById('loadingOverlay').style.opacity = '0';
542+
setTimeout(function () {
543+
document.getElementById('loadingOverlay').style.display = 'none';
544+
}, 10000)
545+
});
539546

540547
// Add credit footnote for Joshua Project
541-
var credit = new Cesium.Credit('Joshua Project', 'assets/jp_logo_color.png', 'http://joshuaproject.net');
542-
viewer.scene.frameState.creditDisplay.addDefaultCredit(credit)
548+
var jpCredit = new Cesium.Credit('Joshua Project', 'assets/jp_logo_color.png', 'https://joshuaproject.net'),
549+
nasaCredit = new Cesium.Credit('NASA Socioeconomic Data and Applications Center (SEDAC)', 'assets/nasa-logo.svg', 'http://sedac.ciesin.columbia.edu/data/collection/gpw-v4');
550+
viewer.scene.frameState.creditDisplay.addDefaultCredit(jpCredit);
551+
viewer.scene.frameState.creditDisplay.addDefaultCredit(nasaCredit);
543552
});

‎assets/nasa-logo.svg

Lines changed: 66 additions & 0 deletions
Loading

‎index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
<body>
1616
<div id="cesiumContainer" class="fullSize"></div>
1717
<div id="loadingOverlay"><h1>Loading...</h1></div>
18-
<div id="toolbar"></div>
18+
<div id="messageBar">
19+
<h2>This is a work-in-progress side project. The data displayed is real. The interactivity, however, has a long way to go.</h2>
20+
</div>
1921
</body>
2022
</html>

‎style.css

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎style.less

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,29 @@ body {
3333
opacity: 0.9;
3434
width: 100%;
3535
height: 100%;
36-
display: none;
36+
background: rgba(0,0,0,.5);
37+
transition: opacity 2s;
38+
transition-delay:8s;
3739
}
3840

3941
#loadingOverlay h1 {
4042
text-align: center;
4143
position: relative;
4244
top: 50%;
43-
color:#666;
45+
color:#aaa;
4446
margin-top: -0.5em;
4547
}
4648

47-
#toolbar {
48-
margin: 5px;
49-
padding: 2px 5px;
49+
#messageBar {
5050
position: absolute;
51-
}
51+
background: rgba(0,0,0,.5);
52+
margin-right:150px;
53+
padding:.5em;
5254

55+
& * {
56+
margin: 0;
57+
}
58+
}
5359

5460

5561
.cesium-viewer .cesium-widget-credits a {
@@ -83,3 +89,20 @@ body {
8389
opacity:.9;
8490
}
8591

92+
93+
/* Cesium Toolbar */
94+
.cesium-viewer-toolbar button.cesium-button {
95+
margin: auto;
96+
box-sizing: border-box;
97+
display:inline-block;
98+
width: 32px;
99+
height: 32px;
100+
border-radius: 0;
101+
padding: 0;
102+
vertical-align: middle;
103+
z-index: 0;
104+
105+
&.cesium-fullscreenButton {
106+
margin:3px;
107+
}
108+
}

0 commit comments

Comments
 (0)