- add ZoomControl.js

- add zoom control as default control to map object

src/js/controls/HomeButton.js

@@ -3,6 +3,8 @@ import * as dom from '../core/domUtil';
 import * as domEvent from '../core/domEvent';
 
 class HomeButton extends Control {
+
+    map;
     options = {
         position: 'topright',
         homeText: '+',
@@ -85,14 +87,13 @@ class HomeButton extends Control {
         //var link = L.DomUtil.create('a', className, container);
         let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container);
 
-        // let stop = domEvent.stopPropagation();
-        domEvent.on(link, 'click', fn, context);
+        // let stop = domEvent.stopPropagation;
+        domEvent
         // .on(link, 'click', stop)
         // .on(link, 'mousedown', stop)
         // .on(link, 'dblclick', stop)
-        // .on(link, 'click', domEvent.preventDefault())
-        // //.on(link, 'click', fn.bind(this));
-        // .on(link, 'click', fn, context);
+        // .on(link, 'click', domEvent.preventDefault)       
+        .on(link, 'click', fn, context);
 
         return link;
     }

src/js/controls/ZoomControl.css

@@ -0,0 +1,29 @@
+.gba-control-zoom {
+    border-radius: 4px;
+}
+
+    .gba-control-zoom span {
+        display: block;
+        height: 30px;
+        width: 31px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        cursor: pointer;
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+    }
+/*.my-gba-control-zoom a:hover {	
+    background-color: rgba(102,102,102,0.90);   
+	}*/
+.gba-control-zoom-in {   
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAxlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZn///+VlZWYmJiZmZmWlpaXl5fw8PDk5OT6+vrm5uarq6uampqkpKTn5+egoKD7+/vy8vLl5eX5+fng4OCenp6SkpKcnJz8/PydnZ3x8fGxsbGtra2mpqbh4eGioqL9/f3r6+ufn5+qqqqhoaGoqKjs7Oybm5uUlJSWaKJBAAAAGnRSTlPk+cftAOPvgvgGkut0WrvJytuzaf1Fbc/EUVDNfwkAAADBSURBVHhetdLFssMwDIZRNU3xIoMMYSzjZXr/l6q1izO1dv1Wmjk7zQ+j8VnneEM492GgmC6gx/El9Dm+gi7Hns1CCO3mbLfdptLFclkjFsLNIeLkBCxNwR/xv6RsztamZblBTNSaslj/hDX1jrja0PHxGTT5C+3i0uK0xZXFwT5KTEWFOJ3QNZvLBiupTUKFiNFCU6f4Gs/0FoZ/4/jVwdRbnn8rNwemNjN5/JCv4YbjW7hj9P4B/McnOF7v+cU/AEI2X3dttU52AAAAAElFTkSuQmCC') /*img/zoomIn.png*/;
+    margin-bottom: 2px;
+}
+
+.gba-control-zoom-out {   
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAMAAADHso01AAAAhFBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiZmZmXl5efn5+6urr////+/v6srKybm5uUlJStra319fW5ubmgoKCVlZW2tra9vb35+fm4/JSJAAAAGnRSTlN7x4/tAMjuGSy2aIteC+AWupAw5c4edI5nD8z6iFwAAAB3SURBVHhe3dK3DoQwDIBhB8KFfr2Z3q+8//uxEJYQZ2DLv36yZMkGLkLQFCcc/DTTxo4QZEQRuBQzOFDsGaZtYOzWNhiLsVz6tqjwp69k/yJXuaklDwobp/PpJytbJDe34ST7PtXEJ4rPcLnq9SaA3x/Ods/Xm8/EaFl6wRVnDgAAAABJRU5ErkJggg==') /*img/zoomOut.png*/;
+    /*font: bold 18px 'Lucida Console', Monaco, monospace;
+    text-indent: 1px;*/
+}

src/js/controls/ZoomControl.js

@@ -0,0 +1,89 @@
+import { Control } from "./Control";
+import * as dom from '../core/domUtil';
+import * as domEvent from '../core/domEvent';
+
+import './ZoomControl.css';
+
+
+class ZoomControl extends Control {
+
+    _map;
+
+    options = {
+        position: 'topright',
+        zoomInText: '+',
+        zoomInTitle: 'Zoom in',
+        zoomOutText: '-',
+        zoomOutTitle: 'Zoom out'
+    };
+
+    constructor(defaults) {
+        super(defaults);
+    }
+
+    onAdd(map) {
+        this.map = map;
+        // var b = this._nls = util.mixin({}, N.widgets.zoom);       
+        let className = 'gba-control-zoom';      
+        let container = this._container = dom.createDom("div", { "class": className });
+
+        this._map = map;
+        // don't use options.zoomInText because of predefined png
+        this._zoomInButton = this._createButton(
+            "", this.options.zoomInTitle,
+            // "", b.zoomInTitle,
+            className + '-in', container, this._zoomIn, this);
+
+          // don't use options.zoomOutText because of predefined png    
+        this._zoomOutButton = this._createButton(
+            "", this.options.zoomOutTitle,
+            // "", b.zoomOutTitle,
+            className + '-out', container, this._zoomOut, this);
+
+        this._updateDisabled();
+        //map.on('zoomend zoomlevelschange', this._updateDisabled, this);
+        return container;
+    }
+
+    _zoomIn(e) {
+        //this._map.zoomIn(e.shiftKey ? 3 : 1);
+        this._map.dollyOut();
+    }
+
+    _zoomOut(e) {
+        //this._map.zoomOut(e.shiftKey ? 3 : 1);
+        this._map.dollyIn();
+    }
+
+    _createButton(html, title, className, container, fn, context) {
+        let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container);
+
+        // let stop = domEvent.stopPropagation;
+        domEvent
+            // .on(link, 'click', stop)
+            // .on(link, 'mousedown', stop)
+            // .on(link, 'dblclick', stop)
+            // .on(link, 'click', domEvent.preventDefault)
+            .on(link, 'click', fn, context);
+        return link;
+    }
+
+    _updateDisabled () {
+      
+        var className = 'leaflet-disabled';
+
+        dom.removeClass(this._zoomInButton, className);
+        
+        dom.removeClass(this._zoomOutButton, className);
+       
+        //if (map._zoom === map.getMinZoom()) {
+        //    L.DomUtil.addClass(this._zoomOutButton, className);
+        //}
+        //if (map._zoom === map.getMaxZoom()) {
+        //    L.DomUtil.addClass(this._zoomInButton, className);
+        //}
+    }
+
+}
+
+export { ZoomControl };

