remove trailing spaces

8bc06769 · Rurik Bugdanov · f888f6f7 · 8bc06769 · 8bc06769 · 8bc06769
Commit 8bc06769 authored Jun 28, 2017 by Rurik Bugdanov
26 changed files
--- a/index.html
+++ b/index.html
@@ -3,14 +3,14 @@
  <head>
    <meta charset="utf-8"/>
    <title>x3d models index</title>
    <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
    <script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
    <script type='text/javascript' src='js/index.js'></script>
    <link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
    <link rel='stylesheet' type='text/css' href='js/index.css'></link>
  </head>
  <body>
  <div id="table_div">

--- a/js/index.css
+++ b/js/index.css
 table{
    border-collapse:collapse;
 }

--- a/js/index.js
+++ b/js/index.js
@@ -6,28 +6,28 @@ var markers = [];
 $(function(){
    //init();
    init_maps();
    $.ajax({
        url: "list.php",
        success: function(response){
            List = response;
            parse_list(response);
            $(".arow")[0].click();
        }
    });
 });
 function parse_list(res){
    var index = 0;
    $(res).find("model").each(function(){
        var row = $("<tr class='arow'>");
@@ -44,60 +44,60 @@ function parse_list(res){
        var vlist = "";
        $(this).find("version").each(function(i,v){
            var comments = $(this).find("comments").text();
            var link_url = "test.html?path="+name+"&ver="+$(this).attr("name");
            var link = "<a title='"+comments+"' href='"+link_url+"'>"+$(this).attr("name")+"</a>,&nbsp;";
            vlist += link;
        });
        vlist = vlist.slice(0,-7);
        row.append("<td class='acell' valign='top'><div>"+vlist+"</div></td>");
        row.attr("index",index);
        register_row_events(row);
        $("#model_table").append(row);
        //place markers
        $(this).find("Camera").each(function(){
            var lat = $(this).find("latitude").text();
            var lng = $(this).find("longitude").text();
            if (markers[lat+lng]==undefined){
                var marker = L.marker([lat, lng]).addTo(map);
                marker.bindPopup(name+": "+vlist,{
                    direction:"top",
                });
                markers[lat+lng] = marker;
            }else{
                console.log(markers[lat+lng]);
                var content = markers[lat+lng]._popup.getContent();
                markers[lat+lng]._popup.setContent(content+"<br/>"+name+": "+vlist);
            }
        });
        index++;
    });
 }
 function register_row_events(elem){
    $(elem).on("click",function(){
        $(".arow").css({
@@ -107,30 +107,30 @@ function register_row_events(elem){
        $(this).css({
            background: "rgba(100,200,255,0.7)"
        });
        var index = $(this).attr("index");
        var list = $(List).find("model");
        var item = list[index];
        var lat = $($(item).find("latitude")[0]).text();
        var lng = $($(item).find("longitude")[0]).text();
        map.panTo(new L.LatLng(lat, lng));
        if (markers[lat+lng]!=undefined){
            markers[lat+lng].openPopup();
        }
    });
 }
 // maps
 function init_maps(){
  // https: also suppported.
  var Esri_WorldImagery = L.tileLayer(
-    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    {
      maxZoom: 21,
      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
@@ -145,35 +145,35 @@ function init_maps(){
      subdomains:['mt0','mt1','mt2','mt3'],
    }
  );
-  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', 
+  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
      maxZoom: 21,
      attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }
  );
  map = L.map('leaflet_map',{
    layers:[googleSat],
    zoomControl:false,
  }).setView([40.7233861, -111.9328843], 12);
  new L.Control.Zoom({ position: 'topright' }).addTo(map);
  var baseMaps = {
    "Esri world imagery": Esri_WorldImagery,
    "Google": googleSat,
    "Open Street Map": OSMTiles
  };
  //Esri_WorldImagery.addTo(map);
  //googleSat.addTo(map);
  //custom control:
  //http://www.coffeegnome.net/control-button-leaflet/
  L.control.layers(baseMaps).addTo(map);
 }
--- a/js/leaflet/L.extra.js
+++ b/js/leaflet/L.extra.js
@@ -3,27 +3,27 @@
    //from here: https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js
    L.DomUtil.TRANSFORM_ORIGIN = L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'OTransformOrigin', 'MozTransformOrigin', 'msTransformOrigin']);
    L.LatLng.prototype.CoordinatesOf = function(angle,distance){
        var d = distance;
        var a = angle*Math.PI/180;
        var lat1 = this.lat*Math.PI/180;
        var lng1 = this.lng*Math.PI/180;
        var R = L.CRS.Earth.R;
        var lat2 = Math.asin(Math.sin(lat1)*Math.cos(d/R) + Math.cos(lat1)*Math.sin(d/R)*Math.cos(a));
        var y = Math.sin(a)*Math.sin(d/R)*Math.cos(lat1);
        var x = Math.cos(d/R)-Math.sin(lat1)*Math.sin(lat2);
        var lng2 = lng1 + Math.atan2(y,x);
        lat2 = lat2*180/Math.PI;
        lng2 = lng2*180/Math.PI;
        return new L.LatLng(lat2,lng2);
    }

--- a/js/leaflet/leaflet.camera-view-marker-controls.js
+++ b/js/leaflet/leaflet.camera-view-marker-controls.js
 (function (window, document, undefined) {
    "use strict";
    L.Control.CameraViewMarkerControls = L.Control.extend({
        onAdd: function(map){
            var name = "leaflet-control-heel";
            var div = L.DomUtil.create('div', name+' leaflet-bar');
            L.DomEvent.disableClickPropagation(div);
            var title = "Altitude and Elevation control mode";
            var label = "&#8645";
            //var label = "+";
            //var label = "&#54629";
            var a = L.DomUtil.create('a','leaflet-control-zoom-in leaflet-interactive');
            a.innerHTML = label;
            a.title = title;
            this._div = div;
            this._button = a;
            this._state = false;
            div.appendChild(a);
            this._registerEvents();
            return div;
        },
        onRemove: function(){
            // Nothing to do here
        },
        getState: function(){
            return this._state;
        },
        _registerEvents: function(){
            var self = this;
            L.DomEvent.on(this._button, 'click', function(){
                self._state = !self._state;
                self._buttonColor();
            }, this._button);
        },
        _buttonColor: function(){
            if (this._state){
                this._button.style.backgroundColor = "rgba(136,255,136,1)";
            }else{
                this._button.removeAttribute("style");
            }
        }
    });
    L.control.cameraViewMarkerControls = function (options) {
        return new L.Control.CameraViewMarkerControls(options);
    };
 }(this,document));
\ No newline at end of file
--- a/js/leaflet/leaflet.camera-view-marker.js
+++ b/js/leaflet/leaflet.camera-view-marker.js
@@ -9,16 +9,16 @@
  https://www.elphel.com
 */
-/** 
+/**
 * @file leaflet.camera-view-marker.js
 * @brief A Leaflet plugin that adds camera view marker:
 *        Displays:
 *          * Some marker with basic interactions for position and orientation
- * 
+ *
 * @copyright Copyright (C) 2017 Elphel Inc.
 * @author Oleg Dzhimiev <oleg@elphel.com>
 *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
 * JavaScript code in this page.
 *
 *   The JavaScript code in this page is free software: you can
@@ -52,7 +52,7 @@
     * Leaflet.CameraViewMarker assumes that you have already included the Leaflet library.
     */
-    //CircleMarker has everything one need    
+    //CircleMarker has everything one need
    L.CameraViewMarker = L.CircleMarker.extend({
        options:{
@@ -66,7 +66,7 @@
            draw_xz: true,
            draw_fov: true,
            h_control: false,
            basepoint:{
                url: ""
            }
@@ -76,11 +76,11 @@
            var hecs = this.getHCState();
            var angle = param;
            if (param.target){
                param = param.latlng;
            }
            if (param instanceof L.LatLng) {
                var p0 = this._map.latLngToLayerPoint(this._latlng);
@@ -92,30 +92,30 @@
                angle = (180/Math.PI*Math.atan2(dx,dy)+360)%360;
                if (hecs){
                    var l = this._axis_length;
                    var l_h = l*2.5/2;
                    var p_base_ll = this._latlng;
                    var p_base = this._map.latLngToLayerPoint(p_base_ll);
                    var p1 = new L.Point(p_base.x+l_h*Math.sin(this._heading),p_base.y-l_h*Math.cos(this._heading));
                    var p2 = this._map.latLngToLayerPoint(param);
                    var dy = (p1.y - p2.y) - this._altitude*10;
                    this._elevation = Math.atan2(dy,l_h);
                    angle = (this._heading)*180/Math.PI;
                }
            }
            if (this._units=="deg"){
                this._heading = angle*(Math.PI/180);
            }else{
                this._heading = angle;
            }
            this._updateCameraViewMarker();
        },
@@ -127,19 +127,19 @@
            if (param.target){
                latlng = param.latlng;
                if (hecs){
                    var p1_ll = this._latlng;
                    var p2_ll = latlng;
                    var p1 = this._map.latLngToLayerPoint(p1_ll);
                    var p2 = this._map.latLngToLayerPoint(p2_ll);
                    p2.x = p1.x;
                    this._altitude = (p1.y - p2.y)/10;
                    latlng = this._latlng;
                }
            }
@@ -150,26 +150,26 @@
        },
        setAltitude: function(param){
            this._altitude = param;
            this._updateCameraViewMarker();
        },
        setElevation: function(param){
            this._elevation = param;
            this._updateCameraViewMarker();
        },
        setFoV: function(param){
            this._fov = param;
            this._updateCameraViewMarker();
        },
        //initialize is most likely performed by L.CircleMarker
        //this is some default function rewritten
@@ -177,28 +177,28 @@
            this._initCameraViewMarker();
-        },        
+        },
        _initCameraViewMarker: function(){
            //constants
            this._axis_length = 100;
            this._radius = 10;
            this._heading = this.options.heading;
            this._units = this.options.units;
            this._fov = this.options.fov;
            this._draw_xz = this.options.draw_xz;
            this._draw_fov = this.options.draw_fov;
            this._READY = false;
            if(!this._layerPaint){
                this._layerPaint = L.layerGroup().addTo(this._map);
            }
            this._controls = {
                hc:{
                    getState: function(){return false;}
@@ -206,11 +206,11 @@
            };
            this.h_control = false;
            if (typeof L.control.cameraViewMarkerControls == 'function'){
                this.h_control = this.options.h_control;
            }
            if (this.h_control){
                this._altitude = this.options.altitude;
                this._elevation = this.options.elevation*Math.PI/180;
@@ -222,84 +222,84 @@
            this.setHeading(this._heading);
            this._registerEvents();
        },
        _updateCameraViewMarker: function(){
            // this.h_control & this._altitude
            if (this.h_control){
                this._updateCameraViewMarker_hc();
            }else{
                this._updateCameraViewMarker_nohc();
            }
        },
        _updateCameraViewMarker_hc: function(){
            this._updateCameraViewMarker_nohc();
        },
        _updateCameraViewMarker_nohc: function(){
            var hecs = this.getHCState();
            var l = this._axis_length;
            var l_h = l*2.5/2;
            var p_base_ll = this._latlng;
            var p_base = this._map.latLngToLayerPoint(p_base_ll);
            var p_head = new L.Point(p_base.x+l_h*Math.sin(this._heading),p_base.y-l_h*Math.cos(this._heading));
            var p_x    = new L.Point(p_base.x+l*Math.cos(this._heading),p_base.y+l*Math.sin(this._heading));
-            var p_z    = new L.Point(p_base.x-l*Math.sin(this._heading),p_base.y+l*Math.cos(this._heading));        
+            var p_z    = new L.Point(p_base.x-l*Math.sin(this._heading),p_base.y+l*Math.cos(this._heading));
            var p_fov_l = new L.Point(p_base.x+l*Math.sin(this._heading-this._fov/2),p_base.y-l*Math.cos(this._heading-this._fov/2));
            var p_fov_r = new L.Point(p_base.x+l*Math.sin(this._heading+this._fov/2),p_base.y-l*Math.cos(this._heading+this._fov/2));
            var p_head_ll = this._map.layerPointToLatLng(p_head);
            var p_x_ll    = this._map.layerPointToLatLng(p_x);
            // y axis adds to right handed coordinate system
            var p_z_ll    = this._map.layerPointToLatLng(p_z);
            var p_fov_l_ll = this._map.layerPointToLatLng(p_fov_l);
            var p_fov_r_ll = this._map.layerPointToLatLng(p_fov_r);
            var l_head = Array(p_base_ll,p_head_ll);
            var l_x    = Array(p_base_ll,p_x_ll);
            var l_z    = Array(p_base_ll,p_z_ll);
            var l_fov_l = Array(p_base_ll,p_fov_l_ll);
            var l_fov_r = Array(p_base_ll,p_fov_r_ll);
            // BEGIN HECS
            //base
            var p_base_cap = new L.Point(p_base.x,p_base.y-10*this._altitude);
            var p_base_cap_ll = this._map.layerPointToLatLng(p_base_cap);
            var p_base_cap_t = new L.Point(p_base.x,p_base.y-100);
            var p_base_cap_t_ll = this._map.layerPointToLatLng(p_base_cap_t);
            var p_base_cap_b = new L.Point(p_base.x,p_base.y+100);
            var p_base_cap_b_ll = this._map.layerPointToLatLng(p_base_cap_b);
            var p_base_cap_l = new L.Point(p_base.x-50/2,p_base.y);
            var p_base_cap_l_ll = this._map.layerPointToLatLng(p_base_cap_l);
            var p_base_cap_r = new L.Point(p_base.x+50/2,p_base.y);
            var p_base_cap_r_ll = this._map.layerPointToLatLng(p_base_cap_r);
            var l_base_cap_tb = Array(p_base_cap_t_ll,p_base_cap_b_ll);
            var l_base_cap_lr = Array(p_base_cap_l_ll,p_base_cap_r_ll);
            //head
            var p_head_cap = new L.Point(p_head.x,p_head.y-10*this._altitude-l_h*Math.tan(this._elevation));
            var p_head_cap_ll = this._map.layerPointToLatLng(p_head_cap);
            var p_head_cap_t = new L.Point(p_head.x,p_head.y-100);
            var p_head_cap_t_ll = this._map.layerPointToLatLng(p_head_cap_t);
@@ -308,17 +308,17 @@
            var p_head_cap_l = new L.Point(p_head.x-50/2,p_head.y);
            var p_head_cap_l_ll = this._map.layerPointToLatLng(p_head_cap_l);
            var p_head_cap_r = new L.Point(p_head.x+50/2,p_head.y);
            var p_head_cap_r_ll = this._map.layerPointToLatLng(p_head_cap_r);
            var l_head_cap_tb = Array(p_head_cap_t_ll,p_head_cap_b_ll);
            var l_head_cap_lr = Array(p_head_cap_l_ll,p_head_cap_r_ll);
            // END
            if (!this._READY){
                var cBIcon = L.icon({
                    iconUrl: 'js/images/base.png',
                    iconSize: [32, 46],
@@ -326,46 +326,46 @@
                    //iconSize: [64, 92],
                    className: 'basePointIcon'
                });
                this._basePoint = new L.marker(p_base_ll,{
                    icon: cBIcon
                });
                this._basePoint = new L.CircleMarker(p_base_ll,{
                    color: '#191',
                    fillColor: '#0f3',
                    fillOpacity: 0.5,
                    radius: this._radius
                });
                //this._basePoint._icon.style[L.DomUtil.TRANSFORM_ORIGIN] = "50% 50%";
                //this._basePoint._icon.style[L.DomUtil.TRANSFORM] += 'rotate(' + (this._heading*180/Math.PI) + 'deg)';
                this._headLine = L.polyline(l_head, {color: 'white', weight:2, dashArray:"5,10"}).addTo(this._layerPaint);
                if (this._draw_xz){
                    this._xAxis = L.polyline(l_x, {color: 'red', weight:2 }).addTo(this._layerPaint);
                    this._zAxis = L.polyline(l_z, {color: 'blue', weight:2 }).addTo(this._layerPaint);
                }
                if (this._draw_fov){
                    this._lFov = L.polyline(l_fov_l, {color: '#0f3', weight:2 }).addTo(this._layerPaint);
                    this._rFov = L.polyline(l_fov_r, {color: '#0f3', weight:2 }).addTo(this._layerPaint);
                }
                //draw fov lines here
                this._basePoint.addTo(this._layerPaint).bringToFront();
                var cHIcon = L.icon({
                    iconUrl: 'js/leaflet/images/crosshair.png',
                    iconSize: [32, 32]
                });
                this._headPoint = new L.marker(p_head_ll,{
                    icon: cHIcon
                });
                /*
                this._headPoint = new L.CircleMarker(p_head_ll,{
                    color: 'white',
@@ -374,22 +374,22 @@
                    radius: this._radius
                });
                */
                this._headPoint.addTo(this._layerPaint);
                this._READY = true;
            }else{
                this._headLine.setLatLngs(l_head);
                if (this._draw_xz){
                    this._xAxis.setLatLngs(l_x);
                    this._zAxis.setLatLngs(l_z);
                }
                if (this._draw_fov){
                    if (this._lFov){
                        this._lFov.setLatLngs(l_fov_l);
                        this._rFov.setLatLngs(l_fov_r);
@@ -398,10 +398,10 @@
                        this._rFov = L.polyline(l_fov_r, {color: '#0f3', weight:2 }).addTo(this._layerPaint);
                    }
                }
                this._basePoint.setLatLng(p_base_ll);
                this._headPoint.setLatLng(p_head_ll);
                if (this._baseCapLineV){
                    this._layerPaint.removeLayer(this._baseCapLineV);
                    this._layerPaint.removeLayer(this._headCapLineV);
@@ -414,47 +414,47 @@
                    this._basePoint.unbindTooltip();
                    this._headPoint.unbindTooltip();
                }
                if (hecs){
                    this._basePoint.bindTooltip("H= "+this._altitude+" m",{
                        direction:"right",
                        permanent:"true",
                        className: "measurementtooltip",
                        offset:[5,5],
                    }).openTooltip();
                    this._headPoint.bindTooltip("&alpha;= "+((180/Math.PI*this._elevation).toFixed(1))+" &deg;",{
                        direction:"right",
                        permanent:"true",
                        className: "measurementtooltip",
-                        offset:[5,5],                        
+                        offset:[5,5],
                    }).openTooltip();
                    this._layerPaint.removeLayer(this._lFov);
                    this._layerPaint.removeLayer(this._rFov);
                    this._lFov = false;
                    this._rFov = false;
                    this._basePoint.setLatLng(p_base_cap_ll);
                    this._headPoint.setLatLng(p_head_cap_ll);
                    this._baseCapLineV = L.polyline(l_base_cap_tb, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
                    this._headCapLineV = L.polyline(l_head_cap_tb, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
                    this._baseCapLineH = L.polyline(l_base_cap_lr, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
                    this._headCapLineH = L.polyline(l_head_cap_lr, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
                }
                //this._basePoint._icon.style[L.DomUtil.TRANSFORM] += 'rotate(' + (this._heading*180/Math.PI) + 'deg)';
            }
        },
        _registerEvents: function(){
            this._map.on('zoomend',this._onZoomEnd,this);
            this._basePoint.on('mousedown',this._dragCameraViewMarker,this);
            this._headPoint.on('mousedown',this._rotateCameraViewMarker,this);
@@ -464,26 +464,26 @@
            // from some plugin - I didn't test if it's true
            // necassary for _dragCircle. If switched on already within _dragCircle an unwanted click is fired at the end of the drag.
-            this._map.on('click',this._mouseClick,this);  
+            this._map.on('click',this._mouseClick,this);
        },
        _mouseClick: function(e){
            this._headPoint.on('mousedown',this._rotateCameraViewMarker,this);
        },
        _rotateCameraViewMarker: function(e){
            this._map.dragging.disable();
            this._map.off('mousemove',this._mouseMove,this);
            this._map.off('click',this._mouseClick,this);
            this._map.on('mousemove',this.setHeading,this);
            this._map.on('mouseup',this._mouseUp,this);
            // prevent image getting grabbed by browser
            e.originalEvent.preventDefault();
@@ -510,9 +510,9 @@
            this._map.off('click',this._mouseClick,this);
            this._map.on('mousemove',this.setBasePoint,this);
            this._map.on('mouseup',this._mouseUp,this);
            // prevent image getting grabbed by browser
            e.originalEvent.preventDefault();
@@ -521,32 +521,32 @@
        _onZoomEnd: function(e){
            this._updateCameraViewMarker();
        },
        // height controls
        _initHControl: function(){
            var self = this;
            this._controls.hc = L.control.cameraViewMarkerControls({position:'topleft'}).addTo(this._map);
            var btn = this._controls.hc._button;
            L.DomEvent.on(btn, 'click', function(){
                self._updateCameraViewMarker();
            },btn);
        },
        getHCState: function(){
            return this._controls.hc.getState() || this.hcontrol;
        }
    });
    L.cameraViewMarker = function (latlng,options) {
        return new L.CameraViewMarker(latlng,options);
    };
 }(this,document));
--- a/js/leaflet/leaflet.camera-view-marker.measure.js
+++ b/js/leaflet/leaflet.camera-view-marker.measure.js
@@ -9,14 +9,14 @@
  https://www.elphel.com
 */
-/** 
+/**
 * @file leaflet.camera-view-marker.measure.js
 * @brief extends Leaflet.CameraViewMarker with distance measuring tool
- * 
+ *
 * @copyright Copyright (C) 2017 Elphel Inc.
 * @author Oleg Dzhimiev <oleg@elphel.com>
 *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
 * JavaScript code in this page.
 *
 *   The JavaScript code in this page is free software: you can
@@ -50,30 +50,30 @@
    L.CameraViewMarker.include({
        createMeasureMarker: function(param,distance){
            var latlng = param;
            // param is event
            if(param.target){
                latlng = param.latlng;
            }
            var p1_ll = this._latlng;
            // param was angle then need distance
            if (!(latlng instanceof L.LatLng)){
                latlng = p1_ll.CoordinatesOf(param,distance);
            }
            var p2_ll = latlng;
            var l_d = Array(p1_ll,p2_ll);
            var pll = L.polyline(l_d, {
-                    color: '#1f1', 
+                    color: '#1f1',
-                    weight:1, 
+                    weight:1,
                    dashArray:"5,5"
                }).addTo(this._layerPaint).bringToBack();
            //circle
            var tmp_point = new L.CircleMarker(latlng,{
                color: '#1f1',
@@ -82,82 +82,82 @@
                fillOpacity: 0.5,
                radius: 5,
            }).addTo(this._layerPaint);
            var distance = latlng.distanceTo(this._latlng).toFixed(1);
            tmp_point.bindTooltip(distance+' m',{
                permanent:"true",
                direction:"right",
                className: "measurementtooltip",
                offset:[0,0],
            }).openTooltip();
            tmp_point.on('click',this._measureMarkerClick,this);
            tmp_point.on('mousedown',this._dragMeasureMarker,this);
            tmp_point._index = this._measureMarkers.length;
            this._measureMarkers.push(tmp_point);
            this._measureLines.push(pll);
            return tmp_point._index;
        },
        moveMeasureMarker: function(param,index){
            var latlng = param;
            if (param.target){
                index = this.draggedMarker._index;
                latlng = param.latlng;
                // prevent image getting grabbed by browser
                param.originalEvent.preventDefault();
            }
            var p1_ll = this._latlng;
            var p2_ll = latlng;
            var l_d = Array(p1_ll,p2_ll);
            this._measureMarkers[index].setLatLng(latlng);
            this._measureLines[index].setLatLngs(l_d);
            var distance = p2_ll.distanceTo(p1_ll).toFixed(1);
            this._measureMarkers[index]._tooltip.setContent(distance+' m');
            this.draggedMarker = {
                _index: index,
                _latlng: latlng
            };
            this._syncMeasureMarkersToBasePoint();
        },
        removeMeasureMarker: function(param){
            var index = param;
            if(param.target){
                index = param.target._index;
                L.DomEvent.stopPropagation(param);
            }
            this._layerPaint.removeLayer(this._measureMarkers[index]);
            this._layerPaint.removeLayer(this._measureLines[index]);
            this._measureMarkers.splice(index,1);
            this._measureLines.splice(index,1);
            this._updateMeasureMarkersIndices();
        },
        placeSlidingMarker: function(angle,distance){
            var p1_ll = this._measureBase;
            var p2_ll = p1_ll.CoordinatesOf(angle,distance);
            var l_d = Array(p1_ll,p2_ll);
            if (this._slidingMarker == undefined){
@@ -168,43 +168,43 @@
                    fillOpacity: 0.5,
                    radius: 5,
                }).addTo(this._layerPaint);
                this._slidingLine = L.polyline(l_d, {
-                    color: '#1f1', 
+                    color: '#1f1',
-                    weight:1, 
+                    weight:1,
                    dashArray:"5,5"
                }).addTo(this._layerPaint).bringToBack();
                this._slidingMarker.bindTooltip(distance.toFixed(1)+' m',{
                    permanent:"true",
                    direction:"right",
                    className: "measurementtooltip",
                    offset:[0,0],
                }).openTooltip();
            }else{
                this._slidingMarker.setLatLng(p2_ll);
                this._slidingLine.setLatLngs(l_d);
                this._slidingMarker._tooltip.setContent(distance.toFixed(1)+' m');
            }
        },
        removeSlidingMarker: function(){
            if (this._slidingMarker != undefined){
                this._layerPaint.removeLayer(this._slidingMarker);
                this._layerPaint.removeLayer(this._slidingLine);
                delete this._slidingMarker;
                delete this._slidingLine;
            }
        },
        onAdd: function(){
            this._initCameraViewMarker();
@@ -213,18 +213,18 @@
        },
        _initCVM_M: function(){
            this._measuring = false;
            this._measureMarkers = Array();
            this._measureLines = Array();
            this._map.doubleClickZoom.disable();
            this._registerEvents_M();
            this._measureBase = this._latlng;
            this.draggedMarker = {
                _index: null,
                _latlng: null
@@ -238,7 +238,7 @@
            this._map.on('mousemove',this._mouseMove_M,this);
            this._map.on('click', this._toggleMeasureMode, this);
            this._map.on('mousemove',this._syncMeasureMarkersToBasePoint, this);
        },
        _mouseMove_M: function(e){
@@ -250,22 +250,22 @@
            }
        },
        _toggleMeasureMode: function(e){
            if (e.originalEvent.ctrlKey){
                this.createMeasureMarker(e);
            }
            /*
            self._measuring = !self._measuring;
            if(self._measuring){
            self._basePoint.off('mousedown',self._dragCamera, self);
            self._map._container.style.cursor = "crosshair";
            self._map.on('click', self._placeMeasurePoint, self);
            }else{
            self._basePoint.on('mousedown',self._dragCamera, self);
            self._map._container.style.cursor = "default";
@@ -273,7 +273,7 @@
            }
            */
        },
        _measureMarkerClick:function(e){
            if (e.originalEvent.ctrlKey){
@@ -281,22 +281,22 @@
            }
        },
        _syncMeasureMarkersToBasePoint: function(e){
            if (this._measureMarkers.length!=0){
                if (this._measureBase!=this._latlng){
                    var self = this;
                    this._measureMarkers.forEach(function(c,i){
                        var p1_ll = self._latlng;
                        var p2_ll = c.getLatLng();
                        var l_d = Array(p1_ll,p2_ll);
                        self._measureLines[i].setLatLngs(l_d);
                        var distance = p2_ll.distanceTo(p1_ll).toFixed(1);
                        c._tooltip.setContent(distance+' m');
                    });
@@ -304,54 +304,54 @@
                    this._measureBase=this._latlng;
                }
            }
        },
        _dragMeasureMarker: function(e){
            if (!e.originalEvent.ctrlKey){
                this.draggedMarker = {
                    _index: e.target._index,
                    _latlng: e.target._latlng
                };
                this._map.dragging.disable();
                this._map.off('mousemove',this._mouseMove,this);
                this._map.off('click',this._mouseClick,this);
                this._map.on('mousemove',this.moveMeasureMarker,this);
                this._map.on ('mouseup',this._mouseUp_M,this);
            }
        },
        _mouseUp_M: function(){
            this._map.off('mousemove',this.moveMeasureMarker,this);
            this._map.dragging.enable();
            this._map.on ('mousemove',this._mouseMove,this);
            this._map.off ('mouseup',this._mouseUp_M,this);
            this.draggedMarker._index = null;
        },
        _updateMeasureMarkersIndices:function(){
            var self = this;
            this._measureMarkers.forEach(function(c,i){
                self._measureMarkers[i]._index = i;
            });
        },
    });
 }(this,document));
