- add linear background for map in page.css

- set ClearColor of WebGlRenderer to transparent (main.js)

src/css/page.css

@@ -82,6 +82,13 @@ section {
     top: 30px;
     left: 30px;
     right: 30px;
+    /* Old browsers */
+    background: #cde6f9;
+    background-image: -moz-linear-gradient(top, #cde6f9 0%, white 70%, #6b716f);
+    background: -webkit-linear-gradient(top, #cde6f9 0%, white 70%, #6b716f);
+    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    background: linear-gradient(top, #cde6f9 0%, white 60%, #6b716f);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde6f9', endColorstr='#6b716f', GradientType=0);
 }
 
 #inset {
@@ -717,6 +724,17 @@ there.
 /* smaller than tablet */
 
 @media (max-width: 750px) {
+    .mapDesktop {
+        /* overflow: hidden;
+        position: absolute; */
+        bottom: 0px;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+    }
+    .main {
+        padding-top: 0;
+    }
     .header ul li {
         display: list-item;
         float: none;

src/js/main.js

@@ -11,7 +11,6 @@ import * as domEvent from './core/domEvent';
 import { Coordinates } from './controls/Coordinates';
 import { NortArrow } from './controls/NorthArrow';
 import { LayerControl } from './controls/LayerControl';
-import { MobileDialog } from './controls/MobileDialog';
 import { BasemapControl } from './controls/BasemapControl';
 import { SliderControl } from './controls/SliderControl';
 import { Mesh } from 'three/src/objects/Mesh';
@@ -20,7 +19,6 @@ import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
 import * as util from './core/utilities';
 import * as browser from './core/browser';
 import * as domUtil from './core/domUtil';
-import { BoxLayer } from './layer/BoxLayer';
 
 import '../css/page.css'; /* style loader will import it */
 
@@ -87,7 +85,9 @@ class Application {
         // this.renderer.setSize(window.innerWidth, window.innerHeight);
         // document.body.appendChild(this.renderer.domElement);
         this.renderer.setSize(this.width, this.height);
-        this.renderer.setClearColor(bgcolor, 1); // second param is opacity, 0 => transparent       
+        //this.renderer.setClearColor(bgcolor, 1); // second param is opacity, 0 => transparent  
+        this.renderer.setClearColor(0x000000, 0.0);
+
         // let Empty = Object.freeze([]);
         // this.renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes
         // this.renderer.localClippingEnabled = true;
@@ -122,7 +122,7 @@ class Application {
         let x = { min: 3955850, max: 4527300, avg: 4282010 };
         let y = { min: 2183600, max: 2502700, avg: 2302070 };
         let z = { min: -60066, max: 3574.94, avg: -13616.3 };
-        const center = new Vector3 ( (x.min + x.max) / 2, (y.min + y.max) / 2, z.avg );
+        const center = new Vector3((x.min + x.max) / 2, (y.min + y.max) / 2, z.avg);
         // const center = new Vector3(x.avg, y.avg, z.avg);
         const size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);
 
@@ -187,8 +187,8 @@ class Application {
                 // "offsetY": 0,
                 // "offsetX" : x.avg,
                 // "offsetY" : y.avg,
-                "offsetX" : center.x,
-                "offsetY" : center.y,
+                "offsetX": center.x,
+                "offsetY": center.y,
                 "height": y.max - y.min, //78.59618717504333
             },
             "dem_values": [],