src/js/core/Map.js

@@ -1,6 +1,7 @@
 import { OrbitControls } from '../lib/OrbitControls';
 import * as dom from './domUtil';
 import { HomeButton } from '../controls/HomeButton';
+import { ZoomControl } from '../controls/ZoomControl';
 import * as util from './utilities';
 
 class Map extends OrbitControls {
@@ -57,6 +58,9 @@ class Map extends OrbitControls {
         // this._controls.homeControl = (new HomeButton()).addTo(this);
         let homeControl = this._controls.homeControl = new HomeButton();
         homeControl.addTo(this);
+
+        let zoomControl = this._controls.zoomControl = new ZoomControl();
+        zoomControl.addTo(this);
     }
 
     addLayer(layer) {

src/js/core/browser.js

@@ -4,3 +4,14 @@
 // `true` for all browsers supporting [pointer events](https://msdn.microsoft.com/en-us/library/dn433244%28v=vs.85%29.aspx).
 export var pointer = !!(window.PointerEvent || msPointer);
 
+export var touch = !window.L_NO_TOUCH && (pointer || 'ontouchstart' in window ||
+        (window.DocumentTouch && document instanceof window.DocumentTouch));
+        
+
+// @property mobile: Boolean; `true` for all browsers running in a mobile device.
+export var mobile = typeof orientation !== 'undefined' || userAgentContains('mobile');
+
+
+function userAgentContains(str) {
+	return navigator.userAgent.toLowerCase().indexOf(str) >= 0;
+}

src/js/core/domUtil.js

@@ -3,7 +3,7 @@ import * as util from './utilities';
  * @namespace DomUtil
  *
  * Utility functions to work with the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)
- * tree, used by Leaflet internally.
+ * tree, used by 3D viewer internally.
  *
  * Most functions expecting or returning a `HTMLElement` also work for
  * SVG elements. The only difference is that classes refer to CSS classes
@@ -100,6 +100,15 @@ export function addClass(el, name) {
 	}
 }
 
