moved from private repo

js/.directory

+[Dolphin]
+PreviewsShown=true
+SortRole=date
+Timestamp=2017,5,23,18,34,17
+Version=3
+ViewMode=1

js/LeafletObject.js

+// http://stackoverflow.com/questions/9394190/leaflet-map-api-with-google-satellite-layer
+
+// http://leafletjs.com/examples/extending/extending-1-classes.html
+// - extend or include
+
+var LeafletObject = function(id,data,options){
+
+    var defaults = {
+        debug: true,
+        highlight: true,
+        maxzoom: 21,
+        zoom: 17,
+        fov: 30*Math.PI/180,//deg
+    };
+
+    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}', 
+    {
+      maxZoom: this._settings.maxzoom,
+      attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+    }
+  );
+
+  var googleSat = L.tileLayer(
+    'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+    {
+      maxZoom: this._settings.maxzoom,
+      attribution: 'Thanks to comrade Google for our happy childhood',
+      subdomains:['mt0','mt1','mt2','mt3'],
+    }
+  );
+  
+  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);
+
+  var baseMaps = {
+    "Esri world imagery": Esri_WorldImagery,
+    "Google": googleSat,
+    "Open Street Map": OSMTiles
+  };
+
+  L.control.layers(baseMaps).addTo(this._map);
+ 
+  this.drawCamera();
+    
+}
+
+LeafletObject.prototype.drawCamera = function(){
+    
+    this.marker = L.cameraViewMarker(this.center, {
+        color: '#191',
+        fillColor: '#0f3',
+        fillOpacity: 0.5,
+        radius: 10,
+        heading: this.heading,
+        fov: this.fov,
+        draw_xz: false,
+        h_control: true,
+        id: "basecircle"
+    }).addTo(this._map);
+    
+}
+
+LeafletObject.prototype.highlightMarker = function(index){
+
+    var style = {color:'#f88',fillColor:"#f30"};
+
+    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){
+
+    var style = {color:'#1f1',fillColor:"#0f3"};
+
+    this.marker._measureMarkers[index].setStyle(style);
+    this.marker._measureLines[index].setStyle(style);
+
+}
+
+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){
+
+    this.marker.removeMeasureMarker(index);
+
+}

js/X3DOMObject.js

