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/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_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/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