+// @function removeClass(el: HTMLElement, name: String)
+// Removes `name` from the element's class attribute.
+export function removeClass(el, name) {
+	if (el.classList !== undefined) {
+		el.classList.remove(name);
+	} else {
+		setClass(el, util.trim((' ' + getClass(el) + ' ').replace(' ' + name + ' ', ' ')));
+	}
+}
 
 // @function setClass(el: HTMLElement, name: String)
 // Sets the element's class.

src/js/core/utilities.js

@@ -110,14 +110,14 @@ export function extend(dest) {
 // @function create(proto: Object, properties?: Object): Object
 // Compatibility polyfill for [Object.create](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
 export var create = Object.create || (function () {
-	function F() {}
+	function F() { }
 	return function (proto) {
 		F.prototype = proto;
 		return new F();
 	};
 })()
 
-export function showLoading () {
+export function showLoading() {
 	var element = dom.byId("loadingImg");
 	//domUtil.show(_loading);
 	if (element) {
@@ -125,7 +125,7 @@ export function showLoading () {
 	}
 }
 
-export function hideLoading () {
+export function hideLoading() {
 	var element = dom.byId("loadingImg");
 	if (element) {
 		element.style.display = "none";
@@ -133,7 +133,7 @@ export function hideLoading () {
 }
 
 // Merges the given properties to the `options` of the `obj` object, returning the resulting options. See `Class options`
-export function setOptions (obj, options) {
+export function setOptions(obj, options) {
 	if (!Object.prototype.hasOwnProperty.call(obj, 'options')) {
 		obj.options = obj.options ? create(obj.options) : {};
 	}
@@ -149,21 +149,21 @@ export var lastId = 0;
 
 // @function stamp(obj: Object): Number
 // Returns the unique ID of an object, assigning it one if it doesn't have it.
-export function stamp (obj){
+export function stamp(obj) {
 	let key = '_gba_id';
 	obj[key] = obj[key] || ++lastId;
 	return obj[key];
 
 }
 
-export function hasTouch () {
-	var phantomjs = navigator.userAgent.toLowerCase().indexOf('phantom') !== -1;
+export function hasTouch() {
+	let phantomjs = navigator.userAgent.toLowerCase().indexOf('phantom') !== -1;
 
-	var isTouchDevice = phantomjs
+	let isTouchDevice = phantomjs
 		|| 'ontouchstart' in window
-		|| (window.DocumentTouch && document instanceof window.DocumentTouch)
+		// || (window.DocumentTouch && document instanceof window.DocumentTouch)
 		|| ("onpointerdown" in document && navigator.maxTouchPoints > 0)
-		|| window.navigator.msMaxTouchPoints;
+		|| (window.navigator.msMaxTouchPoints > 0);
 	return isTouchDevice;
 }
 

src/js/main.js

@@ -120,7 +120,7 @@ class Application {
         // this.map.maxDistance = size*15;
 
         //add map controls:
-        if (!util.hasTouch) {
+        if (util.hasTouch() == false) {
             let coordinates = new Coordinates({ camera: this.camera, crs: "EPSG:3034" }).addTo(this.map);
             // coordinates.addListener('onPoint', (vector) => {           
             //     this.queryMarker.position.set(vector.x, vector.y, vector.z);