+
+var X3DOMObject = function(element,data,options){
+
+    var defaults = {
+        debug: true,
+        highlight: true,
+        fov: 30*Math.PI/180,//deg, vertical
+        fov_step: 0.025, //rad
+    };
+
+    this._settings = $.extend(defaults,options);
+    
+    this._FOV = this._settings.fov;
+    this._FOV_STEP = this._settings.fov_step;
+    this._HIGHLIGHT_ON_MOUSEOVER = this._settings.highlight;
+    this._DEBUG = this._settings.debug;
+    
+    this._resizeTimer = false;
+    this._eventCtrlKey = false;
+    
+    //this._X3DOM_SCENE_INIT = this._settings.debug;
+    this._X3DOM_SCENE_INIT = false;
+    
+    //this._element = element;
+    this.element = element;
+     
+    this.highlighted_marker_index = null;
+    
+    this.old_view_translation = null;
+    //this.lastMouseX;
+    //this.lastMouseY;
+    this.data = data;
+
+    this.initialize();
+    
+};
+
+X3DOMObject.prototype.initialize = function(){
+    
+    var self = this;
+
+    self.resize();
+
+    //bind resize
+    $(window).resize(function(){
+        clearTimeout(self.resizeTimer);
+        self.resizeTimer = window.setTimeout(function(){
+            self.resize();
+        },100);
+    });
+
+    //self.getX3DOMlibrary();
+
+}
+
+X3DOMObject.prototype.resize = function(){
+    
+    var self = this;
+
+    var w = $(window).width();
+    var h = $(window).height();
+
+    $(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"
+    });
+
+    $("#crosshair_v").css({
+        left: (w/2)+"px",
+        top: (h/2-$("#crosshair_v").height()/2)+"px"
+    });
+    
+    var fov = w/h*self._FOV;
+    
+    //fov = Math.PI/2;
+    
+    // apply to all viewpoints, but:
+    // https://doc.x3dom.org/author/Navigation/Viewpoint.html
+    // = correct field of view is not guaranteed in X3DOM
+    $(self.element).find("Viewpoint").each(function(){
+        $(this).attr("fieldOfView",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(){
+            self.deepInit();
+        };
+    });
+}
+*/
+
+// so one doesn't have to click to enable keydown/keyup
+X3DOMObject.prototype.focusOnCanvas = function(){
+    
+    this.element.getElementsByTagName("canvas")[0].focus();
+    
+}
+
+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)?self._FOV_STEP:-self._FOV_STEP;
+        self.changeFoV(e,delta);
+    },true);
+    
+    //Firefox?!
+    self.element.addEventListener('DOMMouseScroll',function(e){  
+        var delta = (e.detail>0)?self._FOV_STEP:-self._FOV_STEP;
+        self.changeFoV(e,delta);
+    },true);
+    
+    
+}
+
+
+X3DOMObject.prototype.changeFoV = function(e,val){
+
+    var fov = this.getFoV()+val;
+    this.setFoV(fov);
+    Map.marker.setFoV(fov);
+
+    e.preventDefault();
+    e.stopPropagation();
+    return false;
+    
+}
+
+X3DOMObject.prototype.setFoV = function(val){
+  
+    var vp = $(this.element).find("Viewpoint")[0];
+    $(vp).prop("fieldOfView",val);
+  
+}
+
+X3DOMObject.prototype.getFoV = function(){
+  
+    var vp = $(this.element).find("Viewpoint")[0];
+    return parseFloat($(vp).prop("fieldOfView"));
+    
+}
+
+X3DOMObject.prototype.KeyEvents = function(){
+    
+    var self = this;
+    //Chrome?!
+    self.element.addEventListener('mousemove',function(e){
+        if (e.ctrlKey){
+            self._ctrlKey = true;
+        }else{
+            self._ctrlKey = false;
+        }
+        if (e.shiftKey){
+            self._shiftKey = true;
+        }else{
+            self._shiftKey = false;
+        }        
+    },true);
+
+}
+/*
+X3DOMObject.prototype.mouseMove = function(e){
+
+    //offsetX / offsetY polyfill for FF
+    var target = e.target || e.srcElement;
+    var rect = target.getBoundingClientRect();
+
+    e.offsetX = e.clientX - rect.left;
+    e.offsetY = e.clientY - rect.top;
+
+    if (this.lastMouseX === -1){
+        this.lastMouseX = e.offsetX;
+    }
+    if (this.lastMouseY === -1){
+        this.lastMouseY = e.offsetY;
+    }
+
+    if (this.draggedTransformNode){
+        this.dragMarker(e.offsetX - this.lastMouseX, e.offsetY - this.lastMouseY);
+    }
+
+    this.lastMouseX = e.offsetX;
+    this.lastMouseY = e.offsetY;
+    
+}
+
+
+
+X3DOMObject.prototype.dragMarker = function(dx,dy){
+    
+    var offsetUp    = draggingUpVec.multiply(-dy);
+    var offsetRight = draggingRightVec.multiply(dx);
+
+    this.unsnappedDragPos = this.unsnappedDragPos.add(offsetUp).add(offsetRight);
+
+    $(this.draggedTransformNode).attr("translation", this.unsnappedDragPos.toString());
+    
+    //use callback?
+    
+}
+*//*
+X3DOMObject.prototype.stopDraggingMarker = function(e){
+    
+    this.removeEventListener('mousemove',this.mouseMove,true);
+    this.removeEventListener('mouseup',this.mouseup,true);
+    
+    draggedTransformNode = null;
+    draggingUpVec        = null;
+    draggingRightVec     = null;
+    unsnappedDragPos     = null;
+    
+    document.getElementById("navInfo").setAttribute("type",'"examine"');
+    
+}
+*/
+
+X3DOMObject.prototype.initInfoWindow = function(){
+
+    //...
+    
+    /* 
+    // position - folowing mouse without delay? aha
+    $(this.element).find("canvas").on('mousemove',function(e){
+        $("#window-info").css({
+            top: (e.originalEvent.clientY+20)+"px",
+            left: (e.originalEvent.clientX+20)+"px"
+        });
+    });
+    
+    $("#window-info").on('mouseover',function(){
+        $(this).hide();
+    });
+    */
+    
+}
+
+X3DOMObject.prototype.initViewInfoWindow = function(){
+    
+    /*
+    var el = $("<div>",{id:"messagewindow"}).css({
+        position:"absolute",
+        bottom:"2px",
+        left:"2px",
+        "z-index":10,
+        background:"red",
+        border:"1px solid red",
+        "border-radius": "2px",
+        color:"white",
+        padding:"0px"
+    });
+    $("body").append(el);
+    */
+
+}
+
+X3DOMObject.prototype.showMessage = function(id,msg,bg){
+
+    if (bg != undefined){
+        $("#"+id).css({background:bg});
+    }
+    
+    $("#"+id).show();
+    
+    $("#"+id).html($("<div>").html(msg).css({
+        padding:"5px 10px"
+    })).show();
+
+}
+
+X3DOMObject.prototype.hideMessage = function(id){
+
+    $("#"+id).hide();
+
+}
+
+
+X3DOMObject.prototype.registerShapesEvents = function(){
+    
+    var self = this;
+
+    var tmp = new X3DOMObject.PointerMarker();
+    
+    var inlines = $(self.element).find("inline");
+    
+    inlines.each(function(){
+
+        if ($(this).attr("name")!="back"){
+
+            var shapes = $(this).find("Shape");
+
+            shapes.each(function(){
+            
+                /*
+                this.addEventListener('click',function(e){
+                    
+                    console.log("click1");
+                    //console.log(e.worldX+" "+e.worldY+" "+e.worldZ);
+                    //createSphere(e.worldX,e.worldY,e.worldZ);
+                    
+                });
+                */
+            
+                $(this).on("mousemove",function(e){
+                    
+                    var x = e.originalEvent.worldX;
+                    var y = e.originalEvent.worldY;
+                    var z = e.originalEvent.worldZ;
+
+                    if (self._ctrlKey||SETTINGS.pointer){
+                        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);
+                    }
+
+                    
+                    /*
+                    var v = new x3dom.fields.SFVec3f(x,y,z);
+                    
+                    //for printing
+                    var x = v.x.toFixed(2);
+                    var y = v.y.toFixed(2);
+                    var z = v.z.toFixed(2);
+                    var l = (v.length()).toFixed(1);
+                    
+                    var msg = "<div>x="+x+"</div>"+
+                                "<div>y="+y+"</div>"+
+                                "<div>z="+z+"</div>"+
+                                "<div>d="+l+"</div>";
+                    
+                    msg = "<div>"+l+" m</div>";
+                                
+                    //self.showMessage("infowindow",msg);
+                    */
+
+                });
+                
+                
+                $(this).on("click",function(e){
+
+                    console.log(e);
+                    
+                    /*
+                    // when ctrlKey then the mouse is always over pointer marker
+                    if (self._ctrlKey){
+                        self.placeMarker(e.originalEvent.worldX,e.originalEvent.worldY,e.originalEvent.worldZ);
+                    }
+                    */
+                    
+                    if ((self._shiftKey)||(SETTINGS.highlight)){
+                        self.toggleShape(this);
+                    }
+                    
+                });
+                
+                $(this).on("mouseover",function(e){
+                
+                    /*
+                    var tmp = $(self).attr("id");
+              
+                    if (tmp == undefined){
+                        tmp = "missing <b>id</b> attribute";
+                    }
+
+                    x3dom.debug.logInfo(tmp);
+                    self.showMessage("shapetitle",tmp);
+                    */
+                
+                    // e.ctrlKey will not work because X3DOM does something to events
+                    if (self._shiftKey){
+            
+                        if (self._HIGHLIGHT_ON_MOUSEOVER){
+                            self.highlightShape(this);
+                        }
+
+                    }
+            
+                });
+            
+                $(this).on("mouseout",function(e){
+
+                    self.dehighlightShape(this);
+                    //self.placeMarker(0,0,0,"sliding_sphere");
+                    //self.hideMessage("shapetitle");
+                    //self.resetInfoWindow();
+
+                });
+                
+                // not working
+                /*
+                $(this).on("keydown",function(e){
+                    console.log("KeyDown");
+                    self.highlightShape(self);
+                });
+                */
+                // not working
+                /*
+                this.addEventListener('keydown',function(e){
+                    console.log("should not work!");
+                });
+                */
+                // not working
+                /*
+                $(this).on("keyup",function(e){
+                    console.log("keyup");
+                    self.highlightShape(self);
+                });
+                */
+            
+            });
+        
+        }
+
+    });
+    
+}
+
+X3DOMObject.prototype.highlightShape = function(elem){
+    
+    var m = $(elem).find("Material[class='hl']");
+    
+    if (m.length==0){
+        m = $("<Material>",{class:'hl'});
+        //m.attr("ambientintensity","1");
+        //m.attr("shininess","0.2");
+        m.attr("emissiveColor","0.1 0.3 0.1");
+        $(elem).find("Appearance").append(m);
+    }
+
+}
+
+X3DOMObject.prototype.dehighlightShape = function(elem){
+    
+    var self = this;
+    
+    $(elem).find("Appearance").find("Material[class='hl']").remove();
+    
+    m = $(elem).find("Material[class='sl']");
+    if (m.length==1){
+        self.selectShape(elem);
+    }
+  
+}
+
+X3DOMObject.prototype.toggleShape = function(elem){
+
+    var self = this;
+    
+    var m = $(elem).find("Material[class='sl']");
+        
+    if (m.length!=0){
+        self.deselectShape(elem);
+    }else{
+        self.selectShape(elem);
+    }
+  
+}
+
+X3DOMObject.prototype.selectShape = function(elem){
+    
+  var self = this;
+    
+  self.deselectShape(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.prototype.deselectShape = function(elem){
+
+  var tmpapp = $(elem).find("Appearance").find("Material[class='sl']").remove();
+
+}
+
+X3DOMObject.prototype.createMarker = function(x,y,z,id){
+
+    var self = this;
+    
+    sph_class = "";
+    
+    var index = null;
+    
+    if ((id=="")||(id==undefined)){
+        sph_class = "my-markers";
+        index = $("."+sph_class).length;
+        id = "my-sph-"+index;
+    }
+
+    var html = `
+    <group id='`+id+`' class='`+sph_class+`'>
+    <switch whichChoice='0'>
+    <transform translation='`+x+` `+y+` `+z+`' rotation='0 0 0 0'>
+        <shape class='shapemarker'> 
+        <appearance> 
+            <material diffuseColor='0.07 1 0.07' transparency='0.0'></material> 
+        </appearance> 
+        <Sphere DEF="sphere" radius="1" />
+        </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);
+
+    });
+    // sphere events
+    // Drag, select, delete
+    // Data.push()
+    
+}
+
+X3DOMObject.prototype.placeMarker = function(x,y,z,id){
+
+    var tr = $("#"+id).find("transform");  
+    $(tr).attr("translation",x+" "+y+" "+z);
+
+}
+
+X3DOMObject.prototype.highlightMarker = function(index){
+    
+    var color = "1 0.5 0.5";
+    
+    $("#my-sph-"+index).find('material').attr("diffuseColor",color);
+    
+}
+
+X3DOMObject.prototype.dehighlightMarker = function(index){
+
+    var elem = $("#my-sph-"+index).find('material');
+    var color = "0.07 1 0.07";
+
+    if (!elem.prop("selected")){
+        elem.attr("diffuseColor",color);
+    }
+
+}
+
+X3DOMObject.prototype.toggleMarker = function(index){
+
+    var elem = $("#my-sph-"+index).find('material');
+    var color = elem.attr("diffuseColor");
+
+    if (elem.prop("selected")){
+        elem.prop("selected",false);
+    }else{
+        elem.prop("selected",true);
+    }
+
+}
+
+X3DOMObject.prototype.getViewDirection = function(){
+    
+    var elem = this.element;
+    
+    var vp_mat = elem.runtime.viewMatrix();
+    
+    var vMatInv  = vp_mat.inverse();
+    var viewDir  = vMatInv.multMatrixVec(new x3dom.fields.SFVec3f(0.0, 0.0, -1.0));
+    
+    var angle = Math.atan2(viewDir.x,-viewDir.z)*180/Math.PI;
+    
+    return angle;
+    
+}
+
+X3DOMObject.prototype.getViewTranslation = function(){
+
+    var elem = this.element;
+
+    var vp_mat = elem.runtime.viewMatrix().inverse();
+    //var vp_rotation = new x3dom.fields.Quaternion(0, 0, 1, 0);
+
+    //vp_rotation.setValue(vp_mat);
+
+    var vp_translation = vp_mat.e3();
+
+    return vp_translation;
+
+}
+
+// Marker
+X3DOMObject.Marker = function(x,y,z){
+    
+    this._x = x || 0;
+    this._y = y || 0;
+    this._z = z || 0;
+    
+    this.init();
+    
+}
+
+X3DOMObject.Marker.prototype.init = function(){
+    
+    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){
+        
+        //self.dehighlight();
+        //X3DOMObject.PointerMarker.dehighlight(self._elem);
+        
+        if (Scene._ctrlKey){
+
+            if (id_prefix==PREFIX){
+
+                self._elem.remove();
+                
+                // REMOVE
+                Data.markers.splice(index);
+                Scene.updateMarkersIndices();
+                
+                Map.deleteMarker(index);
+                
+            }
+
+        }else{
+
+            X3DOMObject.Marker.toggle(self._elem);
+            Map.toggleMarker(index);
+
+        }
+        
+    });
+    
+    marker.on('mouseover',function(e){
+        
+        X3DOMObject.Marker.highlight(self._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){
+        
+        //self.highlightMarker(index);
+        Scene.highlighted_marker_index = null;
+
+        if (Scene.draggedTransformNode==null){
+            
+            if (!self._elem.prop("selected")){
+                X3DOMObject.Marker.dehighlight(self._elem);
+                Map.dehighlightMarker(index);
+            }else{
+                X3DOMObject.Marker.highlight(self._elem);
+                Map.highlightMarker(index);
+            }
+
+        }
+        
+    });
+    
+    marker.on('mousedown',function(e){
+
+        X3DOMObject.Marker.dehighlight(self._elem);
+        Map.dehighlightMarker(index);
+        
+        document.getElementById("navInfo").setAttribute("type", '"NONE"');
+        
+        Scene.lastMouseX = event.offsetX;
+        Scene.lastMouseY = event.offsetY;
+        
+        X3DOMObject.Marker.dragStart(this);
+
+        //$(this).on('mousemove',x3d_markerDrag);
+        /*
+        $(Scene.element).on('mousemove',function(){
+            console.log("preMouseMove");
+            x3d_sceneMouseMove2();
+        },true);
+        */
+
+        Scene.element.addEventListener('mousemove',X3DOMObject.Marker.mouseMove,true);
+        Scene.element.addEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);
+                
+    });
+    
+    marker.on('mouseup',function(e){
+
+        X3DOMObject.Marker.highlight(self._elem);
+        Map.highlightMarker(index);
+
+    });
+    
+}
+
+X3DOMObject.Marker.mouseUp = function(){
+
+    var elem = Scene.draggedTransformNode.parent().parent();
+
+    // click is already bound
+    /*
+    if (!Scene.markerdragged){
+        X3DOMObject.Marker.toggle(elem);
+    }
+    */
+    
+    Scene.element.removeEventListener('mousemove',X3DOMObject.Marker.mouseMove,true);
+    Scene.element.removeEventListener('mouseup',X3DOMObject.Marker.mouseUp,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
+X3DOMObject.Marker.dragStart = function(elem){
+
+    // move up from <shape> to <transform>
+    var transformNode = $(elem).parent();
+    var tr0 = $(transformNode).attr("translation");
+
+    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));
+
+    //use the viewer's up-vector and right-vector
+    Scene.draggingUpVec    = vMatInv.multMatrixVec(new x3dom.fields.SFVec3f(0.0, 1.0,  0.0));
+    Scene.draggingRightVec = viewDir.cross(Scene.draggingUpVec);
+
+    var p1 = Scene.element.runtime.calcCanvasPos(Scene.unsnappedDragPos.x, Scene.unsnappedDragPos.y, Scene.unsnappedDragPos.z);
+    var p2 = Scene.element.runtime.calcCanvasPos(Scene.unsnappedDragPos.x + Scene.draggingRightVec.x,
+                                         Scene.unsnappedDragPos.y + Scene.draggingRightVec.y,
+                                         Scene.unsnappedDragPos.z + Scene.draggingRightVec.z);
+
+    var magnificationFactor = 1.0 / Math.abs(p1[0] - p2[0]);
+
+    //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();
+
+    event.offsetX = event.clientX - rect.left;
+    event.offsetY = event.clientY - rect.top;
+
+    if (Scene.lastMouseX === -1){
+        Scene.lastMouseX = event.offsetX;
+    }
+    if (Scene.lastMouseY === -1){
+        Scene.lastMouseY = event.offsetY;
+    }
+
+    if (Scene.draggedTransformNode){
+        X3DOMObject.Marker.drag(event.offsetX - Scene.lastMouseX, event.offsetY - Scene.lastMouseY);
+    }
+
+    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);
+
+    Scene.unsnappedDragPos = Scene.unsnappedDragPos.add(offsetUp).add(offsetRight);
+
+    $(Scene.draggedTransformNode).attr("translation", Scene.unsnappedDragPos.toString());
+
+    var sphere = $(Scene.draggedTransformNode).parent().parent();
+    var index = parseInt(sphere.attr("id").substr(7));
+
+    var c = Data.markers[index];
+    
+    c.x = Scene.unsnappedDragPos.x;
+    c.y = Scene.unsnappedDragPos.y;
+    c.z = Scene.unsnappedDragPos.z;
+    
+    var azimuth = Math.atan2(c.x,-c.z)*180/Math.PI;
+    //var initial_heading = Data.camera.heading;
+    var distance = Math.sqrt(c.x*c.x+c.z*c.z);
+    
+    var p1_ll = Map.marker._latlng;
+    var p2_ll = p1_ll.CoordinatesOf(azimuth+INIT_HEADING,distance);
+    
+    c.latitude = p2_ll.lat;
+    c.longitude = p2_ll.lng;
+    c.altitude = c.y;
+    
+    Map.marker.moveMeasureMarker(p2_ll,index);
+    
+}
+
+X3DOMObject.Marker.place = function(x,y,z,id){
+
+    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); 
+    
+}
+
+X3DOMObject.Marker.dehighlight = function(elem){
+    
+    var color = "0.07 1 0.07";
+    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(){
+
+    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,
+            y: parseFloat(xyz[1]) || 0,
+            z: parseFloat(xyz[2]) || 0
+        });
+        Data.markers.push(mark);
+
+        // Create marker on the scene
+        new X3DOMObject.Marker(mark.x,mark.y,mark.z);
+
+        // Create marker on the map
+        var azimuth = Math.atan2(mark.x,-mark.z)*180/Math.PI;
+        var distance = Math.sqrt(mark.x*mark.x+mark.z*mark.z);
+
+        Camera.createMeasureMarker(azimuth+INIT_HEADING,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);
+
+    });
+    
+}
+
+X3DOMObject.MapMarker = {};
+
+X3DOMObject.MapMarker.registerEvents = function(map_mark){
+    
+        var Camera = Map.marker;
+    
+        map_mark.on('mouseover',function(){
+            
+            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 (!this._selected){
+                    X3DOMObject.Marker.dehighlight(elem);
+                    Map.dehighlightMarker(index);
+                }
+            }
+
+        });
+        
+        /*
+        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);
+            
+            }
+            
+        });
+    
+}
+
+X3DOMObject.displayInfo = function(e){
+    
+        var elem = Scene.element;
+
+        var mouse = x3dom_getXYPosOr(e.clientX,e.clientY,true);
+        
+        var dist = 1000;
+        
+        $("#window-info").css({"font-size":"20px"});
+        
+        if (mouse.d_xz != null){
+
+            var dist_msg = "";
+            var id_msg = "";
+            
+            if (SETTINGS.moreinfo){
+                
+                $("#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><table>";
+                dist_msg += "<tr><th align='center'>d<sub>xz</sub></td><td>"+mouse.d_xz+" m</td></tr>";
+                dist_msg += "<tr><th align='center'>d<sub>xyz</sub></td><td>"+mouse.d_xyz+" m</td></tr>";
+                dist_msg += "</table>";
+                
+            }else{
+
+                dist_msg = mouse.d_xz+" m";
+
+            }
+
+            dist = parseFloat(mouse.d_xz);
+
+        }else{
+
+            dist_msg = "&infin; m";
+
+        }
+
+        var msg = "<div>"+dist_msg+"</div>";
+
+        Scene.showMessage("window-info",msg);
+
+        return dist;
+
+}
+
+X3DOMObject.displayViewInfo = function(e){
+    
+    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";
+    
+    var camera = x3dom_getCameraPosOr(true);
+    
+    // ?!!!
+    //Map.marker.setAltitude(camera.y);
+    //Map.marker.setElevation(camera.e*Math.PI/180);
+    
+    var msg = `
+<table>
+<tr>
+    <td></td>
+    <td colspan='3' align='center'>position, m</td>
+    <td colspan='3' align='center'>orientation, &deg;</td>
+</tr>
+<tr>
+    <th></th>
+    <th style='width:50px;'>x</th>
+    <th style='width:50px;'>y</th>
+    <th style='width:50px;'>z</th>
+    <th>azimuth</th>
+    <th>elevation</th>
+    <th>skew</th>
+</tr>
+<tr>
+    <td>mouse</td>
+    <td>`+mouse.x+`</td>
+    <td>`+mouse.y+`</td>
+    <td>`+mouse.z+`</td>
+    <td>`+mouse.a+`</td>
+    <td>`+mouse.e+`</td>
+    <td>`+mouse.s+`</td>
+</tr>
+<tr>
+    <td>camera</td>
+    <td>`+camera.x+`</td>
+    <td>`+camera.y+`</td>
+    <td>`+camera.z+`</td>
+    <td>`+camera.a+`</td>
+    <td>`+camera.e+`</td>
+    <td>`+camera.s+`</td>
+</tr>
+</table>
+`;
+    
+    if (SETTINGS.viewinfo){
+        Scene.showMessage("window-viewinfo",msg);
+    }else{
+        Scene.hideMessage("window-viewinfo");
+    }
+}
+
+// various calcs
+
+function x3dom_getXYPosOr(cnvx,cnvy,round){
+    
+    var elem = Scene.element;
+
+    var x,y,z;
+    var az,el,sk;
+    var id;
+
+    var dist_xyz = 1000;
+    var dist_xz = 1000;
+
+    var shootRay = elem.runtime.shootRay(cnvx,cnvy);
+    
+    if (shootRay.pickPosition != null){
+        
+        var index = Scene.highlighted_marker_index;    
+        
+        if ((index==null)||(Data.markers[index]==undefined)){
+        
+            x = shootRay.pickPosition.x;
+            y = shootRay.pickPosition.y;
+            z = shootRay.pickPosition.z;
+            
+        }else{
+            
+            x = Data.markers[index].x;
+            y = Data.markers[index].y;
+            z = Data.markers[index].z;
+            
+        }
+        
+        dist_xz  = Math.sqrt(x*x+z*z);
+        dist_xyz = Math.sqrt(y*y+dist_xz*dist_xz);
+        
+        if (round){
+            dist_xz.toFixed(2);
+            dist_xyz.toFixed(2);
+        }
+        
+        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;
+    }
+    
+    az = Math.atan2(x,-z)*180/Math.PI;
+    az = (az+INIT_HEADING+360)%360;
+    el = Math.atan2(y,Math.sqrt(x*x+z*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);
+    }else{
+        result.d_xz = dist_xz;
+        result.d_xyz = dist_xyz;
+    }
+    
+    result.id = id;
+    
+    return result;
+
+}
+
+function x3dom_getCameraPosOr(round){
+    
+    var elem = Scene.element;
+    
+    var vm = elem.runtime.viewMatrix().inverse();
+    
+    var tr = vm.e3();
+    
+    var x = tr.x;
+    var y = tr.y;
+    var z = tr.z;
+    
+    var R = vm;
+    
+    var az = Math.atan2(R._02,R._22)*180/Math.PI;
+    
+    az = (az+INIT_HEADING+360)%360;
+    
+    var el = -Math.asin(R._12)*180/Math.PI;
+
+    var sk = Math.atan2(R._10,R._11);
+    
+    if (!round){
+        return {
+            x: x,
+            y: y,
+            z: z,
+            a: az,
+            e: el,
+            s: sk
+        };
+    }else{
+        return {
+            x: x.toFixed(2),
+            y: y.toFixed(2),
+            z: z.toFixed(2),
+            a: az.toFixed(1),
+            e: el.toFixed(1),
+            s: sk.toFixed(1)
+        };        
+    }
+    
+}
+
+function x3dom_setUpRight(){
+
+    var mat = Scene.element.runtime.viewMatrix().inverse();
+    
+    var from = mat.e3();
+    var at = from.subtract(mat.e2());
+
+    var up = new x3dom.fields.SFVec3f(0, 1, 0);
+    
+    var s = mat.e2().cross(up).normalize();
+    
+    var newup = mat.e2().cross(s).normalize().negate();
+    
+    //at = from.add(v);
+    
+    mat = x3dom.fields.SFMatrix4f.lookAt(from, at, newup);
+    //mat = mat.inverse();
+    
+    //var m1  = x3dom.fields.SFMatrix4f.translation(from);
+    //var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
+    
+    //mat = m1.mult(mat).mult(m1n);
+    
+    var Q = new x3dom.fields.Quaternion(0,0,1,0);
+    Q.setValue(mat);
+    var AA = Q.toAxisAngle();
+
+    var viewpoint = $(Scene.element).find("Viewpoint");
+    viewpoint.attr("position",mat.e3().toString());
+    viewpoint.attr("centerOfRotation",mat.e3().toString());
+    viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
+
+}
+
+function x3dom_rotation(delta_a){
+    
+    /* 
+     * Printing values:
+     * 
+     *   var mat = Scene.element.runtime.viewMatrix().inverse();
+     *   var rotation = new x3dom.fields.Quaternion(0, 0, 1, 0);
+     *   rotation.setValue(mat);
+     *   var translation = mat.e3();
+     * 
+     */
+    
+    var mat = Scene.element.runtime.viewMatrix();
+
+    mat = mat.inverse();
+    //console.log(mat.toString());
+
+    var from = mat.e3();
+    var at = from.subtract(mat.e2());
+    var up = mat.e1();
+    
+    var q0 = x3dom.fields.Quaternion.axisAngle(up, -delta_a);
+    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);
+        
+    var Q = new x3dom.fields.Quaternion(0,0,1,0);
+    //Q.setValue(newmat.inverse());
+    Q.setValue(newmat);
+    var AA = Q.toAxisAngle();
+    
+    var viewpoint = $(Scene.element).find("Viewpoint");
+    viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
+    viewpoint.attr("position",from.toString());
+    viewpoint.attr("centerOfRotation",from.toString());
+    
+}
+
+// horizontal?
+function x3dom_translation(dx,dy,dz){
+    
+    var mat = Scene.element.runtime.viewMatrix().inverse();
+    var tr = mat.e3();
+
+    var x = tr.x+dx;
+    var y = tr.y+dy;
+    var z = tr.z+dz;
+
+    var viewpoint = $(Scene.element).find("Viewpoint");
+    viewpoint.attr("position",x+" "+y+" "+z);
+    viewpoint.attr("centerOfRotation",x+" "+y+" "+z);
+
+}
+
+function x3dom_altelev(alt,elev){
+
+    //x3dom_matrix_test();
+
+    var mat = Scene.element.runtime.viewMatrix().inverse();
+
+    var from = mat.e3();
+    from.y = alt;
+
+    var az = Math.atan2(mat._02,mat._22);
+    var el = elev;
+    var sk = Math.atan2(mat._10,mat._11);
+
+    var matx = x3dom.fields.SFMatrix4f.rotationX(el);
+    var maty = x3dom.fields.SFMatrix4f.rotationY(az);
+    var matz = x3dom.fields.SFMatrix4f.rotationZ(sk);
+    var matt  = x3dom.fields.SFMatrix4f.translation(from);
+
+    var newmat = matt.mult(maty).mult(matx).mult(matz);
+
+    var Q = new x3dom.fields.Quaternion(0,0,1,0);
+    Q.setValue(newmat);
+    var AA = Q.toAxisAngle();
+
+    var viewpoint = $(Scene.element).find("Viewpoint");
+    viewpoint.attr("position",newmat.e3().toString());
+    viewpoint.attr("centerOfRotation",newmat.e3().toString());
+    viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
+    
+}
+
+function x3dom_matrix_test(){
+    
+    var viewpoint = $(Scene.element).find("Viewpoint");
+    
+    console.log("Viewpoint DOM element");
+    console.log("position: "+viewpoint.attr("position"));
+    console.log("orientation: "+viewpoint.attr("orientation"));
+    
+    var mat = Scene.element.runtime.viewMatrix().inverse();
+    
+    console.log("inversed viewMatrix");
+    console.log(mat.toString());    
+    
+    var from = mat.e3();
+    var at = from.subtract(mat.e2());
+    var up = mat.e1();
+    
+    console.log("matrix from from-at-up");
+    
+    var newmat = x3dom.fields.SFMatrix4f.lookAt(from, at, up);
+    
+    console.log(newmat.toString());
+    
+    var R = mat;
+    var az = Math.atan2(R._02,R._22)*180/Math.PI;
+    //az = (az+INIT_HEADING+360)%360;
+    //az = (az+360)%360;
+    var el = -Math.asin(R._12)*180/Math.PI;
+    var sk = Math.atan2(R._10,R._11);
+    
+    console.log("Angles:");
+    console.log("az="+az+" el="+el+" sk="+sk);
+    
+    
+    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());
+    
+}
+
+
+

js/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){
+                selected_markers.push(c);
+            }
+        }
+    });
+    
+    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");
+    
+}

js/help.js

+
+function help_init(){
+    
+    /*
+    var help_content = `
+<div>
+<table>
+<tr>
+    <td>asdfasdfadfasdfasdfasfHelp!</td>
+</tr>
+</table>
+</div>
+`;
+
+    var help = $("<div>",{id:"help-content"}).css({
+        display:"none"
+    }).html(help_content);
+    */
+    
+    var help = $("#help-content");
+    
+    help.hide();
+    
+    $("#help_button").on("click",function(){
+        help.show();
+    });
+
+    help.on('click',function(){
+        help.hide();
+    });
+    
+}
\ No newline at end of file

js/images/.directory

+[Dolphin]
+PreviewsShown=true
+SortRole=date
+Timestamp=2017,5,30,10,40,30
+Version=3
+ViewMode=1

js/index.js

+
+var Data = {
+    camera:{},
+    markers:[],
+};
+
+var Scene;
+var Map;
+
+var INIT_HEADING = 0;
+
+var SETTINGS = {
+    'pointer':   false,
+    'highlight': false,
+    'viewinfo':  false,
+    'moreinfo':  false,
+    'crosshair': false,
+    'shiftspeed': 0.01
+}
+
+$(function(){
+
+    parseURL();
+
+    title_init();
+    help_init();
+    menu_init();
+    
+    light_init();
+    
+});
+
+function title_init(){
+
+    var html = $("<div>").html("Demo");
+
+    html.css({
+        position:"absolute",
+        top: "10px",
+        left: "50%",
+        color:"white",
+        "font-size":"40px",
+        "font-weight":"bold",
+        "font-family": '"Helvetica Neue", Helvetica, Arial, sans-serif',
+        "user-select": "none"
+    });
+    
+    $("body").append(html);
+
+}
+
+function light_init(){
+  
+    $.ajax({
+        url: "kml/test.kml",
+        success: function(response){
+
+            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,
+                z: 0,
+                latitude: latitude || 0,
+                longitude: longitude || 0,
+                altitude: altitude || 0,
+                heading: heading || 0,
+                tilt: tilt || 0,
+                roll: roll || 0,
+                fov: fov || 0,
+            });
+            
+            INIT_HEADING = heading;
+            
+            var element = document.getElementById('x3d_id');
+            Scene = new X3DOMObject(element,Data,{});
+            
+            $.getScript("js/x3dom-full.debug.js",function(){
+
+                Map = new LeafletObject('leaflet_map',Data,{});
+                //wait until it parsed the DOM
+                x3dom.runtime.ready = function(){
+                    map_resize_init();
+                    deep_init();
+                    align_init();
+                    //x3d_initial_camera_placement();
+                };
+            });
+            
+        },
+    });
+
+}
+
+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;
+
+    var xw = $(window).width();
+    var yw = $(window).height();
+
+    var xb = parseInt($("#map_wrapper").css("right"));
+    var yb = parseInt($("#map_wrapper").css("bottom"));
+
+    var w = xw - xm - xb;
+    var h = yw - ym - yb;
+
+    $("#map_wrapper").width(w);
+    $("#map_wrapper").height(h);
+
+    $("#leaflet_map").width(w);
+    $("#leaflet_map").height(h);
+
+    // from some forum, stackoverflow?
+    setTimeout(function(){Map._map.invalidateSize();}, 100);
+    
+}
+
+function deep_init(){
+
+    Scene.FoVEvents();
+    Scene.KeyEvents();
+
+    Scene.element.runtime.enterFrame = function(){
+
+        // the only <strong> in the document
+        var progress_element = $(Scene.element).find("strong");
+        var progress_counter = $(progress_element).html();
+        progress_counter = progress_counter.split(" ");
+        cnt = parseInt(progress_counter[1]);
+
+        if (!Scene._X3DOM_SCENE_INIT&&(cnt==0)){
+
+            //if(Scene._DEBUG){
+                Scene.initInfoWindow();
+                Scene.initViewInfoWindow();
+                Scene.registerShapesEvents();
+            //}
+
+            Scene._X3DOM_SCENE_INIT = true;
+
+            x3d_events();
+            leaf_events();
+        }
+    };
+    
+}
+
+// inactive
+function x3d_initial_camera_placement(){
+    
+    // Roll compensation
+    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.
+
+    // Roll
+    var z = new x3dom.fields.SFVec3f(0,0,1);
+    var qr = x3dom.fields.Quaternion.axisAngle(z,-roll);
+    var M_roll = qr.toMatrix();
+
+    // Tilt
+    var x = new x3dom.fields.SFVec3f(1,0,0);
+    var qt = x3dom.fields.Quaternion.axisAngle(x,-tilt);
+    var M_tilt = qt.toMatrix();
+
+    // Heading
+    var y = new x3dom.fields.SFVec3f(0,1,0);
+    var qh = x3dom.fields.Quaternion.axisAngle(y,-heading);
+    var M_heading = qh.toMatrix();
+
+    var M = M_heading.mult(M_tilt).mult(M_roll);
+    
+    // store matrices
+    Data.camera.Matrices = {
+        Head: M_heading,
+        Tilt: M_tilt,
+        Roll: M_roll,
+        R: M
+    };
+    
+    // set view
+    var Q = new x3dom.fields.Quaternion(0, 0, 1, 0);
+    Q.setValue(M.inverse());
+    var AA = Q.toAxisAngle();
+    
+    var viewpoint = $(Scene.element).find("Viewpoint");
+    viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
+    
+}
+
+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")){
+                Scene.highlightShape(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);
+            Scene.dehighlightShape(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);
+    });
+
+    elem.addEventListener('mouseup',function(){
+        elem.removeEventListener('mousemove',x3d_mouseMove,true);
+    });
+
+    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);
+            Scene.highlightShape(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{
+
+            // hide shadow marker
+            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();
+        Scene.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){
+
+            var Lm = Camera._measureMarkers[Data.markers.length];
+
+            if (Lm!=undefined){
+            
+                var mark = new X3L({
+                    latitude: Lm._latlng.lat,
+                    longitude: Lm._latlng.lng
+                });
+                
+                var p1_ll = Camera._latlng;
+                var p2_ll = Lm._latlng;
+
+                //var azimuth = getAzimuth(p1_ll,p2_ll);
+                var azimuth = getAzimuth(p1_ll,p2_ll);
+                
+                var initial_heading = INIT_HEADING;
+                
+                var angle = azimuth - initial_heading;
+                var distance = p1_ll.distanceTo(p2_ll);
+                
+                //console.log("angle from lat lng: "+angle);
+                
+                mark.x = distance*Math.sin(Math.PI/180*angle);
+                mark.y = 0;
+                mark.z = -distance*Math.cos(Math.PI/180*angle);
+                
+                Data.markers.push(mark);
+                
+                new X3DOMObject.Marker(mark.x,mark.y,mark.z);
+                
+                //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);
+
+        }
+        
+    });
+
+}
+
+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;
+
+}
+
+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);
+    
+}
+
+function leaf_mousemove_nohc(e){
+    
+    var Camera = Map.marker;
+    
+    //old
+    var p0 = new L.LatLng(Data.camera.latitude,Data.camera.longitude);
+    var p1 = new L.LatLng(Camera._latlng.lat,Camera._latlng.lng);
+    
+    Data.camera.latitude = Camera._latlng.lat;
+    Data.camera.longitude = Camera._latlng.lng;
+    
+    var dh = Camera._heading - Math.PI/180*Data.camera.heading;
+    
+    //console.log(Camera._heading);
+    
+    Data.camera.heading = Camera._heading*180/Math.PI;
+    
+    var newheading = Data.camera.heading;// - INIT_HEADING;
+    
+    if ((p0.lat!=p1.lat)||(p0.lng!=p1.lng)){
+        console.log("translation");
+        leaf_translation_v1(p0,p1);
+    }
+
+    //leaf_rotation_v1(newheading,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 azimuth = getAzimuth(p1_ll,p2_ll);
+        //var initial_heading = Data.camera.heading;
+        
+        var angle = azimuth - INIT_HEADING;
+        var distance = p1_ll.distanceTo(p2_ll);
+        
+        mark.x = distance*Math.sin(Math.PI/180*angle);
+        mark.z = -distance*Math.cos(Math.PI/180*angle);
+        
+        X3DOMObject.Marker.place(mark.x,mark.y,mark.z,"my-sph-"+index);
+    
+    }
+    
+}
+
+function leaf_translation_v1(p0,p1){
+    
+    var pi = new L.LatLng(p0.lat,p1.lng);
+    
+    var dx = p0.distanceTo(pi);
+    var dy = 0;
+    var dz = p1.distanceTo(pi);
+    var dl = p0.distanceTo(p1);
+    
+    //console.log(dx+" "+dz+" "+dl);
+    
+    if (p1.lng<p0.lng){
+        dx = -dx;
+    }
+    
+    if (p1.lat<p0.lat){
+        dz = -dz;
+    }
+
+    var da = Math.atan2(dz,dx);
+    
+    var A = Math.PI/180*INIT_HEADING;
+    
+    dx = dl*Math.sin(A-da);
+    dz = -dl*Math.cos(A-da);
+
+    console.log("dx="+dx+" dy="+dy+" dz="+dz+" A="+A+" da="+da);
+    
+    // translation over map = xz
+    x3dom_translation(dx,dy,dz)
+    
+}
+
+function x3d_mouseMove(){
+    
+    var Camera = Map.marker;
+    
+    var initial_heading = Data.camera.heading;
+    //var initial_heading = INIT_HEADING;
+    
+    var heading = Scene.getViewDirection();
+    
+    Map.marker.setHeading(heading+INIT_HEADING);
+    
+    var d = Scene.getViewTranslation();
+    
+    var dx;
+    var dz;
+    
+    if (Scene.old_view_translation == null){
+        dx = 0;
+        dz = 0;
+    }else{
+        dx = d.x - Scene.old_view_translation.x;
+        dz = d.z - Scene.old_view_translation.z;
+    }
+    
+    var distance = Math.sqrt(dx*dx+dz*dz);
+    var angle = 180/Math.PI*Math.atan2(dx,-dz);
+
+    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+INIT_HEADING,distance);
+
+    Map.marker.setBasePoint(p1);
+    Map.marker._syncMeasureMarkersToBasePoint();
+
+    Data.camera.latitude = p1.lat;
+    Data.camera.longitude = p1.lng;
+    Data.camera.heading = heading+INIT_HEADING;
+    
+    Scene.old_view_translation = d;
+    
+}
+
+// http://www.movable-type.co.uk/scripts/latlong.html
+// initial bearing
+
+// precision problems?!
+
+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;
+  
+}
+
+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 comments
+function parseURL(){
+    var parameters=location.href.replace(/\?/ig,"&").split("&");
+    for (var i=0;i<parameters.length;i++) parameters[i]=parameters[i].split("=");
+    for (var i=1;i<parameters.length;i++) {
+        switch (parameters[i][0]) {
+            case "pointer":    SETTINGS.pointer   = true; break;
+            case "highlight":  SETTINGS.highlight = true; break;
+            case "viewinfo":   SETTINGS.viewinfo  = true; break;
+            case "moreinfo":   SETTINGS.moreinfo  = true; break;
+            case "crosshair":  SETTINGS.crosshair = true; break;
+            case "shiftspeed": SETTINGS.shiftspeed = parseFloat(parameters[i][1]); break;
+        }
+    }
+}

js/index_new.css

+body{
+  padding: 0px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 0px;
+  overflow:hidden;
+}
+
+#x3d_id{
+  border: 0px;
+}
+
+#x3dom_logdiv{
+  position: absolute;
+  left: 0px;
+  bottom:0px;
+  width:99%;
+}
+
+.x3dom-canvas{
+  cursor:pointer;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+}
+html, body, #x3d_wrapper {
+    height: 100vh;
+    width: 100vw;
+}
+
+#map_wrapper{
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  width: 500px;
+  height: 400px;
+  border: 2px solid white;
+  border-radius: 2px;
+  z-index: 10000;
+}
+
+#leaflet_map{
+  width: 500px;
+  height: 400px;
+}
+
+.measurementtooltip{
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 0px 3px;
+/*   margin:20px 0px 0px 7px; */
+  font-weight: normal;
+  border-radius: 1px;
+  font-size: 16px;
+  display:block;
+  
+  position:absolute;
+  top: 16px;
+  left: 3px;
+}
+
+.leaflet-tooltip-left.measurementtooltip::before {
+  border: 0px;
+  border-left-color: cyan;
+}
+
+.leaflet-tooltip-right.measurementtooltip::before {
+  border: 0px;
+  border-right-color: cyan;
+}
+
+#infowindow, #infowindow div{
+    z-index:10;
+    background:rgba(220,220,220,1);
+    border:0px solid rgba(100,100,100,0.5);
+    border-radius: 2px;
+    color:black;
+    font-size:20px;
+}
+
+#window-info, #window-info div{
+    z-index:10;
+    background:rgba(220,220,220,1);
+    border:0px solid rgba(100,100,100,0.5);
+    border-radius: 2px;
+    color:black;
+/*     font-size:20px; */
+}
+
+#map_resizer_handle{
+    position:absolute;
+    top:-8px;
+    left:-8px;
+    width:16px;
+    height:16px;
+    border-radius:8px;
+    background-color:white;
+    z-index:1000;
+    cursor:move;
+}
+
+.leaflet-tooltip-pane { z-index: 350; }
+
+.leaflet-control-zoom-in, .leaflet-control-zoom-out{
+    user-select:none;
+}
+
+.leaflet-control-zoom{
+    user-select:none;
+}
+
+.leaflet-interactive img{
+    user-select:none;
+    pointer-events: none;
+}
+
+.leaflet-interactive path{
+    user-select:none;
+    pointer-events: none;
+}
+
+#help_wrapper{
+    position:absolute;
+    top:2px;
+    right:2px;
+/*    width:30%;
+    height:100%;*/
+/*     background: rgba(200,100,100,0.5); */
+    z-index: 1000;
+}
+
+#help_button{
+    background: white;
+    border: 0px solid white;
+    border-radius: 2px;
+    font-size: 20px;
+    font-weight: bold;
+    padding: 5px 10px;
+    margin-bottom: 2px;
+}
+
+#help_button:focus {outline:0;}
+
+#help_button:hover {
+    background: rgba(240,240,240,1);
+}
+
+#help-content, #menu-content{
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    position:absolute;
+    top:0px;
+    left:0px;
+    width:100%;
+    height:100%;
+    border-radius:2px;
+    border: 0px solid gray;
+    color:white;
+    font-size:16px;
+    padding: 20px 100px;
+    background:rgba(50,50,50,0.9);
+    overflow:auto;
+    display:none;
+    z-index:10000;
+}
+
+#menu_button{
+    background-image:url('images/settings.png');
+    background-size: 32px 32px;
+    background-repeat: no-repeat;
+    
+    background-color:white;
+    width: 32px;
+    height: 32px;
+    border: 0px solid white;
+    border-radius: 2px;
+    margin-bottom: 2px;
+}
+
+#menu_button:hover {
+/*     background-image:url('images/settings.png'); */
+    background-color: rgba(240,240,240,1);
+}
+
+.my-check-box {
+    width:25px;
+    height:25px;
+}
+
+#align_button{
+    background-image:url('images/align.png');
+    background-size: 32px 32px;
+    background-repeat: no-repeat;
+    
+    background-color:white;
+    width: 32px;
+    height: 32px;
+    border: 0px solid white;
+    border-radius: 2px;
+    margin-bottom: 2px;
+}
+
+#align_button:hover {
+/*     background-image:url('images/align.png'); */
+    background-color: rgba(240,240,240,1);
+}
+
+.crosshair{
+    background: rgba(50,200,50,0.5);
+    display:none;
+}
+
+#crosshair_h{
+    position:absolute;
+    width: 512px;
+    height: 2px;
+}
+
+#crosshair_v{
+    position:absolute;
+    height: 512px;
+    width: 2px;
+}
+
+#window-info{
+    display:block;
+    font-size: 16px;
+}
+
+#window-viewinfo{
+    z-index: 10;
+    background: rgba(220,220,220,1);
+    border: 0px solid rgba(100,100,100,0.5);
+    border-radius: 1px;
+    color: black;
+    font-size: 16px;
+    margin-top: 2px;
+}
+
+#window-viewinfo td{
+    text-align:center;
+}
+
+.input{
+    text-align: right;
+    width: 100px;
+    height: 20px;
+    font-size: 16px;
+    border-radius: 2px;
+}
+
+.hcontrol-button{
+    background-color: red;
+}
+
+.hcontrol-button:hover{
+    background-color: red;
+}
+
+#info-wrapper{
+    position: absolute;
+    left:2px;
+    bottom:2px;
+}
+

js/leaflet-x3dom.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
+    };
+    
+    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;
+
+};
+

js/leaflet/.directory

+[Dolphin]
+PreviewsShown=true
+SortRole=date
+Timestamp=2017,5,23,18,34,26
+Version=3
+ViewMode=1

js/leaflet/L.extra.js

+(function (window, document, undefined) {
+    "use strict";
+
+    //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);
+
+    }
+
+}(this,document));

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

js/leaflet/leaflet.camera-view-marker.js

+/*
+  Leaflet.CameraViewMarker - specific markerwith interactions like rotate and drag
+
+  Copyright (C) 2017 Elphel Inc.
+
+  License: GPLv3
+
+  http://leafletjs.com
+  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 
+ * JavaScript code in this page.
+ *
+ *   The JavaScript code in this page is free software: you can
+ *   redistribute it and/or modify it under the terms of the GNU
+ *   General Public License (GNU GPL) as published by the Free Software
+ *   Foundation, either version 3 of the License, or (at your option)
+ *   any later version.  The code is distributed WITHOUT ANY WARRANTY;
+ *   without even the implied warranty of MERCHANTABILITY or FITNESS
+ *   FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+ *
+ *   As additional permission under GNU GPL version 3 section 7, you
+ *   may distribute non-source (e.g., minimized or compacted) forms of
+ *   that code without the copy of the GNU GPL normally required by
+ *   section 4, provided you include this license notice and a URL
+ *   through which recipients can access the Corresponding Source.
+ *
+ *  @licend  The above is the entire license notice
+ *  for the JavaScript code in this page.
+ */
+
+// Reference links:
+// * https://github.com/lvoogdt/Leaflet.awesome-markers
+// * (ref) https://github.com/ppete2/Leaflet.PolylineMeasure
+// * https://github.com/ewoken/Leaflet.MovingMarker/blob/master/MovingMarker.js
+// * (not used) https://blog.webkid.io/rarely-used-leaflet-features/
+
+(function (window, document, undefined) {
+    "use strict";
+
+    /*
+     * Leaflet.CameraViewMarker assumes that you have already included the Leaflet library.
+     */
+
+    //CircleMarker has everything one need    
+    L.CameraViewMarker = L.CircleMarker.extend({
+
+        options:{
+            heading:0,
+//             altitude:10,
+//             elevation:-40,
+            altitude:0,
+            elevation:0,
+            fov:0, // if 0 then do not draw
+            units:"deg",
+            draw_xz: true,
+            draw_fov: true,
+            h_control: false,
+            
+            basepoint:{
+                url: ""
+            }
+        },
+
+        setHeading: function(param){
+
+            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);
+                var p1 = this._map.latLngToLayerPoint(param);
+
+                var dx = p1.x - p0.x;
+                var dy = p0.y - p1.y;
+
+                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();
+
+        },
+
+        setBasePoint: function(param){
+
+            var latlng = param;
+            var hecs = this.getHCState();
+
+            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;
+                }
+            }
+
+            this._latlng = latlng;
+            this._updateCameraViewMarker();
+
+        },
+
+        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
+        onAdd: function(){
+
+            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 = {};
+
+            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;
+                this._initHControl();
+            }else{
+                this._altitude = 0;
+                this._elevation = 0;
+            }
+
+            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_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);
+
+            var p_head_cap_b = new L.Point(p_head.x,p_head.y+100);
+            var p_head_cap_b_ll = this._map.layerPointToLatLng(p_head_cap_b);
+
+            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],
+                    //iconSize: [40, 57],
+                    //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/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',
+                    fillColor: 'white',
+                    fillOpacity: 0.1,
+                    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);
+                    }else{
+                        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);
+                    }
+                }
+                
+                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);
+                    this._baseCapLineV = false;
+                    this._headCapLineV = false;
+                    this._layerPaint.removeLayer(this._baseCapLineH);
+                    this._layerPaint.removeLayer(this._headCapLineH);
+                    this._baseCapLineH = false;
+                    this._headCapLineH = false;
+                    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],                        
+                    }).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);
+
+        },
+
+        _mouseMove: function(e){
+
+            this._map.on('click',this._mouseClick,this);  // necassary for _dragCircle. If switched on already within _dragCircle an unwanted click is fired at the end of the drag.
+
+        },
+      
+        _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);
+
+        },
+
+        _mouseUp: function(e){
+
+            this._map.dragging.enable();
+
+            this._map.off('mousemove',this.setHeading,this);
+            this._map.off('mousemove',this.setBasePoint,this);
+
+            this._map.on ('mousemove',this._mouseMove,this);
+
+            this._map.off('mouseup',this._mouseUp,this);
+
+        },
+
+        _dragCameraViewMarker: 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.setBasePoint,this);
+            
+            this._map.on('mouseup',this._mouseUp,this);
+            
+            // prevent image getting grabbed by browser
+            e.originalEvent.preventDefault();
+
+        },
+
+        _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));

js/leaflet/leaflet.camera-view-marker.measure.js

+/*
+  Leaflet.CameraViewMarker - specific marker with interactions like rotate and drag
+
+  Copyright (C) 2017 Elphel Inc.
+
+  License: GPLv3
+
+  http://leafletjs.com
+  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 
+ * JavaScript code in this page.
+ *
+ *   The JavaScript code in this page is free software: you can
+ *   redistribute it and/or modify it under the terms of the GNU
+ *   General Public License (GNU GPL) as published by the Free Software
+ *   Foundation, either version 3 of the License, or (at your option)
+ *   any later version.  The code is distributed WITHOUT ANY WARRANTY;
+ *   without even the implied warranty of MERCHANTABILITY or FITNESS
+ *   FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+ *
+ *   As additional permission under GNU GPL version 3 section 7, you
+ *   may distribute non-source (e.g., minimized or compacted) forms of
+ *   that code without the copy of the GNU GPL normally required by
+ *   section 4, provided you include this license notice and a URL
+ *   through which recipients can access the Corresponding Source.
+ *
+ *  @licend  The above is the entire license notice
+ *  for the JavaScript code in this page.
+ */
+
+// Reference plugins:
+// * https://github.com/lvoogdt/Leaflet.awesome-markers
+// * https://github.com/ppete2/Leaflet.PolylineMeasure
+
+// * https://github.com/ewoken/Leaflet.MovingMarker/blob/master/MovingMarker.js
+// * (not used) https://blog.webkid.io/rarely-used-leaflet-features/
+
+(function (window, document, undefined) {
+    "use strict";
+
+    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', 
+                    weight:1, 
+                    dashArray:"5,5"
+                }).addTo(this._layerPaint).bringToBack();
+                
+            //circle
+            var tmp_point = new L.CircleMarker(latlng,{
+                color: '#1f1',
+                fillColor: '#0f3',
+                weight: 2,
+                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;
+            }
+            
+            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){
+                this._slidingMarker = new L.CircleMarker(p2_ll,{
+                    color: '#1b1',
+                    fillColor: '#0f3',
+                    weight: 2,
+                    fillOpacity: 0.5,
+                    radius: 5,
+                }).addTo(this._layerPaint);
+                
+                this._slidingLine = L.polyline(l_d, {
+                    color: '#1f1', 
+                    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();
+            this._initCVM_M();
+
+        },
+
+        _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
+            };
+            //turn on measure mode
+            //this._toggleMeasureMode();
+        },
+
+        _registerEvents_M: function(){
+
+            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){
+
+            if (e.originalEvent.ctrlKey){
+                this._map._container.style.cursor = "pointer";
+            }else{
+                this._map._container.style.cursor = "default";
+            }
+
+        },
+        
+        _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";
+            self._map.off('click', self._placeMeasurePoint, self);
+            }
+            */
+        },
+      
+        _measureMarkerClick:function(e){
+
+            if (e.originalEvent.ctrlKey){
+                this.removeMeasureMarker(e);
+            }
+
+        },
+              
+        _syncMeasureMarkersToBasePoint: function(){
+
+            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');
+                    });
+
+                    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));

js/leaflet/leaflet.css

+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg,
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer {
+	max-width: none !important;
+	}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-tile {
+	will-change: opacity;
+	}
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	     -o-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	will-change: transform;
+	}
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	     -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	     -o-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline: 0;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-container a.leaflet-active {
+	outline: 2px solid orange;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a,
+.leaflet-bar a:hover {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+.leaflet-control-zoom-out {
+	font-size: 20px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in {
+	font-size: 22px;
+	}
+.leaflet-touch .leaflet-control-zoom-out {
+	font-size: 24px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path {
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.7);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover {
+	text-decoration: underline;
+	}
+.leaflet-container .leaflet-control-attribution,
+.leaflet-container .leaflet-control-scale {
+	font-size: 11px;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	font-size: 11px;
+	white-space: nowrap;
+	overflow: hidden;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+
+	background: #fff;
+	background: rgba(255, 255, 255, 0.5);
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 19px;
+	line-height: 1.4;
+	}
+.leaflet-popup-content p {
+	margin: 18px 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	     -o-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 4px 4px 0 0;
+	border: none;
+	text-align: center;
+	width: 18px;
+	height: 14px;
+	font: 16px/14px Tahoma, Verdana, sans-serif;
+	color: #c3c3c3;
+	text-decoration: none;
+	font-weight: bold;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover {
+	color: #999;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+.leaflet-oldie .leaflet-popup-tip-container {
+	margin-top: -1px;
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-clickable {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}

js/menu.js

+
+function menu_init(){
+    
+    // init checkboxes
+    for (var setting in SETTINGS){
+        if (typeof SETTINGS[setting] === 'boolean'){
+            if (SETTINGS[setting]){
+                $("#"+setting).prop("checked",true);
+            }else{
+                $("#"+setting).prop("checked",false);
+            }
+        }else{
+            //number?
+            $("#"+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 class1 = $(e.target).hasClass("my-check-box");
+        var class2 = $(e.target).hasClass("input");
+        if (!class1&&!class2){
+            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{
+            SETTINGS[id] = false;
+        }
+
+    });
+
+    crosshair_init();
+
+    shiftspeed_init();
+}
+
+function crosshair_init(){
+
+    if (SETTINGS.crosshair){
+        $(".crosshair").show();
+    }
+
+    $("#crosshair").on('click',function(){
+        if (SETTINGS.crosshair){
+            $(".crosshair").show();
+        }else{
+            $(".crosshair").hide();
+        }
+    });
+
+}
+
+function shiftspeed_init(){
+
+    $('#shiftspeed').on('change',function(e){
+        $("#navInfo").prop("speed",$(this).val());
+        $(this).blur();
+    });
+
+    $('#shiftspeed').change();
+}

js/x3dom.css

+/*
+ * X3DOM JavaScript Library
+ * http://www.x3dom.org
+ *
+ * (C)2009 Fraunhofer IGD, Darmstadt, Germany
+ * Dual licensed under the MIT and GPL
+ *
+ * Based on code originally provided by
+ * Philip Taylor: http://philip.html5.org
+ */
+
+X3D, x3d {
+  position:relative;    /* in order to be able to position stat-div within X3D */
+  float:left;           /* float the element so it has the same size like the canvas */
+  cursor:pointer;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #000;
+}
+
+X3D:hover, 
+x3d:hover, 
+.x3dom-canvas:hover {
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+
+.x3dom-canvas {
+  border:none;
+  cursor:pointer;
+  cursor:-webkit-grab;
+  cursor:grab;
+  width:100%;
+  height:100%;
+  float:left;
+}
+
+.x3dom-canvas-mousedown {
+  cursor:-webkit-grabbing;
+  cursor:grabbing;
+}
+
+.x3dom-canvas:focus {
+    outline:none; 
+}
+.x3dom-progress {
+    margin: 0;
+    padding: 6px 8px 0px 26px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    color: #0f0;
+    font-family: Helvetica, sans-serif;
+    line-height:10px;
+    font-size: 10px;
+    min-width: 45px;
+    min-height: 20px;
+    border: 0px;
+    background-position: 4px 4px;
+    background-repeat: no-repeat;
+    background-color: #333;
+    background-color: rgba(51, 51, 51, 0.9);
+    z-index: 100;
+    background-image: url('data:image/gif;base64,R0lGODlhEAAQAPQAADMzM////z4+Po+Pj0pKSsbGxpycnP///7e3t+Hh4XR0dGZmZu7u7oGBgfr6+tLS0qqqqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==');
+}
+
+.x3dom-progress.bar span {
+  position: absolute;
+  left: 0;
+  top: 0;
+  line-height: 20px;
+  background-color: red;
+}
+
+
+.x3dom-statdiv {
+    margin: 0;
+    padding: 0;
+    right: 10px;
+    top: 10px;
+    position: absolute;
+    color: #0f0;
+    font-family: Helvetica, sans-serif;
+    line-height:10px;
+    font-size: 10px;
+    width: 75px;
+    height: 70px;
+    border: 0px;
+}
+
+#x3dom-state-canvas {
+    margin: 2px;
+    padding: 0;
+    right: 0%;
+    top: 0%;
+    position: absolute;
+}
+
+#x3dom-state-viewer {
+  position: absolute;
+  margin: 2px;
+  padding: 5px;
+  width: 135px;
+  top: 0%;
+  right: 0%;
+  opacity: 0.9;
+  background-color: #323232;
+  z-index: 1000;
+  font-family: Arial, sans-serif;
+  color: #C8C8C8;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: help;
+}
+
+.x3dom-states-head {
+  display: block;
+  font-size: 26px;
+}
+
+.x3dom-states-rendermode-software {
+    font-size: 10px;
+    margin: 0 0 2px 2px;
+}
+
+.x3dom-states-rendermode-hardware {
+    font-size: 10px;
+    margin: 0 0 2px 2px;
+}
+
+.x3dom-states-head2 {
+  font-size: 10px;
+}
+
+.x3dom-states-list {
+  float: left;
+  width: 100%;
+  border-top: 1px solid #C8C8C8;
+  list-style: none;
+  font-size: 9px;
+  line-height: 16px;
+  margin:0;
+  padding: 0;
+  padding-top: 2px;
+}
+
+.x3dom-states-item  {
+  width: 100%;
+  float: left;
+}
+
+.x3dom-states-item-title {
+  float: left;
+  margin-left: 2px;
+}
+
+.x3dom-states-item-value {
+  float: right;
+  margin-right: 2px;
+}
+
+.x3dom-touch-marker {
+	display: inline;
+    padding: 5px;
+	border-radius: 10px;
+    position: absolute;
+    font-family: Helvetica, sans-serif;
+    line-height:10px;
+    font-size: 10px;
+    color: darkorange;
+    background: cornsilk;
+    opacity: 0.6;
+    border: 2px solid orange;
+	z-index: 200;
+}
+
+.x3dom-logContainer {
+    border: 2px solid olivedrab;
+    height: 200px;
+    padding: 4px;
+    overflow: auto;
+    white-space: pre-wrap;
+    font-family: sans-serif;
+    font-size: x-small;
+    color: #00ff00;
+    background-color: black;
+    margin-right: 10px;
+}
+
+.x3dom-nox3d {
+    font-family: Helvetica, sans-serif;
+    font-size: 14px;
+    background-color: #eb7a7a;
+    padding: 1em;
+    opacity: 0.75;
+}
+
+.x3dom-nox3d p { 
+    color: #fff;
+    font-size: 14px;
+}
+
+.x3dom-nox3d a { 
+    color: #fff;
+    font-size: 14px;
+}
+
+
+/* self-clearing floats */
+.group:after {
+  content: "."; 
+  display: block; 
+  height: 0; 
+  clear: both; 
+  visibility: hidden;
+}

kml/test.kml

+<?xml version="1.0" encoding="UTF-8"?>
+<kml xmlns="http://earth.google.com/kml/2.2">
+<Document>
+<PhotoOverlay>
+	<name>test</name>
+	<visibility>1</visibility>
+	<shape>rectangle</shape>
+	<TimeStamp>
+		<when>1487451413.967079</when>
+	</TimeStamp>
+	<Camera>
+		<longitude>-111.9328843</longitude>
+		<latitude>40.7233861</latitude>
+		<altitude>1305.1</altitude>
+		<heading>65</heading>
+		<tilt>90</tilt>
+		<roll>0</roll>
+	</Camera>
+	<Icon>
+		<href>x3d/1487451413_967079.x3d</href>
+	</Icon>
+	<ExtendedData>
+		<OriginalData>
+			<longitude>-111.9328843</longitude>
+			<latitude>40.7233861</latitude>
+			<altitude>1305.1</altitude>
+			<heading>65</heading>
+			<tilt>90</tilt>
+			<roll>0</roll>
+		</OriginalData>
+	</ExtendedData>
+</PhotoOverlay>
+</Document>
+</kml>

test.html

+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Scene+Map</title>
+    
+    <script type='text/javascript' src='js/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>
+    <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.js'></script>
+    <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.measure.js'></script>
+
+    <script type='text/javascript' src='js/X3DOMObject.js'></script>
+    <script type='text/javascript' src='js/LeafletObject.js'></script>
+<!--     <script type='text/javascript' src='js/LeafletObject.js'></script> -->
+    <script type='text/javascript' src='js/leaflet-x3dom.js'></script>
+
+    <script type='text/javascript' src='js/index.js'></script>
+    <script type='text/javascript' src='js/menu.js'></script>
+    <script type='text/javascript' src='js/help.js'></script>
+    <script type='text/javascript' src='js/align.js'></script>
+    
+    <link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
+<!--     <link rel='stylesheet' type='text/css' href='js/map.css'></link> -->
+    <link rel='stylesheet' type='text/css' href='js/x3dom.css'></link>
+<!--     <link rel='stylesheet' type='text/css' href='js/index.css'></link> -->
+    
+    <link rel='stylesheet' type='text/css' href='js/index_new.css'></link>
+    
+  </head>
+  <body>
+    <div id='x3d_wrapper'>
+      <x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false"> 
+        <scene>
+          <navigationInfo id="navInfo" type='"examine"' speed='0.01'></navigationInfo>
+          <Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'></Viewpoint>
+          <group>            
+            <inline name="1487451413_967079" namespacename="1487451413_967079" url="x3d/1487451413_967079.x3d"/>
+          </group>
+          <group>
+            <inline name="back" namespacename="back" url="x3d/background.x3d"/>
+          </group>
+        </scene>
+      </x3d>
+    </div>
+    <div id='map_wrapper'>
+      <div id="leaflet_map"></div>
+    </div>
+    <div id='crosshair_h' class='crosshair'></div>
+    <div id='crosshair_v' class='crosshair'></div>
+    <div id='help_wrapper'>
+        <div id='menu_button'></div>
+        <div id='help_button'>?</div>
+        <!--<div id='align_button'></div>-->
+    </div>
+    <div id='info-wrapper'>
+        <div id='window-info'></div>
+        <div id='window-viewinfo'></div>
+    </div>
+    <div id='menu-content'>
+        <div>
+            <h2>Settings</h2>
+            <table>
+                <tr>
+                    <td>Show view info (x, y, z, azimuth, elevation, skew)</td>
+                    <td><input id='viewinfo' type='checkbox' class='my-check-box' /></td>
+                </tr>
+                <tr>
+                    <td>Show more info (hitting ray: id, x, y, z, d<sub>xz</sub>, d<sub>xyz</sub>)</td>
+                    <td><input id='moreinfo' type='checkbox' class='my-check-box' /></td>
+                </tr>
+                <tr>
+                    <td>Show crosshair</td>
+                    <td><input id='crosshair' type='checkbox' class='my-check-box' /></td>
+                </tr>
+                <tr>
+                    <td>Show pointer marker (green sphere over 3D scene)</td>
+                    <td><input id='pointer' type='checkbox' class='my-check-box' /></td>
+                </tr>
+                <tr>
+                    <td>Highlight 3D elements on mouse over</td>
+                    <td><input id='highlight' type='checkbox' class='my-check-box' /></td>
+                </tr>
+                <tr>
+                    <td>View's parallel shift speed</td>
+                    <td><input id='shiftspeed' type='text' class='input' /></td>
+                </tr>
+                <tr>
+                    <td><button>Close</button></td>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <div id='help-content'>
+        <div>
+            <h2>3D Scene + Map</h2>
+            <h3 style='color:rgba(200,200,255,1);'>Map</h3>
+            <table>
+            <tr>
+                <td><b>ctrl + left click</b></td>
+                <td>
+                    <ul>
+                        <li>create markers, relative height = 0</li>
+                        <li>remove markers</li>
+                    </ul>
+                </td>
+            </tr>
+            <tr>
+                <td><b>draggable objects (global XZ)</b></td>
+                <td>
+                    <ul>
+                        <li>markers</li>
+                        <li>camera base (green)</li>
+                        <li>heading crosshair (white)</li>
+                    </ul>
+                </td>
+            </tr>
+            </table>
+            <h3 style='color:rgba(200,200,255,1);'>Scene</h3>
+            <table>
+            <tr>
+                <td><b>ctrl + left click</b></td>
+                <td>
+                    <ul>
+                        <li>create markers, relative height = surface hitting point height</li>
+                        <li>remove markers</li>
+                    </ul>
+                </td>
+            </tr>
+            <tr>
+                <td><b>mouse wheel (scroll)</b></td>
+                <td>
+                    <ul>
+                        <li>change field of view (= camera focal length)</li>
+                    </ul>
+                </td>
+            </tr>
+            <tr>
+                <td><b>mouse wheel (drag)</b></td>
+                <td>
+                    <ul>
+                        <li>move camera over its XY (= parallel shift)</li>
+                    </ul>
+                </td>
+            </tr>
+            <tr>
+                <td><b>draggable objects (camera XY)</b></td>
+                <td>
+                    <ul>
+                        <li>markers only</li>
+                    </ul>
+                </td>
+            </tr>
+            <tr>
+                <td><button>Close</button></td>
+            </tr>
+            </table>
+        </div>
+    </div>
+   </body>
+</html>

x3d/axes.x3d

+<?xml version="1.0" encoding="UTF-8"?>
+<x3d profile="Interchange" version="3.3">
+  <Scene>
+    <group>
+      <transform translation='0 0 1'>
+        <transform translation='5 0 0' rotation='0 0 1 1.57079632679489661923'>
+          <shape> 
+            <appearance> 
+              <material diffuseColor='1 0 0' transparency='0.0'></material> 
+            </appearance> 
+            <Cylinder DEF="cylinder" radius="0.1" height="10.0" />
+          </shape> 
+        </transform>
+        <transform translation='0 5 0' rotation='0 0 0 0'>
+          <shape> 
+              <appearance> 
+                <material diffuseColor='0 1 0' transparency='0.0'></material> 
+              </appearance> 
+              <Cylinder DEF="cylinder" radius="0.1" height="10.0" />
+          </shape>
+        </transform>
+        <transform translation='0 0 5' rotation='1 0 0 1.57079632679489661923'>
+          <shape> 
+              <appearance> 
+                <material diffuseColor='0 0 1' transparency='0.0'></material> 
+              </appearance> 
+              <Cylinder DEF="cylinder" radius="0.1" height="10.0" />
+          </shape>
+        </transform>
+      </transform>
+    </group>
+  </Scene>
+</x3d>
\ No newline at end of file

x3d/background.x3d

+<?xml version="1.0" encoding="UTF-8"?>
+<x3d profile="Interchange" version="3.3">
+  <Scene>
+    <Background 
+      id="Background"
+      class="Background"
+      backUrl=  "background_side.jpeg"
+      bottomUrl="background_floor.jpeg"
+      frontUrl= "background.jpeg"
+      leftUrl=  "background_side.jpeg"
+      rightUrl= "background_side.jpeg"
+      topUrl=   "background_sky.jpeg">
+    </Background>
+  </Scene>
+</x3d>
\ No newline at end of file