--- a/js/leaflet_init.js
+++ b/js/leaflet_init.js
@@ -7,14 +7,14 @@
  https://www.elphel.com
 */
-/** 
+/**
 * @file -
 * @brief -
- * 
+ *
 * @copyright Copyright (C) 2017 Elphel Inc.
 * @author Oleg Dzhimiev <oleg@elphel.com>
 *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
 * JavaScript code in this page.
 *
 *   The JavaScript code in this page is free software: you can
@@ -51,25 +51,25 @@ var LeafletObject = function(id,data,options){
    };
    this._settings = $.extend(defaults,options);
    this._id = id;
    //[40.7233861, -111.9328843];
    this.center = [data.camera.latitude,data.camera.longitude];
    this.heading = data.camera.heading;
    //this.heading = 0;//data.camera.heading;
    this.fov = data.camera.fov;
    this.initialize();
 };
 LeafletObject.prototype.initialize = function(){
  // https: also suppported.
  var Esri_WorldImagery = L.tileLayer(
-    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    {
      maxZoom: this._settings.maxzoom,
      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
@@ -84,14 +84,14 @@ LeafletObject.prototype.initialize = function(){
      subdomains:['mt0','mt1','mt2','mt3'],
    }
  );
-  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', 
+  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
      maxZoom: this._settings.maxzoom,
      attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }
  );
  this._map = L.map(this._id,{
    layers:[googleSat]
  }).setView(this.center, this._settings.zoom);
@@ -103,13 +103,13 @@ LeafletObject.prototype.initialize = function(){
  };
  L.control.layers(baseMaps).addTo(this._map);
  this.drawCamera();
 }
 LeafletObject.prototype.drawCamera = function(){
    this.marker = L.cameraViewMarker(this.center, {
        color: '#191',
        fillColor: '#0f3',
@@ -121,7 +121,7 @@ LeafletObject.prototype.drawCamera = function(){
        h_control: true,
        id: "basecircle"
    }).addTo(this._map);
 }
 LeafletObject.prototype.highlightMarker = function(index){
@@ -131,13 +131,13 @@ LeafletObject.prototype.highlightMarker = function(index){
    this.marker._measureMarkers[index].setStyle(style).bringToFront();
    this.marker._measureMarkers[index]._tooltip.bringToFront();
    this.marker._measureLines[index].setStyle(style).bringToFront();
 }
 LeafletObject.prototype.dehighlightMarker = function(index){
    color = Data.markers[index].color;
    var style = {color:color,fillColor:color};
    this.marker._measureMarkers[index].setStyle(style);
@@ -148,15 +148,15 @@ LeafletObject.prototype.dehighlightMarker = function(index){
 LeafletObject.prototype.toggleMarker = function(index){
    //console.log("Toggling "+index);
    if (!this.marker._measureMarkers[index]._selected){
        this.marker._measureMarkers[index]._selected = true;
    }else{
        this.marker._measureMarkers[index]._selected = false;
    }
    //console.log(this.marker._measureMarkers[index]._selected);
 }
 LeafletObject.prototype.deleteMarker = function(index){

--- a/js/map.css
+++ b/js/map.css
@@ -15,7 +15,7 @@ html, body, #leaflet_map {
  border-radius: 1px;
  font-size: 16px;
  display:block;
  position:absolute;
  top: 16px;
  left: 3px;

--- a/js/map.js
+++ b/js/map.js
-/* 
+/*
 * TODO:
- *    * 
+ *    *
- * 
+ *
 */
 // http://stackoverflow.com/questions/9394190/leaflet-map-api-with-google-satellite-layer
