- TinLayer.js: add scaleZ methode for z-exaggeration

- new RangeSlider.js and RangeSlider.css
- new SliderControl.js and SliderControl.css
- small changes in EventEmitter.js
- change GetiefExplore.code-workspace for debugging
- document formating for page.css

GeotiefExplore.code-workspace

@@ -18,6 +18,7 @@
 				"url": "http://localhost:8080",
 				"webRoot": "${workspaceFolder}",
 				"breakOnLoad": true,
+				"runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
 				// "sourceMapPathOverrides": {
 				// 	"webpack:///./~/*": "${workspaceFolder}/node_modules/*", 
 				// 	"webpack:///./*":   "${workspaceFolder}/*", 

src/js/controls/SliderControl.css

@@ -0,0 +1,105 @@
+.gba-control-slider {  
+    background: none repeat scroll 0 0 #FFF;    
+}
+
+.gba-control-slider.vertical {
+    width: 26px;    
+    height: 100%;
+    /* background-color: azure; */
+}
+
+.gba-control-slider.horizontal {
+    height: 26px;
+    padding-right: 5px;
+}
+
+.gba-control-slider .leaflet-range-icon {
+    display: inline-block;   
+    width: 26px;
+    height: 26px;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+DQogICAgPHBhdGggZD0iTTE1IDE3djJoMnYtMmgydi0yaC0ydi0yaC0ydjJoLTJ2Mmgyem01LTE1SDRjLTEuMSAwLTIgLjktMiAydjE2YzAgMS4xLjkgMiAyIDJoMTZjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnpNNSA1aDZ2Mkg1VjV6bTE1IDE1SDRMMjAgNHYxNnoiLz4NCjwvc3ZnPg==');
+}
+
+.gba-control-slider input[type=range] {   
+    cursor: pointer;  
+    -webkit-appearance: none;
+    z-index: 200;
+    width: 100%;
+    border: 1px solid #e6e6e6;
+    background-color: #e6e6e6;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#d2d2d2));
+    background-image: -webkit-linear-gradient(right, #e6e6e6, #d2d2d2);
+    background-image: -moz-linear-gradient(right, #e6e6e6, #d2d2d2);
+    background-image: -ms-linear-gradient(right, #e6e6e6, #d2d2d2);
+    background-image: -o-linear-gradient(right, #e6e6e6, #d2d2d2)
+}
+
+.gba-control-slider input[type=range][orient=horizontal] {
+    margin-top: 5px;
+    width: 150px;
+}
+
+.gba-control-slider input[type=range][orient=vertical] {
+    height: 150px;
+    /* writing-mode: bt-lr; */
+
+    /*
+     * -webkit-appearance is non-standard and may break in the future:
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
+     * However, for now it's the only way to get a vertical range input on Chrome.
+     */
+    /* -webkit-appearance: slider-vertical; */
+
+    writing-mode: bt-lr; /* IE */
+    -webkit-appearance: slider-vertical; /* WebKit */
+
+    /* -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg) */
+}
+
+input[type=range].range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 10px;
+    height: 10px;
+    background: #FF0000;
+    cursor: pointer;
+}
+
+input[type=range].round {
+    -webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    border-radius: 20px
+}
+
+
+
+
+/* .gba-control-slider span {
+    width: 30px;
+    height: 30px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    border-radius: 5px;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAAAAAAeW/F+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAeUlEQVQoz8XTIQ6AMAyF4d3/BrUkSA6CRcAJJoYYDgX5ESxhoi1goPZL9rp2C+JW+Ip3lzOLwz0w2AxAazFn2dmJ5LUWiQ8YqhyVRaR0ofGlGleqt8Ydl1NUrtIVLsq7e2eyPbUVgM1fqD3zBuiclYxM7lOcf/wGSh2kFUcUTGKFMQAAAABJRU5ErkJggg==');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    display: block;
+} */
+
+/*paragraph for showing the value*/
+.gba-control-slider p.gba-control-slider-value {
+    line-height: 26px;   
+    text-align: center;
+    text-decoration: none;
+    color: #000;
+    font-weight: bold;
+    font-size: 1.1em;
+    display: none;
+}

src/js/controls/SliderControl.js

@@ -0,0 +1,158 @@
+import { Control } from "./Control";
+import * as dom from '../core/domUtil';
+import * as util from '../core/utilities';
+import * as domEvent from '../core/domEvent';
+import { RangeSlider } from '../core/RangeSlider';
+
+import './SliderControl.css';
+
+export class SliderControl extends Control {
+
+    options = {
+        size: '100px',
+        position: 'topright',
+        min: 1,
+        max: 5,
+        step: 0.5,
+        id: "slider",
+        value: 1,
+        collapsed: false,
+        title: 'Z Slider',
+        orientation: 'vertical',
+        showValue: true,
+        syncSlider: false,
+        iconClass: 'leaflet-range-icon',
+        icon: true
+    };
+    map;
+
+    constructor(options) {
+        super(options);
+
+        util.setOptions(this, options);
+    }
+
+    onAdd(map) {
+        this.map = map;
+        let container = this._container = this._initLayout();
+        //this.update(this.options.value + "");
+        return container;
+    }
+
+    _initLayout() {
+
+        var className = 'gba-control-slider';
+        var className2 = className + ' ' + this.options.orientation;
+        //this._container = domUtil.create('div', className + ' ' + className + '-' + this.options.orientation);
+        let container = this._container = dom.createDom("div", { "class": className2 });
+
+        ///////////////// der eigentliche Button
+        //this._sliderLink = domUtil.create('a', className + '-toggle', this._container);
+        //this._sliderLink.setAttribute("title", this.options.title);
+        //this._sliderLink.innerHTML = this.options.logo;
+        this._sliderLink = dom.createDom("span", { "class": className + "-toggle", title: this.options.title }, container);
+
+        //if (this.options.showValue) {
+        //    this._sliderValue = L.DomUtil.create('p', className + '-value', this._container);
+        //    this._sliderValue.innerHTML = this.options.getValue(this.options.value);
+        //}
+        //show value
+        this._sliderValue = dom.createDom("p", { "class": className + "-value", innerHTML: this.options.value }, container);
+
+        //if (this.options.increment) {
+        //    this._plus = L.DomUtil.create('a', className + '-plus', this._container);
+        //    this._plus.innerHTML = "+";
+        //    L.DomEvent.on(this._plus, 'click', this._increment, this);
+        //    L.DomUtil.addClass(this._container, 'leaflet-control-slider-incdec');
+        //}
+
+        //this._sliderContainer = L.DomUtil.create('div', 'leaflet-slider-container', this._container);
+        this._sliderContainer = dom.createDom('div', { "class": 'gba-slider-container' }, container);
+
+        // this.slider = dom.createDom('input', { "class": 'gba-slider round' }, this._sliderContainer);
+        // if (this.options.orientation === 'vertical') { this.slider.setAttribute("orient", "vertical"); }
+        // this.slider.setAttribute("title", this.options.title);
+        // this.slider.setAttribute("id", this.options.id);
+        // this.slider.setAttribute("type", "range");
+        // this.slider.setAttribute("min", this.options.min);
+        // this.slider.setAttribute("max", this.options.max);
+        // this.slider.setAttribute("step", this.options.step);
+        // this.slider.setAttribute("value", this.options.value);
+
+        this.slider = new RangeSlider(this._sliderContainer, {
+            orientation: "vertical",
+            value: 1,
+            max: 5, min: 1,
+            inverse: true,
+            id: "z-slider"
+        });
+
+        //if (this.options.syncSlider) {
+        //    L.DomEvent.on(this.slider, "input", function (e) {
+        //        this._updateValue();
+        //    }, this);
+        //} else {
+        //    L.DomEvent.on(this.slider, "change", function (e) {
+        //        this._updateValue();
+        //    }, this);
+        //}
+        // domEvent.on(this.slider, "change", this._updateValue, this);
+
+        this.slider.addListener('slide', this._updateValue, this);
+
+        //if (this.options.increment) {
+        //    this._minus = L.DomUtil.create('a', className + '-minus', this._container);
+        //    this._minus.innerHTML = "-";
+        //    L.DomEvent.on(this._minus, 'click', this._decrement, this);
+        //}
+
+        // if (this.options.showValue) {
+        //     if (window.matchMedia("screen and (-webkit-min-device-pixel-ratio:0)").matches && this.options.orientation === 'vertical') {
+        //         this.slider.style.width = (this.options.size.replace('px', '') - 36) + 'px';
+        //         this._sliderContainer.style.height = (this.options.size.replace('px', '') - 36) + 'px';
+        //     }
+        //     else if (this.options.orientation === 'vertical') {
+        //         this._sliderContainer.style.height = (this.options.size.replace('px', '') - 36) + 'px';
+        //     }
+        //     else {
+        //         this._sliderContainer.style.width = (this.options.size.replace('px', '') - 25) + 'px';
+        //     }
+        // } 
+        //else {
+        //    if (window.matchMedia("screen and (-webkit-min-device-pixel-ratio:0)").matches && this.options.orientation == 'vertical') { this.slider.style.width = (this.options.size.replace('px', '') - 10) + 'px'; this._sliderContainer.style.height = (this.options.size.replace('px', '') - 10) + 'px'; }
+        //    else if (this.options.orientation == 'vertical') { this._sliderContainer.style.height = (this.options.size.replace('px', '') - 10) + 'px'; }
+        //    else { this._sliderContainer.style.width = (this.options.size.replace('px', '') - 25) + 'px'; }
+        //}
+
+        //L.DomEvent.disableClickPropagation(this._container);
+
+
+        return container;
+    }
+
+    _updateValue(e) {
+        this.value = e.value;//this.slider.value;
+        if (this.options.showValue) {
+            this._sliderValue.innerHTML = this.value;
+        }
+        //this.options.layers[0].scaleZ(this.value);
+        //this.update(this.value);
+
+        //this.options.layers.forEach(function (layer) {
+        //    layer.scaleZ(this.value);
+        //},this);
+        //this._map._layers.forEach(function (layer) {
+        //        layer.scaleZ(this.value);
+        //},this);
+        for (var prop in this._map._layers) {
+            if (this._map._layers.hasOwnProperty(prop)) {
+                var layer = this._map._layers[prop];
+                // if (layer.declaredClass === "GridLayer" || layer.declaredClass === "DxfLayer" || layer.declaredClass === "DemLayer")
+                layer.scaleZ(this.value);
+            }
+        }
+        this._map.update();
+    }
+
+
+}

src/js/core/EventEmitter.js

@@ -159,9 +159,9 @@ class EventEmitter {
             return this;
         }
 
-        var event = util.extend({}, data, { type: type, target: this });
+        let event = util.extend({}, data, { type: type, target: this });
 
-        var events = this[eventsKey],
+        let events = this[eventsKey],
             listeners, i, len, typeIndex, contextId;
 
         if (events[type]) {

src/js/core/RangeSlider.css

@@ -0,0 +1,172 @@
+    /* .range-slider-track .dragger {
+      display: block;   
+      position: relative;
+      z-index: 2;     
+      cursor: inherit;
+      border: none;
+      height: inherit;     
+      width: 14px;
+      border-radius: 5%;
+      background: #333;     
+    } */
+    .slider {
+      display: inline-block;
+      vertical-align: middle;
+      position: relative;
+    }
+
+    .slider.slider-vertical {
+      height: 160px;
+      width: 25px;
+    }
+
+    .slider.slider-vertical .range-slider-track {
+      cursor: pointer;
+      /* cursor: pointer; */
+      width: 5px;
+      height: 100%;
+      /* margin-left: -5px; */
+      left: 50%;
+      top: 0;
+    }
+    .slider.slider-vertical .slider-selection {
+      width: 100%;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      border-radius:0%;
+    }
+
+    /* .slider-vertical .range-slider-track:before {
+      top: 0;
+      right: auto;
+      left: 9px;
+      width: 2px;
+      height: 100%;
+    } */
+
+    .slider.slider-vertical .slider-handle {
+      margin-left: -10px;
+      /* margin-top: -10px; */
+    }
+    .slider.slider-vertical .slider-handle.triangle {
+      border-width: 10px 0 10px 10px;
+      width: 1px;
+      height: 1px;
+      border-left-color: #0480be;
+      margin-left: 0;
+    }
+
+
+
+    /*.no-select {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;    
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}*/
+
+    .slider {
+      display: inline-block;
+      vertical-align: middle;
+      position: relative;
+    }
+
+    .slider.slider-horizontal {
+      width: 100px;
+      height: 20px;
+    }
+
+    .slider.slider-horizontal .range-slider-track {
+      height: 8px;
+      width: 100%;
+      margin-top: -5px;
+      top: 50%;
+      left: 0;
+    }
+
+ 
+    .slider.slider-horizontal .slider-selection {
+      height: 100%;
+      top: 0;
+      bottom: 0;
+    }
+
+    .slider.slider-horizontal .slider-handle {
+      margin-left: -10px;
+      margin-top: -5px;
+    }
+
+
+
+    .range-slider-track {
+      position: absolute;
+      cursor: pointer;
+      background-color: #333;
+      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+    }
+
+
+    /*.slider.slider-horizontal .slider-handle.triangle {
+  border-width: 0 10px 10px 10px;
+  width: 0;
+  height: 0;
+  border-bottom-color: #0480be;
+  margin-top: 0;
+}*/
+
+
+.slider input {
+  display: none;
+}
+    .slider .tooltip-inner {
+      white-space: nowrap;
+    }
+
+    .slider-selection {
+      position: absolute;
+      background-image: -moz-linear-gradient(top, #808080, rgba(0, 0, 0, 0.15));
+      background-image: -webkit-gradient(linear, 0 0, 0 100%, from( #808080), to(#f9f9f9));
+      background-image: -webkit-linear-gradient(top, #808080, #f9f9f9);
+      background-image: -o-linear-gradient(top, #808080, #f9f9f9);
+      background-image: linear-gradient(to bottom, #808080, #f9f9f9);
+      background-repeat: repeat-x;
+      /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#fff9f9f9', GradientType=0); */
+      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      border-radius: 4px;
+    }
+
+    .slider-handle {
+      position: absolute;
+      width: 25px;
+      height: 10px;
+      /* background-color: #0e90d2; */
+      background-color:black;
+      /* background-image: -moz-linear-gradient(top, #149bdf, #0480be);
+      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
+      background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
+      background-image: -o-linear-gradient(top, #149bdf, #0480be);
+      background-image: linear-gradient(to bottom, #149bdf, #0480be);
+      background-repeat: repeat-x;
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); */
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
+      opacity: 0.8;
+      border: 0 solid transparent;
+    }
+
+    .slider-handle.round {
+      /* border-radius: 20px; */
+    }
+
+    .slider-handle.triangle {
+      background: transparent none;
+    }
+
+    .hide {
+      visibility: hidden;
+    }

src/js/core/RangeSlider.js

@@ -0,0 +1,357 @@
+import { EventEmitter } from './EventEmitter';
+import * as dom from '../core/domUtil';
+import * as util from '../core/utilities';
+import * as domEvent from '../core/domEvent';
+
+import './RangeSlider.css';
+
+class RangeSlider extends EventEmitter {
+
+    over = false;
+    inDrag = false;
+
+    options = {
+        value: 0, // set default value on initiation from `0` to `100` (percentage based)
+        vertical: false, // vertical or horizontal?
+        orientation: "horizontal",
+        rangeClass: "", // add extra custom class for the range slider track
+        draggerClass: "",// add extra custom class for the range slider dragger
+        //min: -50,
+        //max: 50,
+        selection: 'before',
+        tooltip: 'show',
+        handle: 'round',
+        step: 1
+    };
+
+    constructor(elem, options) {
+        super();
+
+        util.setOptions(this, options);
+        this.value = this.options.value;
+
+        this.element = elem;
+
+        //this._initLayout();
+        this.picker = dom.createDom("div", {
+            "class": 'slider', innerHTML:
+                '<div class="range-slider-track">' +
+                '<div class="slider-selection"></div>' +
+                '<div class="slider-handle"></div>' +
+                '<div class="slider-handle"></div>' +
+                '</div>' +
+                '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+
+        }, this.element);
+
+        this.id = this.options.id;
+        // var tooltip = this.options.tooltip;
+        this.tooltip = this.picker.getElementsByClassName('tooltip')[0];
+        this.tooltipInner = this.tooltip.getElementsByClassName('tooltip-inner')[0];
+        this.sliderTrack = this.picker.getElementsByClassName('range-slider-track')[0];
+
+        this.orientation = this.options.orientation;
+
+        if (this.orientation === "horizontal") {
+            dom.addClass(this.picker, "slider-horizontal");
+            //.addClass('slider-horizontal')
+            //.css('width', this.element.outerWidth());             
+            //$(this.picker).css('width', $(this.element).outerWidth());
+            //this.picker.style.width = this.element['offsetWidth'] + 'px';
+            this.orientation = 'horizontal';
+            this.stylePos = 'left';
+            this.mousePos = 'pageX';
+            this.sizePos = 'offsetWidth';
+            //this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px';
+            dom.addClass(this.tooltip, "top");
+            this.tooltip.style.top = -this.tooltip['offsetHeight'] - 14 + 'px';
+        } else {
+            dom.addClass(this.picker, "slider-vertical");
+            this.stylePos = 'top';
+            this.mousePos = 'pageY';
+            this.sizePos = 'offsetHeight';
+            // this.tooltip.addClass('right')[0].style.left = '100%';
+            dom.addClass(this.tooltip, "right");
+            this.tooltip.style.left = "100%";
+        }
+
+        this.min = this.options.min;
+        this.max = this.options.max;
+        this.step = this.options.step;
+        this.value = this.options.value;
+        //if (this.value[1]) {
+        //    this.range = true;
+        //}
+
+        this.selection = this.options.selection;
+        this.selectionEl = this.picker.getElementsByClassName('slider-selection')[0];
+        if (this.selection === 'none') {
+            //this.selectionEl.addClass('hide');
+            dom.addClass(this.selectionEl, "hide");
+        }
+        this.selectionElStyle = this.selectionEl.style;
+
+        this.handle1 = this.picker.getElementsByClassName('slider-handle')[0];
+        this.handle1Stype = this.handle1.style;
+        this.handle2 = this.picker.getElementsByClassName('slider-handle')[1];
+        this.handle2Stype = this.handle2.style;
+
+        var handle = this.options.handle;
+        switch (handle) {
+            case 'round':
+                dom.addClass(this.handle1, "round");
+                dom.addClass(this.handle2, "round");
+                break;
+            case 'triangle':
+                dom.addClass(this.handle1, "triangle");
+                dom.addClass(this.handle2, "triangle");
+                break;
+        }
+
+        if (this.range) {
+            this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
+            this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
+        }
+        {
+            this.value = [Math.max(this.min, Math.min(this.max, this.value))];
+            //this.handle2.addClass('hide');
+            dom.addClass(this.handle2, "hide");
+            if (this.selection === 'after') {
+                this.value[1] = this.max;
+            } else {
+                this.value[1] = this.min;
+            }
+        }
+
+        this.diff = this.max - this.min;
+        this.percentage = [
+            (this.value[0] - this.min) * 100 / this.diff,
+            (this.value[1] - this.min) * 100 / this.diff,
+            this.step * 100 / this.diff
+        ];
+
+        //this.offset = this.picker.offset();
+        // this.offset = $(this.picker).offset();
+        this.offset = this._getOffset(this.picker);
+
+        this.size = this.picker[this.sizePos];
+
+        //this.formater = options.formater;
+
+        this.layout();
+
+        domEvent.on(this.picker, "mousedown", this.mousedown, this);
+        dom.addClass(this.tooltip, "hide");
+    }
+
+    layout() {
+        this.handle1Stype[this.stylePos] = this.percentage[0] + '%';
+        //this.handle2Stype[this.stylePos] = this.percentage[1] + '%';
+
+        if (this.orientation == 'vertical') {
+            this.selectionElStyle.top = Math.min(this.percentage[0], this.percentage[1]) + '%';
+            this.selectionElStyle.height = Math.abs(this.percentage[0] - this.percentage[1]) + '%';
+        } else {
+            this.selectionElStyle.left = Math.min(this.percentage[0], this.percentage[1]) + '%';
+            this.selectionElStyle.width = Math.abs(this.percentage[0] - this.percentage[1]) + '%';
+        }
+
+        //if (this.range) {
+        //    this.tooltipInner.text(
+        //		this.formater(this.value[0]) +
+        //		' : ' +
+        //		this.formater(this.value[1])
+        //	);
+        //    this.tooltip[0].style[this.stylePos] = this.size * (this.percentage[0] + (this.percentage[1] - this.percentage[0]) / 2) / 100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight() / 2 : this.tooltip.outerWidth() / 2) + 'px';
+        //} else {
+        //    this.tooltipInner.text(
+        //		this.formater(this.value[0])
+        //	);
+        //    this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0] / 100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight() / 2 : this.tooltip.outerWidth() / 2) + 'px';
+        //}
+    }
+
+    _getOffset(element) {
+        if (!element.getClientRects().length) {
+            return { top: 0, left: 0 };
+        }
+
+        let rect = element.getBoundingClientRect();
+        let win = element.ownerDocument.defaultView;
+        return (
+            {
+                top: rect.top + win.pageYOffset,
+                left: rect.left + win.pageXOffset
+            });
+    }
+
+    mousedown(ev) {
+
+        // Touch: Get the original event:
+        if (this.touchCapable && ev.type === 'touchstart') {
+            ev = ev.originalEvent;
+        }
+
+        //this.offset = this.picker.offset();
+        // this.offset = $(this.picker).offset();
+        this.offset = this._getOffset(this.picker);
+
+        this.size = this.picker[this.sizePos];
+
+        let percentage = this.getPercentage(ev);
+
+        if (this.range) {
+            // var diff1 = Math.abs(this.percentage[0] - percentage);
+            // var diff2 = Math.abs(this.percentage[1] - percentage);
+            // this.dragged = (diff1 < diff2) ? 0 : 1;
+        }
+        else {
+            this.dragged = 0;
+        }
+
+        this.percentage[this.dragged] = percentage;
+        this.layout();
+
+        domEvent.on(this.picker, "mousemove", this.mousemove, this);
+        domEvent.on(this.picker, 'mouseup', this.mouseup, this);
+        domEvent.on(this.picker, 'mouseleave', this.onMouseLeave, this);
+
+        this.inDrag = true;
+        let value = this.calculateValue();
+        //if (this.options.inverse === true) {
+        //    val = val * -1;
+        //}
+
+        this.emit("slide", { value: value });
+       
+        return false;
+    }
+
+    mousemove(ev) {
+        this.handle1.style.cursor = "grab";
+        this.sliderTrack.style.cursor = "grab";
+
+        // Touch: Get the original event:
+        if (this.touchCapable && ev.type === 'touchmove') {
+            ev = ev.originalEvent;
+        }
+
+        let percentage = this.getPercentage(ev);
+        // if (this.range) {
+        //     if (this.dragged === 0 && this.percentage[1] < percentage) {
+        //         this.percentage[0] = this.percentage[1];
+        //         this.dragged = 1;
+        //     } else if (this.dragged === 1 && this.percentage[0] > percentage) {
+        //         this.percentage[1] = this.percentage[0];
+        //         this.dragged = 0;
+        //     }
+        // }
+
+        // this.percentage[this.dragged] = percentage;
+        if (this.percentage[this.dragged] != percentage) { 
+            this.percentage[this.dragged] = percentage;
+            this.layout();
+            let value = this.calculateValue();
+            this.emit("slide", { value: value });
+        }       
+        //if (this.options.inverse === true) {
+        //    val = val * -1;
+        //}
+
+        // this.layout();
+        // let value = this.calculateValue();     
+        
+        return false;
+    }
+
+    mouseup(ev) {
+        this.handle1.style.cursor = "pointer";
+        this.sliderTrack.style.cursor = "pointer"; 
+
+        domEvent.off(this.picker, "mousemove", this.mousemove, this);
+        domEvent.off(this.picker, 'mouseup', this.mouseup, this);
+        domEvent.off(this.picker, 'mouseleave', this.onMouseLeave, this);
+
+        this.inDrag = false;
+        //if (this.over == false) {
+        //    this.hideTooltip();
+        //}
+        this.element;
+        let value = this.calculateValue();        
+        this.emit('onChange', { value: value, status: 'ok'});       
+        return false;
+    }
+
+    onMouseLeave() {
+        this.handle1.style.cursor = "pointer";
+        this.sliderTrack.style.cursor = "pointer"; 
+
+        domEvent.off(this.picker, "mousemove", this.mousemove, this);
+        domEvent.off(this.picker, 'mouseup', this.mouseup, this);
+        domEvent.off(this.picker, 'mouseleave', this.onMouseLeave, this);
+
+        this.inDrag = false; 
+        
+        //also change border geometry
+        let value = this.calculateValue();
+        this.emit('onChange', { value: value, status: 'ok'});    
+    }
+
+    calculateValue() {
+        var val;
+        if (this.range) {
+            val = [
+                (this.min + Math.round((this.diff * this.percentage[0] / 100) / this.step) * this.step),
+                (this.min + Math.round((this.diff * this.percentage[1] / 100) / this.step) * this.step)
+            ];
+            this.value = val;
+        } else {
+            val = (this.min + Math.round((this.diff * this.percentage[0] / 100) / this.step) * this.step);
+            this.value = [val, this.value[1]];
+        }
+        return val;
+    }
+
+    getPercentage(ev) {
+        if (this.touchCapable) {
+            ev = ev.touches[0];
+        }
+        var percentage = (ev[this.mousePos] - this.offset[this.stylePos]) * 100 / this.size;
+        percentage = Math.round(percentage / this.percentage[2]) * this.percentage[2];
+        return Math.max(0, Math.min(100, percentage));
+    }
+
+    getValue() {
+        if (this.range) {
+            return this.value;
+        }
+        return this.value[0];
+    }
+
+    setValue(val) {
+        this.value = val;
+
+        if (this.range) {
+            this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
+            this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
+        } else {
+            this.value = [Math.max(this.min, Math.min(this.max, this.value))];
+            this.handle2.addClass('hide');
+            if (this.selection === 'after') {
+                this.value[1] = this.max;
+            } else {
+                this.value[1] = this.min;
+            }
+        }
+        this.diff = this.max - this.min;
+        this.percentage = [
+            (this.value[0] - this.min) * 100 / this.diff,
+            (this.value[1] - this.min) * 100 / this.diff,
+            this.step * 100 / this.diff
+        ];
+        this.layout();
+    }
+
+}
+
+export { RangeSlider };

src/js/layer/TinLayer.js

@@ -41,10 +41,15 @@ class TinLayer extends Layer {
 
     setVisible(visible) {
         this.visible = visible;
-        this.mainMesh.visible = visible;    
+        this.mainMesh.visible = visible;
         this.emit('visibility-change');
     }
 
+    scaleZ(z) {
+        this.mainMesh.scale.z = z;
+        //this.objectGroup.scale.z = z;
+    }
+
     async onAdd(map) {
         await this.build(this.getScene());
         map.update();
@@ -95,14 +100,14 @@ class TinLayer extends Layer {
 
     async points(geomId) {
         const url = POINTURL + geomId;
-        const buffer = await this.request(url);      
+        const buffer = await this.request(url);
-        return this.unpackVertices(buffer);       
+        return this.unpackVertices(buffer);
     }
 
     async edges(geomId) {
         const url = EDGEURL + geomId;
-        const buffer = await this.request(url);       
+        const buffer = await this.request(url);
-        return this.unpackEdges(buffer);       
+        return this.unpackEdges(buffer);
     }
 
     async request(url) {

src/js/main.js

@@ -10,6 +10,7 @@ import * as domEvent from './core/domEvent';
 import { Coordinates } from './controls/Coordinates';
 import { NortArrow } from './controls/NorthArrow';
 import { LayerControl } from './controls/LayerControl';
+import { SliderControl } from './controls/SliderControl';
 import { Mesh } from 'three/src/objects/Mesh';
 import { SphereGeometry } from 'three/src/geometries/SphereGeometry';
 import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
@@ -165,6 +166,8 @@ class Application {
             parentDiv: 'layer-control-parent-id'
         }).addTo(this.map);
 
+        //slider for scaling z value
+        this.slider = new SliderControl({ layers: this.map.layers }).addTo(this.map);
 
         // domEvent.on(window, 'resize', this.onWindowResize, this);
         // domEvent.on(window, 'keydown', this.keydown, this);