implement layer compare slider

projects/common-map/src/fm-map/components/map/map.component.scss

@@ -1,6 +1,6 @@
 @import "~bootstrap/scss/bootstrap.scss";
 
-aol-map { position:absolute;width:100%;height:calc(100vh + 4rem);}
+aol-map { position:absolute;width:100%;height:calc( 100vh );}
 
 .arrow {
   top: 3rem;
@@ -45,29 +45,39 @@ aol-map { position:absolute;width:100%;height:calc(100vh + 4rem);}
   text-overflow:ellipsis;
 }
 
-
-.control-container {
+.viewport-container {
   position: absolute;
-  right: 1em;
-  bottom: 8.1em;
+  left:0;
+  right:0;
+  bottom:0;
+  margin-bottom:4em;
+  pointer-events: none;
 }
 
-.fullscreen .control-container {
-  bottom: 5em;
+
+.control-container {
+  float:right;
+  margin-right: 1em;
+  pointer-events: all;
+}
+
+.fullscreen .viewport-container {
+  margin-bottom: 1em;
 }
 
 .side-panel-container {
   position: absolute;
   top:0em;
-  bottom: 7.1em;
+  bottom: 3em;
   width: 100%;
   pointer-events: none;
 }
 
 .fullscreen .side-panel-container {
-  bottom: 4em;
+  bottom:0;
 }
 
+
 switch2d3d {
   position: absolute;
   right: 1em;
@@ -115,6 +125,21 @@ div.header button {
   max-height: 2.5em;
 }
 
+.slide-container {
+  display: none;
+  pointer-events: all;
+  width: 100%;
+  overflow: hidden;
+}
+
+.dataLayerSlide {
+  width:100%
+}
+
+.slide-container.showDataLayerSlide {
+  display: block;
+}
+
 timespan {
   position: absolute;
   transition: left 0.5s;