@@ -14,7 +14,7 @@ $(function(){
 });
 function light_init(){
  $.ajax({
    url: "kml/test.kml",
    success: function(data){
@@ -23,15 +23,15 @@ function light_init(){
        parseFloat($(data).find("Camera").find("latitude").text()),
        parseFloat($(data).find("Camera").find("longitude").text())
      ];
      var heading = parseFloat($(data).find("Camera").find("longitude").text());
      init_maps(marker);
    },
  });
 }
 var map;
@@ -40,10 +40,10 @@ var markers = Array();
 function init_maps(center){
  var elphelinc = center;//[40.7233861, -111.9328843];
  // https: also suppported.
  var Esri_WorldImagery = L.tileLayer(
-    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    {
      maxZoom: 21,
      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
@@ -58,14 +58,14 @@ function init_maps(center){
      subdomains:['mt0','mt1','mt2','mt3'],
    }
  );
-  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', 
+  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
      maxZoom: 21,
      attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }
  );
  map = L.map('leaflet_map',{
    layers:[googleSat]
  }).setView(elphelinc, 17);
@@ -75,21 +75,21 @@ function init_maps(center){
    "Google": googleSat,
    "Open Street Map": OSMTiles
  };
  //Esri_WorldImagery.addTo(map);
  //googleSat.addTo(map);
  //custom control:
  //http://www.coffeegnome.net/control-button-leaflet/
  L.control.layers(baseMaps).addTo(map);
  drawCamera(elphelinc);
 }
 function drawCamera(basepoint){
  var circle = L.cameraViewMarker(basepoint, {
      color: '#191',
      fillColor: '#0f3',

--- a/js/nomap_init.js
+++ b/js/nomap_init.js
@@ -16,43 +16,43 @@ function parseURL(){
 }
 $(function(){
    parseURL();
    init();
 });
 function init(){
    init_resize();
    var x3delement = $("#x3d_id").find("scene");
    var model_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+".x3d";
    console.log(model_url);
    var model = $(`
    <group>
        <inline name='mymodel' namespacename='mymodel' url='`+model_url+`'></inline>
    </group>`);
    x3delement.append(model);
    $.getScript("js/x3dom/x3dom-full.debug.js",function(){
        //wait until it DOM is extended
        x3dom.runtime.ready = function(){
            deep_init();
        };
    });
 }
 var resizeTimer = false;
 var FOV = 30*Math.PI/180;
 function init_resize(){
    resize();
    //bind resize
@@ -62,40 +62,40 @@ function init_resize(){
            resize();
        },100);
    });
 }
 function resize(){
    var element = document.getElementById('x3d_id');
    var w = $(window).width();
    var h = $(window).height();
    $(element).attr("width",w);
    $(element).attr("height",h);
    var fov = w/h*FOV;
    //fov = Math.PI/2;
    setFoV(fov);
 }
 function setFoV(val){
    var element = document.getElementById('x3d_id');
    var vp = $(element).find("Viewpoint")[0];
    $(vp).prop("fieldOfView",val);
 }
 var X3DOM_SCENE_INIT_DONE = false;
 function deep_init(){
-    /*    
+    /*
    var element = document.getElementById('x3d_id');
    element.runtime.enterFrame = function(){

--- a/js/nomap_vr_init.js
+++ b/js/nomap_vr_init.js
@@ -16,41 +16,41 @@ function parseURL(){
 }
 $(function(){
    parseURL();
    init();
 });
 function init(){
    init_resize();
    var x3delement = $("#x3d_id").find("scene");
    var model_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+".x3d";
    var model = $(`
    <group>
        <inline name='mymodel' namespacename='mymodel' url='`+model_url+`'></inline>
    </group>`);
    x3delement.append(model);
    $.getScript("js/x3dom/x3dom-full.debug.js",function(){
        //wait until it DOM is extended
        x3dom.runtime.ready = function(){
            deep_init();
        };
    });
 }
 var resizeTimer = false;
 var FOV = 30*Math.PI/180;
 function init_resize(){
    resize();
    //bind resize
@@ -60,40 +60,40 @@ function init_resize(){
            resize();
        },100);
    });
 }
 function resize(){
    var element = document.getElementById('x3d_id');
    var w = $(window).width();
    var h = $(window).height();
    $(element).attr("width",w);
    $(element).attr("height",h);
    var fov = w/h*FOV;
    //fov = Math.PI/2;
    setFoV(fov);
 }
 function setFoV(val){
    var element = document.getElementById('x3d_id');
    var vp = $(element).find("Viewpoint")[0];
    $(vp).prop("fieldOfView",val);
 }
 var X3DOM_SCENE_INIT_DONE = false;
 function deep_init(){
-    /*    
+    /*
    var element = document.getElementById('x3d_id');
    element.runtime.enterFrame = function(){

--- a/js/ui.css
+++ b/js/ui.css
@@ -53,7 +53,7 @@ html, body, #x3d_wrapper {
  border-radius: 1px;
  font-size: 16px;
  display:block;
  position:absolute;
  top: 16px;
  left: 3px;
@@ -167,7 +167,7 @@ html, body, #x3d_wrapper {
    background-image:url('images/settings.png');
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-color:white;
    width: 32px;
    height: 32px;
@@ -190,7 +190,7 @@ html, body, #x3d_wrapper {
    background-image:url('images/align.png');
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-color:white;
    width: 32px;
    height: 32px;

--- a/js/ui_align.js
+++ b/js/ui_align.js
 function align_init(){
    $("#align_button").on("click",function(){
        align_heading();
    });
 }
 function align_heading(){
    // find selected markers
    // pick the first one?
    // align?!
    console.log("heading");
    var map_markers = Map.marker._measureMarkers;
    var selected_markers = [];
    map_markers.forEach(function(c,i){
        if (selected_markers.length<2){
            if (c._selected){
@@ -24,26 +24,26 @@ function align_heading(){
            }
        }
    });
    if (selected_markers.length<2){
        console.log("select 2 markers");
        Scene.showMessage("messagewindow","error: select 2 markers","red");
    }
    console.log(selected_markers);
 }
 function align_roll(){
    console.log("roll");
 }
 function align_tilt(){
    console.log("tilt");
 }
--- a/js/ui_functions.js
+++ b/js/ui_functions.js
 // general
 /*
- * 
+ *
 */
 function ui_showMessage(id,msg,bg){
    if (bg != undefined){
        $("#"+id).css({background:bg});
    }
    $("#"+id).show();
    $("#"+id).html($("<div>").html(msg).css({
        padding:"5px 10px"
    })).show();
 }
 function ui_hideMessage(id){
    $("#"+id).hide();
 }
 // scene (x3dom)

--- a/js/ui_help.js
+++ b/js/ui_help.js
 function help_init(){
    /*
    var help_content = `
 <div>
@@ -16,11 +16,11 @@ function help_init(){
        display:"none"
    }).html(help_content);
    */
    var help = $("#help-content");
    help.hide();
    $("#help_button").on("click",function(){
        help.show();
    });
@@ -28,5 +28,5 @@ function help_init(){
    help.on('click',function(){
        help.hide();
    });
 }
\ No newline at end of file
--- a/js/ui_init.js
+++ b/js/ui_init.js
@@ -7,14 +7,14 @@
  https://www.elphel.com
 */
-/** 
+/**
 * @file -
 * @brief -
- * 
+ *
 * @copyright Copyright (C) 2017 Elphel Inc.
 * @author Oleg Dzhimiev <oleg@elphel.com>
 *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
 * JavaScript code in this page.
 *
 *   The JavaScript code in this page is free software: you can
@@ -91,9 +91,9 @@ $(function(){
    title_init();
    help_init();
    menu_init();
    light_init();
 });
 function title_init(){
@@ -110,24 +110,24 @@ function title_init(){
        "font-family": '"Helvetica Neue", Helvetica, Arial, sans-serif',
        "user-select": "none"
    });
    $("body").append(html);
 }
 function light_init(){
    var x3delement = $("#x3d_id").find("scene");
    var model_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+".x3d";
    var model_back_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+"-texture-bgnd-ext.jpeg";
    var model = $(`
        <group>
            <inline name='mymodel' namespacename='mymodel' url='`+model_url+`'></inline>
        </group>
        <group>
-            <Background 
+            <Background
                id="Background"
                class="Background"
                backUrl=  "js/images/background_side.jpeg"
@@ -139,9 +139,9 @@ function light_init(){
            </Background>
        </group>
        `);
    x3delement.append(model);
    $.ajax({
        url: SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.path+".kml",
        success: function(response){
@@ -149,13 +149,13 @@ function light_init(){
            var longitude = parseFloat($(response).find("Camera").find("longitude").text());
            var latitude  = parseFloat($(response).find("Camera").find("latitude").text());
            var altitude  = parseFloat($(response).find("Camera").find("altitude").text());
            var heading = parseFloat($(response).find("Camera").find("heading").text());
            var tilt    = parseFloat($(response).find("Camera").find("tilt").text());
            var roll    = parseFloat($(response).find("Camera").find("roll").text());
            var fov    = parseFloat($(response).find("Camera").find("fov").text());
            Data.camera = new X3L({
                x: 0,
                y: 0,
@@ -168,12 +168,12 @@ function light_init(){
                roll: roll || 0,
                fov: fov || 0,
            });
            var element = document.getElementById('x3d_id');
            Scene = new X3DOMObject(element,Data,{});
            Scene.initResize();
            $.getScript("js/x3dom/x3dom-full.debug.js",function(){
                Map = new LeafletObject('leaflet_map',Data,{});
@@ -186,39 +186,39 @@ function light_init(){
                    x3d_initial_camera_placement();
                    x3d_events();
                    leaf_events();
                };
            });
        },
    });
 }
 function map_resize_init(){
    var html = $("<div>",{id:"map_resizer_handle"});
    $("#map_wrapper").append(html);
    html.on("mousedown",function(){
        $("body").on("mousemove",map_resize);
        $(Scene.element).find("canvas").on("mousemove",map_resize);
    });
    html.on("mouseup",function(){
        $("body").off("mousemove",map_resize);
        $(Scene.element).find("canvas").off("mousemove",map_resize);
    });
 }
 function map_resize(e){
    var xm = e.clientX;
    var ym = e.clientY;
@@ -239,11 +239,11 @@ function map_resize(e){
    // from some forum, stackoverflow?
    setTimeout(function(){Map._map.invalidateSize();}, 100);
 }
 function deep_init(){
    //Scene.initResize();
    Scene.FoVEvents();
    Scene.KeyEvents();
@@ -257,9 +257,9 @@ function deep_init(){
        cnt = parseInt(progress_counter[1]);
        if (!Scene._X3DOM_SCENE_INIT_DONE&&(cnt==0)){
            //Scene.initResize();
            // now then all shapes are parsed and accessible
            Scene.ShapeEvents();
@@ -267,7 +267,7 @@ function deep_init(){
        }
    };
 }
 function x3d_initial_camera_placement(){
@@ -275,33 +275,33 @@ function x3d_initial_camera_placement(){
    var heading = Data.camera.heading*Math.PI/180;
    var tilt = (Data.camera.tilt-90)*Math.PI/180;
    var roll = Data.camera.roll*Math.PI/180;
    // Altitude is relative. Do not care.
    // Heading,Tilt,Roll
    var Mh = x3dom.fields.SFMatrix4f.rotationZ(heading);
    var Mt = x3dom.fields.SFMatrix4f.rotationY(tilt);
    var Mr = x3dom.fields.SFMatrix4f.rotationX(roll);
    // rw = real world with North
    // w = virtual world = x3dom frame reference
    // proper Euler rotation
    var R = Mh.mult(Mt).mult(Mr);
    // convert to proper Euler
    var T = x3dom_toYawPitchRoll();
    var R0 = T.inverse().mult(R).mult(T);
    // _rw - real world
    //  _w - virt world
    // exclude roll?
    //var RC0_rw = T.inverse().mult(Mh).mult(Mt).mult(T);
    // exclude tilt and roll
    var RC0_rw = T.inverse().mult(Mh).mult(T);
    var RC_w = R0.inverse().mult(RC0_rw);
    // store matrices
    Data.camera.Matrices = {
@@ -309,9 +309,9 @@ function x3d_initial_camera_placement(){
        Up0: RC_w.e1(),
        RC_w: RC_w,
    };
    x3dom_setViewpoint(RC_w);
 }
 function x3d_events(){
@@ -319,61 +319,61 @@ function x3d_events(){
    var elem = Scene.element;
    elem.addEventListener('keydown',function(e){
        //console.log("scene keydown");
        if ((e.key=="Shift")||(SETTINGS.highlight&&!SETTINGS.pointer)){
            // select shape
            var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y);
            if (!$(sr.pickObject).hasClass("shapemarker")){
                X3DOMObject.Shape.highlight(sr.pickObject);
            }
        }
        if (e.key=="Control"){
            var x,y,z;
            var dist = 1000;
            var mouse = x3dom_getXYPosOr(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y,false);
            if (mouse.d_xz != null){
                dist = parseFloat(mouse.d_xz);
                X3DOMObject.Marker.place(mouse.x,mouse.y,mouse.z,"sliding_sphere");
                $("#sliding_sphere").find("switch").attr("whichChoice",0);
            }
            Map.marker.placeSlidingMarker(mouse.a,dist);
        }
    },true);
    elem.addEventListener('keyup',function(e){
        if (e.key=="Shift"){
            // select shape
            var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y);
            X3DOMObject.Shape.dehighlight(sr.pickObject);
        }
        if (e.key=="Control"){
            X3DOMObject.Marker.place(0,0,0,"sliding_sphere");
            $("#sliding_sphere").find("switch").attr("whichChoice",-1);
            Map.marker.removeSlidingMarker();
        }
    },true);
    elem.addEventListener('mousedown',function(){
        elem.addEventListener('mousemove',x3d_mouseMove,true);
    });
@@ -383,37 +383,37 @@ function x3d_events(){
    });
    elem.addEventListener('mouseover',function(e){
        // have to focus if want key events to work w/o extra click
        Scene.focusOnCanvas();
    });
    elem.addEventListener('mousemove',function(e){
        // have to focus if want key events to work w/o extra click
        Scene.focusOnCanvas();
        var camera = x3dom_getCameraPosOr(e.clientX,e.clientY,false);
        Map.marker.setAltitude(camera.y);
        Map.marker.setElevation(camera.e*Math.PI/180);
        X3DOMObject.displayInfo(e);
        X3DOMObject.displayViewInfo(e);
        if (SETTINGS.highlight&&!SETTINGS.pointer){
            var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y);
            X3DOMObject.Shape.highlight(sr.pickObject);
        }
        if ((Scene._ctrlKey)||(SETTINGS.pointer)){
            // show shadow marker
            var mouse = x3dom_getXYPosOr(e.clientX,e.clientY,false);
            var dist = parseFloat(mouse.d_xz) || 1000;
            Map.marker.placeSlidingMarker(mouse.a,dist);
        }else{
@@ -422,51 +422,51 @@ function x3d_events(){
            Map.marker.removeSlidingMarker();
        }
        if (e.buttons==1){
            // upright view
            x3dom_setUpRight();
        }
        // what is this?
        //x3d_mouseMove();
    },true);
    elem.addEventListener('mouseout',function(e){
        // hide shadow marker
        Map.marker.removeSlidingMarker();
        ui_hideMessage("window-info");
    });
 }
 function leaf_events(){
    var Camera = Map.marker;
    Camera._map.on('mouseover',function(e){
        //console.log("map mouseover");
        //$(this).focus();
        this._container.focus();
    });
    Camera._map.on('mousemove',function(e){
        //console.log("map mousemove");
        this._container.focus();
-    });    
+    });
-    /* 
+    /*
    // this one works
    document.getElementById("leaflet_map").addEventListener('keydown',function(e){
        console.log("well2");
    });
    */
    Camera._map.on('click',function(e){
        if (e.originalEvent.ctrlKey){
@@ -474,55 +474,55 @@ function leaf_events(){
            var Lm = Camera._measureMarkers[Data.markers.length];
            if (Lm!=undefined){
                var mark = new X3L({
                    latitude: Lm._latlng.lat,
                    longitude: Lm._latlng.lng,
                    color: SETTINGS.markercolor,
                    size: SETTINGS.markersize,
                });
                var p1_ll = Camera._latlng;
                var p2_ll = Lm._latlng;
                var distance = p1_ll.distanceTo(p2_ll);
                p_w = x3dom_delta_map2scene(p1_ll,p2_ll);
                mark.x = p_w.x;
                mark.y = p_w.y;
                mark.z = p_w.z;
                mark.d_map = distance;
                mark.d_x3d = "<font style='color:red;'>drag over 3D</font>";
                Data.markers.push(mark);
                X3DOMObject.displayMarkInfo(Data.markers.length-1);
                //new X3DOMObject.Marker(mark.x,mark.y,mark.z,true);
                new X3DOMObject.Marker(mark.x,mark.y,mark.z,false);
                //Scene.createMarker(mark.x,mark.y,mark.z);
                //x3d_markerEvents(Data.markers.length-1);
                X3DOMObject.MapMarker.registerEvents(Lm);
            }
        }
    });
    Camera._map.on('mousedown',function(e){
        if (!e.originalEvent.ctrlKey){
            Camera._map.on('mousemove',leaf_mousemove,Camera);
            Camera._map.on('mouseup',leaf_mouseup,Camera);
        }
    });
 }
@@ -532,7 +532,7 @@ function leaf_mouseup(e){
    var Camera = Map.marker;
    Camera._map.off('mousemove',leaf_mousemove,Camera);
    Camera._map.off('mousemove',leaf_mouseup,Camera);
    Camera.draggedMarker._index = null;
 }
@@ -541,103 +541,103 @@ function leaf_mousemove(e){
    // update Scene dragged marker position
    leaf_drag_marker();
    var hecs = Map.marker.getHCState();
    if (hecs){
        leaf_mousemove_hc(e)
    }else{
        leaf_mousemove_nohc(e);
    }
 }
 function leaf_mousemove_hc(){
    var Camera = Map.marker;
    var altitude = Camera._altitude;
    var elevation = Camera._elevation; //rads
    x3dom_altelev(altitude,elevation);
    X3DOMObject.displayViewInfo({});
 }
 function leaf_mousemove_nohc(e){
    var Camera = Map.marker;
    var p0 = new L.LatLng(Data.camera.latitude,Data.camera.longitude);
    var p1 = new L.LatLng(Camera._latlng.lat,Camera._latlng.lng);
    var dh = Camera._heading - Math.PI/180*Data.camera.heading;
    Data.camera.heading   = Camera._heading*180/Math.PI;
    Data.camera.latitude  = Camera._latlng.lat;
    Data.camera.longitude = Camera._latlng.lng;
    if ((p0.lat!=p1.lat)||(p0.lng!=p1.lng)){
        leaf_translation_v1(p0,p1);
    }else{
-        x3dom_rotation(dh);        
+        x3dom_rotation(dh);
    }
    X3DOMObject.displayViewInfo({});
 }
 function leaf_drag_marker(){
    var Camera = Map.marker;
    // update Scene marker position
    if (Camera.draggedMarker._index != null){
        //console.log(Camera.draggedMarker._latlng);
        var index = Camera.draggedMarker._index;
        var p1_ll = Camera._latlng;
        var p2_ll = Camera.draggedMarker._latlng;
        var mark = Data.markers[index];
        mark.latitude = p2_ll.lat;
        mark.longitude = p2_ll.lng;
        var distance = p1_ll.distanceTo(p2_ll);
        var dp_w = x3dom_delta_map2scene(p1_ll,p2_ll);
        mark.x = dp_w.x;
        mark.z = dp_w.z;
        mark.d_map = distance;
        X3DOMObject.displayMarkInfo(index);
        X3DOMObject.Marker.place(mark.x,mark.y,mark.z,"my-sph-"+index);
    }
 }
 function leaf_translation_v1(p0,p1){
    var dp_w = x3dom_delta_map2scene(p0,p1);
    x3dom_translation(dp_w.x,dp_w.y,dp_w.z);
    // if not updated then moving in 3D scene will make it jump
    Scene.old_view_translation = x3dom_getViewTranslation(Scene.element);
 }
 function x3d_mouseMove(){
    x3dom_update_map();
 }
--- a/js/ui_menu.js
+++ b/js/ui_menu.js
@@ -7,14 +7,14 @@
  https://www.elphel.com
 */
-/** 
+/**
 * @file -
 * @brief -
- * 
+ *
 * @copyright Copyright (C) 2017 Elphel Inc.
 * @author Oleg Dzhimiev <oleg@elphel.com>
 *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
 * JavaScript code in this page.
 *
 *   The JavaScript code in this page is free software: you can
@@ -36,7 +36,7 @@
 */
 function menu_init(){
    // init checkboxes
    for (var setting in SETTINGS){
        if (typeof SETTINGS[setting] === 'boolean'){
@@ -50,29 +50,29 @@ function menu_init(){
            $("#"+setting).val(SETTINGS[setting]);
        }
    }
    // init options menu
    var menu = $("#menu-content");
    $("#menu_button").on("click",function(){
        menu.show();
    });
    // changing a checkbox will not close menu
    menu.on('click',function(e){
        var test = $(e.target).hasClass("donothide");
        if (!test){
            menu.hide();
        }
    });
    // change checkbox
    $(".my-check-box").on('click',function(e){
        var state = $(this).prop("checked");
        var id    = $(this).attr("id");
        if (state==true){
            SETTINGS[id] = true;
        }else{
@@ -84,9 +84,9 @@ function menu_init(){
    crosshair_init();
    shiftspeed_init();
    marker_size_color_init();
    reset_view_init();
 }
@@ -117,7 +117,7 @@ function shiftspeed_init(){
 }
 function marker_size_color_init(){
    $('#markersize').on('change',function(e){
        SETTINGS.markersize = $(this).val();
    });
@@ -127,15 +127,15 @@ function marker_size_color_init(){
        SETTINGS.markercolor = $(this).val();
    });
    $('#markercolor').change();
 }
 function reset_view_init(){
    $("#reset_view").on('click',function(){
        x3d_initial_camera_placement();
        x3d_mouseMove();
        Scene.resize();
    });
 }
\ No newline at end of file
--- a/js/util_functions.js
+++ b/js/util_functions.js
@@ -3,37 +3,37 @@
 */
 function convert_color_x2l(color){
    var rgb = color.split(" ");
    var r = parseInt(rgb[0]*15);
    var g = parseInt(rgb[1]*15);
    var b = parseInt(rgb[2]*15);
    r = r.toString(16);
    g = g.toString(16);
    b = b.toString(16);
    return "#"+r+g+b;
 }
 /*
 * convert #7f7 to '0.5 1.0 0.5'
 */
 function convert_color_l2x(color){
    var r = parseInt(color[1],16);
    var g = parseInt(color[2],16);
    var b = parseInt(color[3],16);
    r = r/15;
    g = g/15;
    b = b/15;
    return r+" "+g+" "+b;
-} 
+}
 // http://www.movable-type.co.uk/scripts/latlong.html
 // initial bearing
@@ -46,17 +46,17 @@ function getAzimuth2(p1,p2){
    //p1 - start point
    //p2 - end point
    var dlat = p2.lat-p1.lat;
    var dlon = p2.lng-p1.lng;
    var y = Math.sin(dlon)*Math.cos(p2.lat);
    var x = Math.cos(p1.lat)*Math.sin(p2.lat)-Math.sin(p1.lat)*Math.cos(p2.lat)*Math.cos(dlon);
    var azimuth = ((2*Math.PI + Math.atan2(y,x))*180/Math.PI) % 360;
    return azimuth;
 }
 */
 /*
@@ -64,18 +64,18 @@ function getAzimuth2(p1,p2){
 */
 /*
 function getAzimuth(p1_ll,p2_ll){
    var Camera = Map.marker;
    var p1 = Camera._map.latLngToLayerPoint(p1_ll);
    var p2 = Camera._map.latLngToLayerPoint(p2_ll);
    var dx = p2.x - p1.x;
    var dz = p2.y - p1.y;
    var azimuth = (180/Math.PI*Math.atan2(dx,-dz)+360)%360;
    return azimuth;
 }
 */
\ No newline at end of file
--- a/js/x3dom/x3dom.css
+++ b/js/x3dom/x3dom.css
@@ -18,8 +18,8 @@ X3D, x3d {
  border: 1px solid #000;
 }
-X3D:hover, 
+X3D:hover,
-x3d:hover, 
+x3d:hover,
 .x3dom-canvas:hover {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
@@ -41,7 +41,7 @@ x3d:hover,
 }
 .x3dom-canvas:focus {
-    outline:none; 
+    outline:none;
 }
 .x3dom-progress {
    margin: 0;
@@ -195,12 +195,12 @@ x3d:hover,
    opacity: 0.75;
 }
-.x3dom-nox3d p { 
+.x3dom-nox3d p {
    color: #fff;
    font-size: 14px;
 }
-.x3dom-nox3d a { 
+.x3dom-nox3d a {
    color: #fff;
    font-size: 14px;
 }
@@ -208,9 +208,9 @@ x3d:hover,
 /* self-clearing floats */
 .group:after {
-  content: "."; 
+  content: ".";
-  display: block; 
+  display: block;
-  height: 0; 
+  height: 0;
-  clear: both; 
+  clear: both;
  visibility: hidden;
 }
--- a/js/x3dom_functions.js
+++ b/js/x3dom_functions.js
@@ -7,14 +7,14 @@
  https://www.elphel.com
 */
-/** 
+/**
 * @file -
 * @brief -
- * 
+ *
 * @copyright Copyright (C) 2017 Elphel Inc.
 * @author Oleg Dzhimiev <oleg@elphel.com>
 *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
 * JavaScript code in this page.
 *
 *   The JavaScript code in this page is free software: you can
@@ -36,19 +36,19 @@
 */
 function x3dom_getViewTranslation(elem){
    var m = elem.runtime.viewMatrix().inverse();
    var tr = m.e3();
    return tr;
 }
 /**
- * get position and orientation in the 3D scene defined by mouse's canvas x,y 
+ * get position and orientation in the 3D scene defined by mouse's canvas x,y
 */
 function x3dom_getXYPosOr(cnvx,cnvy,round){
    var elem = Scene.element;
    var x,y,z;
@@ -59,65 +59,65 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
    var dist_xz = 1000;
    var shootRay = elem.runtime.shootRay(cnvx,cnvy);
    var valid_distance = true;
    if (shootRay.pickPosition != null){
        var index = Scene.highlighted_marker_index;
        if (index==null){
            if ((Scene.draggedTransformNode!=undefined)&&(Scene.draggedTransformNode!=null)){
                var sphere = Scene.draggedTransformNode.parent().parent();
                index = parseInt(sphere.attr("id").substr(7));
            }
        }
        if ((index==null)||(Data.markers[index]==undefined)){
            x = shootRay.pickPosition.x;
            y = shootRay.pickPosition.y;
            z = shootRay.pickPosition.z;
            dist_xz  = Math.sqrt(x*x+z*z);
        }else{
            x = Data.markers[index].x;
            y = Data.markers[index].y;
            z = Data.markers[index].z;
            dist_xz  = Data.markers[index].d_x3d;
            if (isNaN(dist_xz)){
                dist_xz  = Math.sqrt(x*x+z*z);
            }
        }
        dist_xyz = Math.sqrt(y*y+dist_xz*dist_xz);
        id = $(shootRay.pickObject).attr("id");
    }else{
        var viewingRay = elem.runtime.getViewingRay(cnvx,cnvy);
        x = viewingRay.dir.x;
        y = viewingRay.dir.y;
        z = viewingRay.dir.z;
        dist_xz = null;
        dist_xyz = null;
        valid_distance = false;
    }
    var R0 = Data.camera.Matrices.R0;
    var p_w = new x3dom.fields.SFVec3f(x,y,z);
    var p_rw = R0.multMatrixVec(p_w);
    if (valid_distance){
        dist_xz = Math.sqrt(p_rw.x*p_rw.x+p_rw.z*p_rw.z);
-        dist_xyz = Math.sqrt(p_rw.y*p_rw.y+dist_xz*dist_xz);   
+        dist_xyz = Math.sqrt(p_rw.y*p_rw.y+dist_xz*dist_xz);
    }else{
        dist_xz = null;
        dist_xyz = null;
@@ -127,17 +127,17 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
    az = (az+360)%360;
    el = Math.atan2(p_rw.y,Math.sqrt(p_rw.x*p_rw.x+p_rw.z*p_rw.z))*180/Math.PI;
    sk = 0;
    var result = {
        x: !round? x : x.toFixed(2),
        y: !round? y : y.toFixed(2),
        z: !round? z : z.toFixed(2),
        a: !round? az : az.toFixed(1),
        e: !round? el : el.toFixed(1),
        s: !round? sk : sk.toFixed(1)
    };
    if (dist_xz!=null){
        result.d_xz = !round? dist_xz : dist_xz.toFixed(1);
        result.d_xyz = !round? dist_xyz : dist_xyz.toFixed(1);
@@ -145,35 +145,35 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
        result.d_xz = dist_xz;
        result.d_xyz = dist_xyz;
    }
    result.id = id;
    result.index = index;
    return result;
 }
 /**
- * Get position and orientation of the observer (=viewer=camera) 
+ * Get position and orientation of the observer (=viewer=camera)
 * in the 3D scene
 */
 function x3dom_getCameraPosOr(round){
    //console.log("Getting PosOr");
    var elem = Scene.element;
    var m = elem.runtime.viewMatrix().inverse();
    var tr = m.e3();
    var R0 = Data.camera.Matrices.R0;
    //var T0 = x3dom_toYawPitchRoll();
    m = R0.mult(m);
    //m = x3dom_TxMxTi(m);
    var ypr = x3dom_YawPitchRoll_nc(m);
    ypr.yaw = (180/Math.PI*ypr.yaw+360)%360;
@@ -181,7 +181,7 @@ function x3dom_getCameraPosOr(round){
    ypr.roll *= 180/Math.PI;
    //x3dom_matrix_test();
    if (!round){
        return {
            x: tr.x,
@@ -199,9 +199,9 @@ function x3dom_getCameraPosOr(round){
            a: ypr.yaw.toFixed(1),
            e: ypr.pitch.toFixed(1),
            s: ypr.roll.toFixed(1)
-        };        
+        };
    }
 }
 // this upright is for world coordinates, not the camera's
@@ -209,17 +209,17 @@ function x3dom_getCameraPosOr(round){
 function x3dom_setUpRight(){
    var mat = Scene.element.runtime.viewMatrix().inverse();
    var from = mat.e3();
    var at = from.subtract(mat.e2());
    var up = Data.camera.Matrices.Up0;
    var s = mat.e2().cross(up).normalize();
    var newup = mat.e2().cross(s).normalize().negate();
    mat = x3dom.fields.SFMatrix4f.lookAt(from, at, newup);
    x3dom_setViewpoint(mat);
 }
@@ -228,7 +228,7 @@ function x3dom_setUpRight(){
 * rotation by delta angle around camera's current Up vector
 */
 function x3dom_rotation(dangle){
    var mat = Scene.element.runtime.viewMatrix();
    mat = mat.inverse();
@@ -236,19 +236,19 @@ function x3dom_rotation(dangle){
    var from = mat.e3();
    var at = from.subtract(mat.e2());
    var up = mat.e1();
    var q0 = x3dom.fields.Quaternion.axisAngle(up, -dangle);
    var m0 = q0.toMatrix();
    var m1  = x3dom.fields.SFMatrix4f.translation(from);
    var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
    var mres = m1.mult(m0).mult(m1n);
    newat = mres.multMatrixPnt(at);
    newmat = x3dom.fields.SFMatrix4f.lookAt(from, newat, up);
    x3dom_setViewpoint(newmat);
 }
@@ -257,41 +257,41 @@ function x3dom_rotation(dangle){
 * translate camera in x3dom space
 */
 function x3dom_translation(dx,dy,dz){
    var delta = new x3dom.fields.SFVec3f(dx,dy,dz);
    var mat = Scene.element.runtime.viewMatrix().inverse();
    var from = mat.e3();
    var at = from.subtract(mat.e2());
    var up = mat.e1();
    var newfrom = from.add(delta);
    var newat = newfrom.subtract(mat.e2());
    var newmat = x3dom.fields.SFMatrix4f.lookAt(newfrom, newat, up);
    x3dom_setViewpoint(newmat);
 }
 function x3dom_altelev(alt,elev){
    //x3dom_matrix_test();
    var mat = Scene.element.runtime.viewMatrix().inverse();
    var R0 = Data.camera.Matrices.R0;
-    //var T = x3dom_toYawPitchRoll();    
+    //var T = x3dom_toYawPitchRoll();
    var from = mat.e3();
    from.y = alt;
    var mat = R0.mult(mat);
    var ypr = x3dom_YawPitchRoll_nc(mat);
    var ypr2 = x3dom_YawPitchRoll_nc_degs(mat);
    //console.log("Check1");
    //console.log(ypr2);
    var az = ypr.yaw;
    var el = elev;
    var sk = ypr.roll;
@@ -309,7 +309,7 @@ function x3dom_altelev(alt,elev){
    var ypr2 = x3dom_YawPitchRoll_nc_degs(R_rw);
    //console.log("Check2");
    //console.log(ypr2);
    var matt  = x3dom.fields.SFMatrix4f.translation(from);
    var newmat = matt.mult(R_w);
@@ -322,16 +322,16 @@ function x3dom_altelev(alt,elev){
 * back and forth conversions for tests
 */
 function x3dom_matrix_test(){
    console.log("begin==================================");
    var viewpoint = $(Scene.element).find("Viewpoint");
    console.log("Viewpoint DOM element");
    console.log("position: "+viewpoint.attr("position"));
    console.log("orientation: "+viewpoint.attr("orientation"));
-    /* 
+    /*
     * 1. view matrix:
     *      - from world to camera
     *          - cols - world basis in camera coords
@@ -343,54 +343,54 @@ function x3dom_matrix_test(){
     */
    var mat = Scene.element.runtime.viewMatrix();
    console.log("1. View Matrix from runtime");
    console.log(mat.toString());
    var mat_i = mat.inverse();
    console.log("2. Inverted View Matrix");
    console.log(mat_i.toString());
    var from = mat_i.e3();
    var at   = from.subtract(mat_i.e2());
    var up   = mat_i.e1();
    console.log("3. From-At-Up");
    var mat_fau = x3dom.fields.SFMatrix4f.lookAt(from, at, up);
    console.log(mat_fau.toString());
    var T = x3dom_toYawPitchRoll();
    var mat_eul = T.mult(mat_i).mult(T.inverse());
    var eangles = x3dom_YawPitchRoll_degs(mat_eul);
    console.log(eangles);
    var R = mat;
    var az = Math.atan2(R._02,R._22)*180/Math.PI;
    var el = -Math.asin(R._12)*180/Math.PI;
    var sk = Math.atan2(R._10,R._11)*180/Math.PI;
    console.log("Angles:");
    console.log("az="+az+" el="+el+" sk="+sk);
-    console.log("matrix from angles");    
+    console.log("matrix from angles");
    var matx = x3dom.fields.SFMatrix4f.rotationX(el*Math.PI/180);
    var maty = x3dom.fields.SFMatrix4f.rotationY(az*Math.PI/180);
    var matz = x3dom.fields.SFMatrix4f.rotationZ(sk*Math.PI/180);
    var m1  = x3dom.fields.SFMatrix4f.translation(from);
    var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
    var newmat = maty.mult(matx).mult(matz);
    console.log(newmat.toString());
    console.log("end==================================");
 }
@@ -433,11 +433,11 @@ function x3dom_TxMxTi(m){
 }
 function x3dom_YawPitchRoll(m){
    var yaw = Math.atan2(m._10,m._00);
    var pitch = -Math.asin(m._20);
    var roll = Math.atan2(m._21,m._22);
    return {
        yaw: yaw,
        pitch: pitch,
@@ -446,9 +446,9 @@ function x3dom_YawPitchRoll(m){
 }
 function x3dom_YawPitchRoll_degs(m){
    var a = x3dom_YawPitchRoll(m);
    return {
        yaw: a.yaw*180/Math.PI,
        pitch: a.pitch*180/Math.PI,
@@ -460,38 +460,38 @@ function x3dom_YawPitchRoll_degs(m){
 * from not converted matrix
 */
 function x3dom_YawPitchRoll_nc(m){
    var yaw = -Math.atan2(m._02,m._22);
    var pitch = -Math.asin(m._12);
    var roll = -Math.atan2(m._10,m._11);
    return {
        yaw: yaw,
        pitch: pitch,
        roll: roll
    };
 }
 function x3dom_YawPitchRoll_nc_degs(m){
    var a = x3dom_YawPitchRoll_nc(m);
    return {
        yaw: a.yaw*180/Math.PI,
        pitch: a.pitch*180/Math.PI,
        roll: a.roll*180/Math.PI
    };
 }
 /*
 function x3dom_YawPitchRoll_2_degs(m){
    var pitch = Math.PI+Math.asin(m._20);
    var roll = Math.atan2(m._21/Math.cos(pitch),m._22/Math.cos(pitch));
    var yaw = Math.atan2(m._10/Math.cos(pitch),m._00/Math.cos(pitch));
    return {
        yaw: yaw*180/Math.PI,
        pitch: pitch*180/Math.PI,
@@ -500,7 +500,7 @@ function x3dom_YawPitchRoll_2_degs(m){
 }
 */
 function x3dom_delta_map2scene(p0,p1){
    var pi = new L.LatLng(p0.lat,p1.lng);
    var dx = p0.distanceTo(pi);
@@ -511,73 +511,73 @@ function x3dom_delta_map2scene(p0,p1){
    if (p1.lng<p0.lng) dp_rw.x = -dp_rw.x;
    if (p1.lat>p0.lat) dp_rw.z = -dp_rw.z;
    var M0 = Data.camera.Matrices.R0.inverse();
    var dp_w = M0.multMatrixVec(dp_rw);
    return dp_w;
 }
 // x,y,z - x3dom internal coords
 function x3dom_getDistAngle(x,y,z){
    var R0 = Data.camera.Matrices.R0;
    var p_w = new x3dom.fields.SFVec3f(x,y,z);
    var p_rw = R0.multMatrixVec(p_w);
    var d = Math.sqrt(p_rw.x*p_rw.x+p_rw.z*p_rw.z);
    var a = Math.atan2(p_rw.x,-p_rw.z)*180/Math.PI;
    return Array(d,a);
 }
 function x3dom_update_map(){
    var Camera = Map.marker;
    // real world ypr from viewmatrix
    var mat = Scene.element.runtime.viewMatrix().inverse();
    var R0 = Data.camera.Matrices.R0;
    //var T = x3dom_toYawPitchRoll();
    var p_w = mat.e3();
    var dp_w = mat.e3();
    //var m_rw = T.mult(R0).mult(mat).mult(T.inverse());
    // R0 - rw -> w
    mat = R0.mult(mat);
    var ypr = x3dom_YawPitchRoll_nc_degs(mat);
    var heading = ypr.yaw;
    Map.marker.setHeading(heading);
    // real world angle distance of some point
    if (Scene.old_view_translation != null){
        dp_w = dp_w.subtract(Scene.old_view_translation);
    }
    // from w to rw
    dp_rw = R0.multMatrixVec(dp_w);
    var distance = Math.sqrt(dp_rw.x*dp_rw.x+dp_rw.z*dp_rw.z);
    var angle = 0;
    if (dp_rw.z!=0){
        angle = 180/Math.PI*Math.atan2(dp_rw.x,-dp_rw.z);
    }
    //angle = angle + heading;
    var initial_coordinates = [Data.camera.latitude,Data.camera.longitude];
    var p0 = new L.LatLng(initial_coordinates[0],initial_coordinates[1]);//Camera._latlng;
    var p1 = p0.CoordinatesOf(angle,distance);
@@ -587,16 +587,16 @@ function x3dom_update_map(){
    Data.camera.latitude = p1.lat;
    Data.camera.longitude = p1.lng;
    Data.camera.heading = heading;
    Scene.old_view_translation = p_w;
 }
 // uses globals
 function x3dom_setViewpoint(m){
    //console.log("Setting a viewpoint");
    var Q = new x3dom.fields.Quaternion(0, 0, 1, 0);
    Q.setValue(m);
    var AA = Q.toAxisAngle();

--- a/js/x3dom_init.js
+++ b/js/x3dom_init.js
@@ -7,14 +7,14 @@
  https://www.elphel.com
 */
-/** 
+/**
 * @file -
 * @brief -
- * 
+ *
 * @copyright Copyright (C) 2017 Elphel Inc.
 * @author Oleg Dzhimiev <oleg@elphel.com>
 *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
 * JavaScript code in this page.
 *
 *   The JavaScript code in this page is free software: you can
@@ -39,9 +39,9 @@ var X3DOMObject = function(element,data,options){
    this.element = element;
    this.data = data;
    var defaults = {
-        debug: true,        // {boot}, unused        
+        debug: true,        // {boot}, unused
        highlight: true,    // {bool}, highlight surfaces on mouseover
        fov: 30*Math.PI/180,// {rad}, default vertical fov
        fov_step: 0.025,    // {rad}, min change
@@ -49,7 +49,7 @@ var X3DOMObject = function(element,data,options){
    this._settings = $.extend(defaults,options);
-    this._DEBUG = this._settings.debug;    
+    this._DEBUG = this._settings.debug;
    this._FOV = this._settings.fov;
    this._FOV_STEP = this._settings.fov_step;
    this._HIGHLIGHT_ON_MOUSEOVER = this._settings.highlight;
@@ -57,22 +57,22 @@ var X3DOMObject = function(element,data,options){
    // tmp vars
    this._resizeTimer = false;
    this._eventCtrlKey = false;
    this.highlighted_marker_index = null;
    this.old_view_translation = null;
    // status vars
    this._X3DOM_SCENE_INIT_DONE = false;
    this._ctrlKey = false;
    this._shiftKey = false;
    this.markInfoIndex = null;
 };
 // ui, window
 X3DOMObject.prototype.initResize = function(){
    var self = this;
    self.resize();
@@ -89,7 +89,7 @@ X3DOMObject.prototype.initResize = function(){
 // ui, window
 X3DOMObject.prototype.resize = function(){
    var self = this;
    var w = $(window).width();
@@ -97,7 +97,7 @@ X3DOMObject.prototype.resize = function(){
    $(self.element).attr("width",w);
    $(self.element).attr("height",h);
    $("#crosshair_h").css({
        left: (w/2-$("#crosshair_h").width()/2)+"px",
        top: (h/2)+"px"
@@ -107,26 +107,26 @@ X3DOMObject.prototype.resize = function(){
        left: (w/2)+"px",
        top: (h/2-$("#crosshair_v").height()/2)+"px"
    });
    var fov = w/h*self._FOV;
    //fov = Math.PI/2;
    self.setFoV(fov);
    self.data.camera.fov = fov;
    if (Map.marker != undefined){
        Map.marker.setFoV(fov);
    }
 }
 /*
 X3DOMObject.getX3DOMlibrary = function(){
    var self = this;
    $.getScript("js/x3dom-full.debug.js",function(){
        //wait until it parsed the DOM
        x3dom.runtime.ready = function(){
@@ -138,9 +138,9 @@ X3DOMObject.getX3DOMlibrary = function(){
 // so one doesn't have to click to enable keydown/keyup
 X3DOMObject.prototype.focusOnCanvas = function(){
    this.element.getElementsByTagName("canvas")[0].focus();
 }
 /**
@@ -148,11 +148,11 @@ X3DOMObject.prototype.focusOnCanvas = function(){
 * which was the default action
 */
 X3DOMObject.prototype.FoVEvents = function(){
    var self = this;
    // true = CAPTURING = from parent to child
    // canvas is a child of x3d
    //Chrome?!
    self.element.addEventListener('mousewheel',function(e){
        var delta = e.deltaY>0 ? 1 : -1;
@@ -162,9 +162,9 @@ X3DOMObject.prototype.FoVEvents = function(){
        e.stopPropagation();
        return false;
    },true);
    //Firefox?!
-    self.element.addEventListener('DOMMouseScroll',function(e){  
+    self.element.addEventListener('DOMMouseScroll',function(e){
        var delta = e.detail>0 ? 1 : -1;
        self.changeFoV(delta*self._FOV_STEP);
        // prevent zoom
@@ -172,8 +172,8 @@ X3DOMObject.prototype.FoVEvents = function(){
        e.stopPropagation();
        return false;
    },true);
 }
 /**
@@ -184,20 +184,20 @@ X3DOMObject.prototype.changeFoV = function(val){
    var fov = this.getFoV()+val;
    this.setFoV(fov);
-    // update Map 
+    // update Map
    Map.marker.setFoV(fov);
 }
 /**
 * Set by @val rad
 */
 X3DOMObject.prototype.setFoV = function(val){
    var vp = $(this.element).find("Viewpoint")[0];
    $(vp).prop("fieldOfView",val);
    // apply to all viewpoints, but:
    // https://doc.x3dom.org/author/Navigation/Viewpoint.html
    // = correct field of view is not guaranteed in X3DOM
@@ -206,24 +206,24 @@ X3DOMObject.prototype.setFoV = function(val){
        $(this).attr("fieldOfView",fov);
    });
    */
 }
 /**
 * Read property from DOM element
 */
 X3DOMObject.prototype.getFoV = function(){
    var vp = $(this.element).find("Viewpoint")[0];
    return parseFloat($(vp).prop("fieldOfView"));
 }
 /**
 * Remember which key is pressed - used for mouse moving / dragging
 */
 X3DOMObject.prototype.KeyEvents = function(){
    var self = this;
    //Chrome?!
    self.element.addEventListener('mousemove',function(e){
@@ -236,7 +236,7 @@ X3DOMObject.prototype.KeyEvents = function(){
            self._shiftKey = true;
        }else{
            self._shiftKey = false;
-        }        
+        }
    },true);
    self.element.addEventListener('keypress',function(e){
@@ -244,20 +244,20 @@ X3DOMObject.prototype.KeyEvents = function(){
            $("#reset_view").click();
        }
    });
 }
 /**
 * The 3D model building blocks are shapes
 */
 X3DOMObject.prototype.ShapeEvents = function(){
    var self = this;
    var tmp = new X3DOMObject.PointerMarker();
    var inlines = $(self.element).find("inline");
    inlines.each(function(){
        if ($(this).attr("name")!="back"){
@@ -265,15 +265,15 @@ X3DOMObject.prototype.ShapeEvents = function(){
            var shapes = $(this).find("Shape");
            shapes.each(function(){
                new X3DOMObject.Shape(this);
            });
        }
    });
 }
 /**
@@ -281,62 +281,62 @@ X3DOMObject.prototype.ShapeEvents = function(){
 */
 X3DOMObject.Shape = function(element){
    this._elem  = element
    this._registerEvents();
 }
 X3DOMObject.Shape.prototype._registerEvents = function(){
    var self = Scene;
    $(this._elem).on("mousemove",function(e){
        var x = e.originalEvent.worldX;
        var y = e.originalEvent.worldY;
        var z = e.originalEvent.worldZ;
        if (self._ctrlKey||SETTINGS.pointer){
            $("#sliding_sphere").find('material').attr("diffuseColor",convert_color_l2x(SETTINGS.markercolor));
            $("#sliding_sphere").find('Sphere').attr("radius",SETTINGS.markersize/2);
            X3DOMObject.Marker.place(x,y,z,"sliding_sphere");
            $("#sliding_sphere").find("switch").attr("whichChoice",0);
        }else{
            X3DOMObject.Marker.place(0,0,0,"sliding_sphere");
            $("#sliding_sphere").find("switch").attr("whichChoice",-1);
        }
        /*
        if (!SETTINGS.verticaldrag&&Scene.draggedMarker){
            console.log("dragging not vertically");
            //$(Scene.draggedMarker) - get id
            var sphere = $(Scene.draggedMarker).parent().parent();
            console.log(Scene.draggedMarker.parent().parent());
            var index = parseInt(sphere.attr("id").substr(7));
            console.log(index);
            X3DOMObject.Marker.place(x,y,z,"my-sph-"+index);
        }
        */
    });
    $(this._elem).on("click",function(e){
        // if self._shiftKey then the mouse will always be over the pointer marker
        if ((self._shiftKey)||(SETTINGS.highlight)){
            X3DOMObject.Shape.toggle(this);
        }
    });
    $(this._elem).on("mouseover",function(e){
@@ -357,13 +357,13 @@ X3DOMObject.Shape.prototype._registerEvents = function(){
        X3DOMObject.Shape.dehighlight(this);
    });
 }
 X3DOMObject.Shape.highlight = function(elem){
    var m = $(elem).find("Material[class='hl']");
    if (m.length==0){
        m = $("<Material>",{class:'hl'});
        //m.attr("ambientintensity","1");
@@ -375,45 +375,45 @@ X3DOMObject.Shape.highlight = function(elem){
 }
 X3DOMObject.Shape.dehighlight = function(elem){
    var self = this;
    $(elem).find("Appearance").find("Material[class='hl']").remove();
    m = $(elem).find("Material[class='sl']");
    if (m.length==1){
        X3DOMObject.Shape.select(elem);
    }
 }
 X3DOMObject.Shape.toggle = function(elem){
    var self = this;
    var m = $(elem).find("Material[class='sl']");
    if (m.length!=0){
        X3DOMObject.Shape.deselect(elem);
    }else{
        X3DOMObject.Shape.select(elem);
    }
 }
 X3DOMObject.Shape.select = function(elem){
  var self = this;
  X3DOMObject.Shape.deselect(elem);
  var m = $(elem).find("Material[class='sl']");
  m = $("<Material>",{class:'sl'});
  m.attr("emissiveColor","1 1 1");
  //m.attr("transparency","0");
  $(elem).find("Appearance").append(m);
 }
 X3DOMObject.Shape.deselect = function(elem){
@@ -425,14 +425,14 @@ X3DOMObject.Shape.deselect = function(elem){
 X3DOMObject.prototype.createMarker = function(x,y,z,id){
    var self = this;
    var sph_class = "";
    var index = null;
    var color = convert_color_l2x(SETTINGS.markercolor);
    var size = SETTINGS.markersize/2;
    if ((id=="")||(id==undefined)){
        sph_class = "my-markers";
        index = $("."+sph_class).length;
@@ -440,38 +440,38 @@ X3DOMObject.prototype.createMarker = function(x,y,z,id){
        color = convert_color_l2x(self.data.markers[index].color);
        size  = self.data.markers[index].size/2;
    }
    var html = `
    <group id='`+id+`' class='`+sph_class+`'>
    <switch whichChoice='0'>
    <transform translation='`+x+` `+y+` `+z+`' rotation='0 0 0 0'>
-        <shape class='shapemarker'> 
+        <shape class='shapemarker'>
-        <appearance> 
+        <appearance>
            <material diffuseColor='`+color+`' transparency='0.0' myColor='`+color+`'></material>
-        </appearance> 
+        </appearance>
        <Sphere DEF="sphere" radius="`+size+`" />
-        </shape> 
+        </shape>
    </transform>
    </switch>
    </group>
    `;
    var sphere_element = $(html);
    $(this.element).find("scene").append(sphere_element);
    //var shape = $(sphere_element).find("shape");
    //var id_prefix = $(sphere_element).attr("id").substr(0,7);
    return sphere_element;
    // sphere events
    // Drag, select, delete
    // Data.push()
 }
 X3DOMObject.prototype.updateMarkersIndices = function(){
    $(this.element).find(".my-markers").each(function(i,v){
        $(this).attr("id","my-sph-"+i);
@@ -480,7 +480,7 @@ X3DOMObject.prototype.updateMarkersIndices = function(){
    // sphere events
    // Drag, select, delete
    // Data.push()
 }
 /**
@@ -488,54 +488,54 @@ X3DOMObject.prototype.updateMarkersIndices = function(){
 *  @ylevel - level height
 */
 X3DOMObject.Marker = function(x,y,z,ylevel){
    this._x = x || 0;
    this._y = y || 0;
    this._z = z || 0;
    this._ylevel = ylevel || false;
    this.init();
 }
 X3DOMObject.Marker.prototype.init = function(){
    if (this._ylevel){
        //console.log(this._x+" "+this._y+" "+this._z);
        // temporary solution is to shoot rays - very slow
        var cPos = Scene.element.runtime.calcCanvasPos(this._x,this._y,this._z);
        var cx = cPos[0];
        var cy = 0;
        var x,y,z,d0,d1;
        var sr;
        d0 = Math.sqrt(this._x*this._x+this._z*this._z);
        for(var i=0;i<$(window).height();i++){
            sr = Scene.element.runtime.shootRay(cx,cy);
            if (sr.pickPosition != null){
                x = sr.pickPosition.x;
                y = sr.pickPosition.y;
                z = sr.pickPosition.z;
                d1 = Math.sqrt(x*x+z*z);
                if ((d1-d0)<0.1){
                    this._y = y;
                    break;
                }
            }
            cy += 1;
        }
        /*
        //var from = new x3dom.fields.SFVec3f(this._x, 100, this._z);
        var from = new x3dom.fields.SFVec3f(0, 0, 0);
@@ -543,36 +543,36 @@ X3DOMObject.Marker.prototype.init = function(){
        var dir =  new x3dom.fields.SFVec3f(0, -0, -1);//at.subtract(from);
        // dir gets auto normalized
        var vray = new x3dom.fields.Ray(from, dir);
        //var vray = Scene.element.runtime.getViewingRay(0,0);
        console.log(vray);
        var scene = Scene.element.runtime.canvas.doc._scene;
        var info  = Scene.element.runtime.canvas.doc._viewarea._pickingInfo;
        console.log(Scene.element.runtime.pickMode());
        //console.log(Scene.element.runtime.changePickMode('idbuf'));
        //console.log(Scene.element.runtime.changePickMode('color'));
        console.log(Scene.element.runtime.changePickMode('texcoord'));
        //console.log(Scene.element.runtime.changePickMode('box'));
        console.log(Scene.element.runtime.pickMode());
        var isect = scene.doIntersect(vray);
        console.log(info);
        console.log("vr");
        console.log(vray);
        if (vray.hitObject!=null){
            console.log($(vray.hitObject._xmlNode).parent().find("ImageTexture").attr("url"));
            var el = $(vray.hitObject._xmlNode).parent();
            var bbox = Scene.element.runtime.getSceneBBox();
            console.log(bbox);
            this._x = vray.hitPoint.x;
            this._y = vray.hitPoint.y;
            this._z = vray.hitPoint.z;
@@ -584,14 +584,14 @@ X3DOMObject.Marker.prototype.init = function(){
        var bbox = Scene.element.runtime.getSceneBBox();
        console.log(bbox);
        */
        /*
        var sr = Scene.element.runtime.shootRay(1000,450);
        console.log("sr");
        console.log(sr);
        */
        /*
        //while(vray.hitPoint.y>-100){
        var n=0;
@@ -607,48 +607,48 @@ X3DOMObject.Marker.prototype.init = function(){
        }
        */
        //do intersect
        //hitobject
        //get y
    }
    this._elem = Scene.createMarker(this._x,this._y,this._z);
    this._shape = this._elem.find("shape");
    this._registerEvents();
 }
 X3DOMObject.Marker.prototype._registerEvents = function(){
    var PREFIX = "my-sph-";
    var self = this;
    var marker = this._shape;
    //var id_prefix = $(this._elem).attr("id").substr(0,PREFIX.length);
    //var index = parseInt($(this._elem).attr("id").substr(PREFIX.length));
    marker.on('click',function(e){
        var elem = $(this).parent().parent().parent();
        var index = parseInt($(elem).attr("id").substr(PREFIX.length));
        var id_prefix = $(elem).attr("id").substr(0,PREFIX.length);
        //self.dehighlight();
        //X3DOMObject.PointerMarker.dehighlight(self._elem);
        if (Scene._ctrlKey){
            if (id_prefix==PREFIX){
                elem.remove();
                // REMOVE
                Data.markers.splice(index,1);
                Scene.updateMarkersIndices();
                Map.deleteMarker(index);
            }
        }else{
@@ -657,38 +657,38 @@ X3DOMObject.Marker.prototype._registerEvents = function(){
            Map.toggleMarker(index);
        }
    });
    marker.on('mouseover',function(e){
        var elem = $(this).parent().parent().parent();
        var index = parseInt($(elem).attr("id").substr(PREFIX.length));
        var id_prefix = $(elem).attr("id").substr(0,PREFIX.length);
        X3DOMObject.Marker.highlight(elem);
        Map.highlightMarker(index);
        Scene.highlighted_marker_index = index;
        if (Scene._ctrlKey){
            if (id_prefix==PREFIX){
                $("#sliding_sphere").find("switch").attr("whichChoice",-1);
            }
        }
    });
    /*
    marker.addEventListener('mouseover',function(){
        Scene.showMessage("infowindow","X");
    },true);
    */
    marker.on('mouseout',function(e){
        var elem = $(this).parent().parent().parent();
        var index = parseInt($(elem).attr("id").substr(PREFIX.length));
@@ -696,7 +696,7 @@ X3DOMObject.Marker.prototype._registerEvents = function(){
        Scene.highlighted_marker_index = null;
        if (Scene.draggedTransformNode==null){
            if (!elem.prop("selected")){
                X3DOMObject.Marker.dehighlight(elem);
                Map.dehighlightMarker(index);
@@ -706,39 +706,39 @@ X3DOMObject.Marker.prototype._registerEvents = function(){
            }
        }
    });
    marker.on('mousedown',function(e){
        var elem = $(this).parent().parent().parent();
        var index = parseInt($(elem).attr("id").substr(PREFIX.length));
        X3DOMObject.Marker.dehighlight(elem);
        Map.dehighlightMarker(index);
        document.getElementById("navInfo").setAttribute("type", '"NONE"');
        Scene.lastMouseX = event.offsetX;
        Scene.lastMouseY = event.offsetY;
        X3DOMObject.Marker.dragStart(this);
        Scene.element.addEventListener('mousemove',X3DOMObject.Marker.mouseMove,true);
        Scene.element.addEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);
    });
    marker.on('mouseup',function(e){
        var elem = $(this).parent().parent().parent();
        var index = parseInt($(elem).attr("id").substr(PREFIX.length));
        X3DOMObject.Marker.highlight(elem);
        Map.highlightMarker(index);
    });
 }
 X3DOMObject.Marker.mouseUp = function(){
@@ -751,18 +751,18 @@ X3DOMObject.Marker.mouseUp = function(){
        X3DOMObject.Marker.toggle(elem);
    }
    */
-    Scene.element.removeEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);    
+    Scene.element.removeEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);
    Scene.element.removeEventListener('mousemove',X3DOMObject.Marker.mouseMove,true);
    Scene.draggedTransformNode = null;
    Scene.draggingUpVec        = null;
    Scene.draggingRightVec     = null;
    Scene.unsnappedDragPos     = null;
    Scene.markerdragged = false;
    document.getElementById("navInfo").setAttribute("type",'"examine"');
 }
 // from https://x3dom.org/x3dom/example/MovingObjectsWithDOMEvents.html
@@ -772,13 +772,13 @@ X3DOMObject.Marker.dragStart = function(elem){
    var transformNode = $(elem).parent();
    var tr0 = $(transformNode).attr("translation");
-    Scene.draggedTransformNode = transformNode; 
+    Scene.draggedTransformNode = transformNode;
    Scene.unsnappedDragPos = new x3dom.fields.SFVec3f.parse(tr0);
    //compute the dragging vectors in world coordinates
    //(since navigation is disabled, those will not change until dragging has been finished)
    var vMatInv = Scene.element.runtime.viewMatrix().inverse();
    var viewDir = vMatInv.multMatrixVec(new x3dom.fields.SFVec3f(0.0, 0.0, -1.0));
@@ -793,18 +793,18 @@ X3DOMObject.Marker.dragStart = function(elem){
    var magnificationFactor = 1.0 / Math.abs(p1[0] - p2[0]);
-    //scale up vector and right vector accordingly            
+    //scale up vector and right vector accordingly
    Scene.draggingUpVec    = Scene.draggingUpVec.multiply(magnificationFactor);
    Scene.draggingRightVec = Scene.draggingRightVec.multiply(magnificationFactor);
 }
 X3DOMObject.Marker.mouseMove = function(event){
    Scene.markerdragged = true;
    X3DOMObject.Marker.highlight(Scene.draggedTransformNode.parent().parent());
    //offsetX / offsetY polyfill for FF
    var target = event.target || event.srcElement;
    var rect = target.getBoundingClientRect();
@@ -830,15 +830,15 @@ X3DOMObject.Marker.mouseMove = function(event){
                if (!$(sr.pickObject).hasClass("shapemarker")){
                    var sphere = Scene.draggedTransformNode.parent().parent();
                    var index = parseInt(sphere.attr("id").substr(7));
                    X3DOMObject.Marker.place(sr.pickPosition.x,sr.pickPosition.y,sr.pickPosition.z,"my-sph-"+index);
                    //console.log("got shape");
                    //Scene.draggedTransformNode
                    X3DOMObject.Marker.slide(index,sr.pickPosition.x,sr.pickPosition.y,sr.pickPosition.z);
                    X3DOMObject.displayInfo(event);
                    X3DOMObject.displayViewInfo(event);
                }
            }
        }
@@ -846,11 +846,11 @@ X3DOMObject.Marker.mouseMove = function(event){
    Scene.lastMouseX = event.offsetX;
    Scene.lastMouseY = event.offsetY;
 }
 X3DOMObject.Marker.drag = function(dx,dy){
    var offsetUp    = Scene.draggingUpVec.multiply(-dy);
    var offsetRight = Scene.draggingRightVec.multiply(dx);
@@ -860,23 +860,23 @@ X3DOMObject.Marker.drag = function(dx,dy){
    var sphere = $(Scene.draggedTransformNode).parent().parent();
    var index = parseInt(sphere.attr("id").substr(7));
    X3DOMObject.Marker.slide(index,Scene.unsnappedDragPos.x,Scene.unsnappedDragPos.y,Scene.unsnappedDragPos.z);
 }
 X3DOMObject.Marker.slide = function(index,x,y,z){
    var da = x3dom_getDistAngle(x,y,z);
    var distance = da[0];
    var angle = da[1];
    var p1_ll = Map.marker._latlng;
    var p2_ll = p1_ll.CoordinatesOf(angle,distance);
    var c = Data.markers[index];
    c.x = x;
    c.y = y;
    c.z = z;
@@ -885,53 +885,53 @@ X3DOMObject.Marker.slide = function(index,x,y,z){
    c.altitude = c.y;
    //d_x3d - map distance calculated from the model
    c.d_x3d = distance;
    X3DOMObject.displayMarkInfo(index);
    X3DOMObject.displayInfo({});
    Map.marker.moveMeasureMarker(p2_ll,index);
 }
 X3DOMObject.Marker.place = function(x,y,z,id){
-    var tr = $("#"+id).find("transform");  
+    var tr = $("#"+id).find("transform");
    $(tr).attr("translation",x+" "+y+" "+z);
 }
 X3DOMObject.Marker.highlight = function(elem){
    var color = "1 0.5 0.5";
-    elem.find('material').attr("diffuseColor",color); 
+    elem.find('material').attr("diffuseColor",color);
 }
 X3DOMObject.Marker.dehighlight = function(elem){
    //var color = "0.07 1 0.07";
    var color = elem.find('material').attr("myColor");
    elem.find('material').attr("diffuseColor",color);
 }
 X3DOMObject.Marker.toggle = function(elem){
    if (elem.prop("selected")){
        elem.prop("selected",false);
    }else{
        elem.prop("selected",true);
    }
 }
 // PointerMarker
 X3DOMObject.PointerMarker = function(){
    //init
    this._init();
 };
 X3DOMObject.PointerMarker.prototype._init = function(){
@@ -939,23 +939,23 @@ X3DOMObject.PointerMarker.prototype._init = function(){
    this._elem = Scene.createMarker(0,0,0,"sliding_sphere");
    this._shape = this._elem.find("shape");
    this._registerEvents();
    this._elem.find("switch").attr("whichChoice",-1);
 }
 X3DOMObject.PointerMarker.prototype._registerEvents = function(){
    var self = this;
    var Camera = Map.marker;
    self._shape.on("click",function(e){
        X3DOMObject.Marker.dehighlight(self._elem);
        var xyz = $(this).parent().attr("translation");
        xyz = xyz.split(" ");
        // Create marker for Data
        var mark = new X3L({
            x: parseFloat(xyz[0]) || 0,
@@ -964,44 +964,44 @@ X3DOMObject.PointerMarker.prototype._registerEvents = function(){
            color: SETTINGS.markercolor,
            size:  SETTINGS.markersize,
        });
        mark.d_x3d = Math.sqrt(mark.x*mark.x+mark.z*mark.z);
        mark.d_map = "<font style='color:red;'>drag over map</font>";
        Data.markers.push(mark);
        X3DOMObject.displayMarkInfo(Data.markers.length-1);
        // Create marker on the scene
        new X3DOMObject.Marker(mark.x,mark.y,mark.z);
        var da = x3dom_getDistAngle(mark.x,mark.y,mark.z);
        var distance = da[0];
        var angle = da[1];
        // Create marker on the map
        Camera.createMeasureMarker(angle,distance);
        var map_mark = Camera._measureMarkers[Camera._measureMarkers.length-1];
        // Update marker in Data
        mark.latitude = map_mark._latlng.lat;
        mark.longitude = map_mark._latlng.lng;
        // register events for a new marker in Data
        X3DOMObject.MapMarker.registerEvents(map_mark);
        // need?
        Camera._syncMeasureMarkersToBasePoint();
    });
    self._shape.on("mousedown",function(e){
        X3DOMObject.Marker.highlight(self._elem);
    });
 }
 /**
@@ -1010,27 +1010,27 @@ X3DOMObject.PointerMarker.prototype._registerEvents = function(){
 X3DOMObject.MapMarker = {};
 X3DOMObject.MapMarker.registerEvents = function(map_mark){
        var Camera = Map.marker;
        map_mark.on('mouseover',function(){
            //console.log(this._index);
            var index = this._index;
            var elem = $("#my-sph-"+index);
            X3DOMObject.Marker.highlight(elem);
            Map.highlightMarker(index);
        });
        map_mark.on('mouseout',function(){
            var index = this._index;
            var elem = $("#my-sph-"+index);
-            if (Camera.draggedMarker._index!=index){                
+            if (Camera.draggedMarker._index!=index){
                if (!this._selected){
                    X3DOMObject.Marker.dehighlight(elem);
                    Map.dehighlightMarker(index);
@@ -1038,110 +1038,110 @@ X3DOMObject.MapMarker.registerEvents = function(map_mark){
            }
        });
        /*
        map_mark.on('click',function(e){
            var index = this._index
            var elem = $("#my-sph-"+index);
            X3DOMObject.Marker.toggle(elem);
            Map.toggleMarker(index);
            //if ctrl - remove
            //Data.markers.splice(index);
            //Scene.updateMarkersIndices();
        });
        */
        map_mark.on('mousedown',function(){
            var index = this._index;
            var elem = $("#my-sph-"+index);
            X3DOMObject.Marker.dehighlight(elem);
            Map.dehighlightMarker(index);
        });
        map_mark.on('mouseup',function(e){
            var index = this._index;
            var elem = $("#my-sph-"+index);
            if (e.originalEvent.ctrlKey){
                // from Data
                Data.markers.splice(index);
                // from Map (indices get updated)
                Map.deleteMarker(index);
                // from Scene
                elem.remove();
                Scene.updateMarkersIndices();
            }else{
                X3DOMObject.Marker.toggle(elem);
                Map.toggleMarker(index);
                X3DOMObject.Marker.highlight(elem);
                Map.highlightMarker(index);
            }
        });
 }
 /**
 * info template
 */
 X3DOMObject.displayInfo = function(e){
        if (Data.markers.length==0||!SETTINGS.markinfo){
            ui_hideMessage("window-markinfo");
        }
        //console.log("displayInfo");
        var elem = Scene.element;
        var mouse = x3dom_getXYPosOr(e.clientX,e.clientY,true);
        if (Data.markers[mouse.index]!=undefined){
            X3DOMObject.displayMarkInfo(mouse.index);
        }
        var dist = 1000;
        $("#window-info").css({"font-size":"20px"});
        if (mouse.d_xz != null){
            var dist_msg = "";
            var id_msg = "";
            if (SETTINGS.moreinfo){
                //console.log("displayInfo actual displaying");
                $("#window-info").css({"font-size":"16px"});
                var st = mouse.id;
                id_msg = (st===undefined)?"n/a":st;
                dist_msg += "<table>";
                dist_msg += "<tr><th align='center'>shape id</td><td>"+id_msg+"</td></tr>";
-                dist_msg += "</table>";    
+                dist_msg += "</table>";
                dist_msg += "<table>";
                dist_msg += "<tr><th align='left'>d<sub>xz</sub></td><td>"+mouse.d_xz+" m</td>";
                dist_msg += "<td>&nbsp;</td>";
                dist_msg += "<th align='left'>d<sub>xyz</sub></td><td>"+mouse.d_xyz+" m</td></tr>";
-                dist_msg += "</table>";                    
+                dist_msg += "</table>";
            }else{
                dist_msg = mouse.d_xz+" m";
@@ -1168,31 +1168,31 @@ X3DOMObject.displayInfo = function(e){
 * view info template
 */
 X3DOMObject.displayViewInfo = function(e){
    if (Data.markers.length==0||!SETTINGS.markinfo){
        ui_hideMessage("window-markinfo");
    }
    if (!e.target){
        e.clientX = $(window).width()/2;
        e.clientY = $(window).height()/2;
    }
    var mouse = x3dom_getXYPosOr(e.clientX,e.clientY,true);
    mouse.s = "0";
    /*
    if (Data.markers[mouse.index]!=undefined){
        X3DOMObject.displayMarkInfo(mouse.index);
    }
    */
    var camera = x3dom_getCameraPosOr(true);
    // ?!!!
    //Map.marker.setAltitude(camera.y);
    //Map.marker.setElevation(camera.e*Math.PI/180);
    var msg = `
 <table>
 <tr>
@@ -1229,7 +1229,7 @@ X3DOMObject.displayViewInfo = function(e){
 </tr>
 </table>
 `;
    if (SETTINGS.viewinfo){
        ui_showMessage("window-viewinfo",msg);
    }else{
@@ -1241,56 +1241,55 @@ X3DOMObject.displayViewInfo = function(e){
 * view marker data - satellite vs 3d model
 */
 X3DOMObject.displayMarkInfo = function(index){
    //console.log("displayMarkInfo");
    var hide = false;
    if (Data.markers.length==0){
        hide = true;
    }else{
        msg = "<div>Marker "+index+" (Satellite vs 3D model)</div>";
        var d_map = Data.markers[index].d_map;
        var d_x3d = Data.markers[index].d_x3d;
        var d_map_float = parseFloat(d_map);
        var d_x3d_float = parseFloat(d_x3d);
        var delta;
        if (isNaN(d_map_float)){
            d_map_msg = d_map;
        }else{
            d_map_msg = d_map_float.toFixed(1)+" m";
        }
        if (isNaN(d_x3d_float)){
            d_x3d_msg = d_x3d;
        }else{
            d_x3d_msg = d_x3d_float.toFixed(1)+" m";
        }
        if (!isNaN(d_x3d_float)&&!isNaN(d_map_float)){
            delta = (d_map_float-d_x3d_float).toFixed(1);
        }else{
            delta = "-";
        }
        msg += "<table>";
        msg += "<tr title='drag marker over map to update distance'><th align='left'>d<sub>map</sub></th><td align='left' style='text-align:left;'>"+d_map_msg+"</td></tr>";
        msg += "<tr title='drag marker over 3d scene to update distance'><th align='left'>d<sub>3d</sub></th><td align='left' style='text-align:left;'>"+d_x3d_msg+"</td></tr>";
        msg += "<tr><th align='center'>&Delta;</th><td align='left' style='text-align:left;'>"+delta+" m</td></tr>";
        msg += "</table>";
    }
    if (hide||!SETTINGS.markinfo){
        ui_hideMessage("window-markinfo");
    }else{
        ui_showMessage("window-markinfo",msg);
    }
-}
+}
--- a/js/x3l.js
+++ b/js/x3l.js
 /*
- * 
+ *
 * Copyright (C) 2017 Elphel Inc.
 * License: GPLv3
- * 
+ *
 */
 var X3L = function(options){
    var defaults = {
        x: 0,
        y: 0,
        z: 0,
        latitude: 0,
        longitude: 0,
        altitude: 0,
        heading: 0,
        tilt: 90,
        roll: 0,
        fov: 0,
        color: "#1f1",
        size: 2,
    };
    this._data = $.extend(defaults,options);
    this.x = this._data.x;
    this.y = this._data.y;
    this.z = this._data.z;
    this.longitude = this._data.longitude;
    this.latitude = this._data.latitude;
    this.altitude = this._data.altitude;
    this.heading = this._data.heading;
    this.tilt = this._data.tilt;
    this.roll = this._data.roll;
    this.fov = this._data.fov;
    this.color = this._data.color;
    this.size = this._data.size;

--- a/test.html
+++ b/test.html
@@ -3,9 +3,9 @@
  <head>
    <meta charset="utf-8"/>
    <title>Scene+Map</title>
    <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
    <script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
    <script type='text/javascript' src='js/leaflet/L.extra.js'></script>
    <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker-controls.js'></script>
@@ -14,7 +14,7 @@
    <script type='text/javascript' src='js/x3dom_init.js'></script>
    <script type='text/javascript' src='js/x3dom_functions.js'></script>
    <script type='text/javascript' src='js/leaflet_init.js'></script>
    <script type='text/javascript' src='js/x3l.js'></script>
@@ -23,14 +23,14 @@
    <script type='text/javascript' src='js/ui_help.js'></script>
    <script type='text/javascript' src='js/ui_functions.js'></script>
    <script type='text/javascript' src='js/ui_align.js'></script>
    <script type='text/javascript' src='js/util_functions.js'></script>
    <link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
    <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>
    <link rel='stylesheet' type='text/css' href='js/ui.css'></link>
  </head>
  <body>
    <div id='x3d_wrapper'>

--- a/test_nomap.html
+++ b/test_nomap.html
@@ -3,19 +3,19 @@
  <head>
    <meta charset="utf-8"/>
    <title>Scene (NoMap)</title>
    <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
    <script type='text/javascript' src='js/nomap_init.js'></script>
    <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>
    <link rel='stylesheet' type='text/css' href='js/ui.css'></link>
  </head>
  <body>
    <div id='x3d_wrapper'>
-      <x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false" disableDoubleClick="true" keysEnabled="true"> 
+      <x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false" disableDoubleClick="true" keysEnabled="true">
        <scene>
          <navigationInfo id="navInfo" type='"examine" "walk"' speed='0.01'></navigationInfo>
          <Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'></Viewpoint>

--- a/test_nomap_vr.html
+++ b/test_nomap_vr.html
@@ -3,14 +3,14 @@
  <head>
    <meta charset="utf-8"/>
    <title>Scene (NoMap)</title>
    <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
    <script type='text/javascript' src='js/x3dom/x3dom-full.debug.js'></script>
 <!--     <script type='text/javascript' src='js/nomap_vr_init.js'></script> -->
    <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>
    <style type='text/css'>
        body {margin:0; padding:0; background-color:#04344c; background-color:#ddeeff; }
        .stereo-view {float:left; }
@@ -38,28 +38,28 @@
    <div class='stereo-view-1'>
        <!--view-source:http://realism.com/sample/model/stereo/VAM_246-1-1870/model-ig0b75.x3d?=&headlight=true&ipd=30&%20=-->
        <!--view-source:http://realism.com/x3d-examples/HTML5-Fall2014/stereo/kelpie.sgl.html -->
        <script>
            document.writeln ("<x3d id='all_view' showStat='false' showLog='false' disableDoubleClick='true' keysEnabled='true' x='0px' y='0px' width='"+(2*x3dWidth)+"px' height='"+x3dHeight+"px'>");
            var x3dDimStr = x3dWidth + ' ' + x3dHeight + ' 4';
        </script>
        <scene>
            <navigationInfo type='"EXAMINE" "WALK"'></navigationInfo>
-            <background DEF='bgnd' 
+            <background DEF='bgnd'
-                backUrl=  "js/images/background_side.jpeg" 
+                backUrl=  "js/images/background_side.jpeg"
-                bottomUrl="js/images/background_floor.jpeg" 
+                bottomUrl="js/images/background_floor.jpeg"
                frontUrl= "models/1488240695_710844/V0/1488240695_710844-texture-bgnd-ext.jpeg"
-                leftUrl=  "js/images/background_side.jpeg" 
+                leftUrl=  "js/images/background_side.jpeg"
-                rightUrl= "js/images/background_side.jpeg" 
+                rightUrl= "js/images/background_side.jpeg"
                topUrl=   "js/images/background_sky.jpeg">
            </background>
            <transform translation='0 0 0' rotation='0 1 0 0'>
                <viewpoint DEF='viewpoint' id='x3d_viewpoint' position='0 0 0' orientation='0 1 0 0' zNear='0.001' zFar='2000'></viewpoint>
            </transform>
            <group id='unrendered_scene' render='false'>
                <group DEF='scene'>
                    <transform DEF='Viewpoint-Left'  id='x3d_viewpoint'       translation='0 0 0' rotation='0 1 0 0'>
@@ -75,7 +75,7 @@
                    </transform>
                </group>
            </group>
            <group DEF='left' render='true'>
                <shape>
                    <appearance>
@@ -83,15 +83,15 @@
                        <script>
                            document.writeln ("<renderedTexture interpupillaryDistance='0.3' id='rtLeft' stereoMode='LEFT_EYE' update='ALWAYS' dimensions='"+x3dDimStr+"' repeatS='false' repeatT='false'>");
                        </script>
                        <viewpoint USE='viewpoint' containerField='viewpoint'></viewpoint>
                        <background USE='bgnd' containerField='background'></background>
                        <group USE='scene' containerField="scene"></group>
                    </renderedTexture>
                    <composedShader>
                        <field name='tex' type='SFInt32' value='0'></field>
                        <field name='leftEye' type='SFFloat' value='1'></field>
@@ -106,7 +106,7 @@
                            {
                                vec2 pos = sign(position.xy);
                                fragTexCoord = texcoord;
-                                gl_Position = vec4((pos.x/2.0)-0.5, pos.y, 0.0, 1.0); 
+                                gl_Position = vec4((pos.x/2.0)-0.5, pos.y, 0.0, 1.0);
                            }
                        </shaderPart>
                        <!-- The division of pos.x relates to the fraction of the window that is used -->
@@ -136,15 +136,15 @@
                        <script>
                            document.writeln ("<renderedTexture interpupillaryDistance='0.3' id='rtRight' stereoMode='RIGHT_EYE' update='ALWAYS' dimensions='"+x3dDimStr+"' repeatS='false' repeatT='false'>");
                        </script>
                        <viewpoint USE='viewpoint' containerField='viewpoint'></viewpoint>
                        <background USE='bgnd' containerField='background'></background>
                        <group USE='scene' containerField="scene"></group>
                    </renderedTexture>
                    <composedShader>
                        <field name='tex' type='SFInt32' value='0'></field>
                        <field name='leftEye' type='SFFloat' value='0'></field>
@@ -172,7 +172,7 @@
        </scene>
        </x3d>
    </div>
    <script language='JavaScript'>
        // --> Check to see if there are DeviceOrientation events in the DOM
@@ -187,7 +187,7 @@
 		alpha = 360-eventData.alpha;
 		rotate (alpha, 'alpha');
 		rotate (beta,  'beta');
-		rotate (gamma, 'gamma'); 
+		rotate (gamma, 'gamma');
            }, false);
        }else{
            alert ('No Device Motion Sensor');
@@ -197,14 +197,14 @@
            intAngle = Math.floor(angle + 0.5);
            if (intAngle == previousAngles[label]) {return; }
            previousAngles[label] = intAngle;
            if (label == 'alpha') {
 		rotateView ("x3d_viewpoint_"+label, vectors[label]+" "+intAngle*deg2rad);
 //              rotateView ("x3d_viewpointR_"+label, vectors[label]+" "+intAngle*deg2rad);
 //              rotateView ("x3d_viewpointL_"+label, vectors[label]+" "+intAngle*deg2rad);
            }
        }
        function rotateView (label, vector) {
            view = document.getElementById(label);
            view.setAttribute('set_rotation',vector);