From f654582403b4cedc5a1ec01a1ac847a108b6de66 Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@geologie.ac.at>
Date: Tue, 19 Jan 2021 11:13:45 +0100
Subject: [PATCH] - add linear background for map in page.css - set ClearColor
 of WebGlRenderer to transparent (main.js)

---
 src/css/page.css | 18 ++++++++++++++++++
 src/js/main.js   | 16 ++++++++--------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/css/page.css b/src/css/page.css
index ecc055b..16d9ed5 100644
--- a/src/css/page.css
+++ b/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;
diff --git a/src/js/main.js b/src/js/main.js
index b6fbd58..a9fef4b 100644
--- a/src/js/main.js
+++ b/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 */
 
@@ -56,7 +54,7 @@ class Application {
         // this.addEventListeners();
 
         this.mapIcon = document.querySelector('#menu-map-icon');
-       
+
 
         this.createScene();
         this.addEventListeners();
@@ -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": [],
@@ -200,7 +200,7 @@ class Application {
         let dxf134Layer = new TinLayer({
             geomId: 134, q: true, type: "3dface", name: "South Alpine Superunit", description: "test", color: "907A5C"
         });
-        this.map.addLayer(dxf134Layer);        
+        this.map.addLayer(dxf134Layer);
 
         let dxf135Layer = new TinLayer({
             geomId: 135, q: true, type: "3dface", name: "Adriatic Plate", description: "test2", color: "A0512D"