1.&edit - edit mode = set initial location and azimuth on the leaflet map 2....

1.&edit - edit mode = set initial location and azimuth on the leaflet map 2. &experimental - experimental mode

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

+
+(function (window, document, undefined) {
+    "use strict";
+
+    L.Control.CameraViewMarkerControlsLocation = 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 = "Camera approximate location control";
+
+            //var label = "&#9760";
+            //var label = "&#128681";
+            var label = "&#9971";
+            //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.cameraViewMarkerControlsLocation = function (options) {
+        return new L.Control.CameraViewMarkerControlsLocation(options);
+    };
+
+}(this,document));
\ No newline at end of file

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

@@ -66,6 +66,7 @@
             draw_xz: true,
             draw_fov: true,
             h_control: false,
+            l_control: false,
 
             basepoint:{
                 url: ""
@@ -199,9 +200,13 @@
                 this._layerPaint = L.layerGroup().addTo(this._map);
             }
 
+            // height/elevation control
             this._controls = {
                 hc:{
                     getState: function(){return false;}
+                },
+                lc:{
+                    getState: function(){return false;}
                 }
             };
 
@@ -223,6 +228,17 @@
             this.setHeading(this._heading);
             this._registerEvents();
 
+            this.l_control = false;
+
+            // location control
+            if (typeof L.control.cameraViewMarkerControlsLocation == 'function'){
+                this.l_control = this.options.l_control;
+            }
+
+            if (this.l_control){
+                this._initLControl();
+            }
+
         },
 
         _updateCameraViewMarker: function(){
@@ -541,6 +557,27 @@
 
             return this._controls.hc.getState() || this.hcontrol;
 
+        },
+
+        // location controls
+        _initLControl: function(){
+
+            var self = this;
+
+            this._controls.lc = L.control.cameraViewMarkerControlsLocation({position:'topleft'}).addTo(this._map);
+
+            var btn = this._controls.lc._button;
+
+            L.DomEvent.on(btn, 'click', function(){
+                self._updateCameraViewMarker();
+            },btn);
+
+        },
+
+        getLCState: function(){
+
+            return this._controls.lc.getState() || this.lcontrol;
+
         }
 
     });

js/leaflet_init.js

@@ -119,6 +119,7 @@ LeafletObject.prototype.drawCamera = function(){
         fov: this.fov,
         draw_xz: false,
         h_control: true,
+        l_control: SETTINGS.edit,
         id: "basecircle"
     }).addTo(this._map);
 

js/ui_align.js

@@ -2,9 +2,53 @@
 function align_init(){
 
     $("#align_button").on("click",function(){
-        align_heading();
+        //align_heading();
+        x3dom_align_0();
     });
 
+    /*
+    $("#align_0").on("click",function(){
+        x3dom_align_0();
+    });
+    */
+
+}
+
+function x3dom_align_0(){
+
+  //get all points
+  //console.log("Base");
+  //console.log(Data.camera);
+  //console.log("Markers");
+  //console.log(Data.markers);
+
+  var base = Data.camera;
+  // base.x
+  // base.y
+  // base.z
+  // base.latitude
+  // base.longitude
+
+  for(var i=0;i<Data.markers.length;i++){
+
+    var mark = Data.markers[i];
+
+    // map azimuth
+    var p1_ll = new L.LatLng(base.latitude,base.longitude);
+    var p2_ll = new L.LatLng(mark.align.latitude,mark.align.longitude);
+
+    var azimuth_map = getAzimuth(p1_ll,p2_ll);
+
+    //var da = x3dom_getDistAngle(mark.align.x,mark.align.y,mark.align.z);
+    //var azimuth_3d = da[1];
+
+    var v = new x3dom.fields.SFVec3f(mark.align.x-base.x,mark.align.y-base.y,mark.align.z-base.z);
+    var azimuth_3d = Math.atan2(v.x,-v.z)*180/Math.PI;
+
+    console.log(azimuth_map+" - "+azimuth_3d+" = "+(azimuth_map-azimuth_3d));
+
+  }
+
 }
 
 function align_heading(){

js/ui_init.js

@@ -57,6 +57,8 @@ var SETTINGS = {
     'basepath': "models",
     'path'   : "1487451413_967079",
     'version': "v1",
+    'experimental': false,
+    'edit': false
 //     'kml'    : "scene.kml"
 }
 
@@ -79,6 +81,9 @@ function parseURL(){
             case "markersize":   SETTINGS.markersize = parseFloat(parameters[i][1]); break;
             case "path":         SETTINGS.path = parameters[i][1]; break;
             case "ver":          SETTINGS.version = parameters[i][1]; break;
+
+            case "edit":         SETTINGS.edit = true; break;
+            case "experimental": SETTINGS.experimental = true; break;
 //             case "kml":          SETTINGS.kml = parameters[i][1]; break;
         }
     }
@@ -181,7 +186,7 @@ function light_init(){
 
                     map_resize_init();
                     deep_init();
-                    align_init();
+                    //align_init();
                     x3d_initial_camera_placement();
                     x3d_events();
                     leaf_events();
@@ -222,8 +227,6 @@ function reset_to_initial_position(){
           fov: fov || 0,
       });
 
-      Scene.old_view_translation = null;
-
       Map.marker.setHeading(heading);
       Map.marker.setBasePoint(new L.LatLng(latitude,longitude));
       Map.marker._syncMeasureMarkersToBasePoint();
@@ -313,6 +316,8 @@ function deep_init(){
 
 function x3d_initial_camera_placement(){
 
+    Scene.old_view_translation = null;
+
     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;
@@ -535,6 +540,15 @@ function leaf_events(){
                 mark.z = p_w.z;
 
                 mark.d_map = distance;
+
+                mark.align = {
+                  latitude: mark.latitude,
+                  longitude: mark.longitude,
+                  x: 0,
+                  y: 0,
+                  z: 0
+                };
+
                 mark.d_x3d = "<font style='color:red;'>drag over 3D</font>";
 
                 Data.markers.push(mark);
@@ -584,15 +598,21 @@ function leaf_mousemove(e){
     leaf_drag_marker();
 
     var hecs = Map.marker.getHCState();
+    var lecs = Map.marker.getLCState();
 
     if (hecs){
-        leaf_mousemove_hc(e)
+        leaf_mousemove_hc(e);
+    }else if (lecs){
+        leaf_mousemove_lc(e);
     }else{
         leaf_mousemove_nohc(e);
     }
 
 }
 
+/**
+ * height/elevation control mode
+ */
 function leaf_mousemove_hc(){
 
     var Camera = Map.marker;
@@ -606,6 +626,21 @@ function leaf_mousemove_hc(){
 
 }
 
+/**
+ * set initial (approximate) location mode
+ */
+function leaf_mousemove_lc(){
+
+    var Camera = Map.marker;
+
+    Data.camera.heading   = Camera._heading*180/Math.PI;
+    Data.camera.latitude  = Camera._latlng.lat;
+    Data.camera.longitude = Camera._latlng.lng;
+    //update initial location and heading
+    x3d_initial_camera_placement();
+
+}
+
 function leaf_mousemove_nohc(e){
 
     var Camera = Map.marker;
@@ -649,6 +684,9 @@ function leaf_drag_marker(){
         mark.latitude = p2_ll.lat;
         mark.longitude = p2_ll.lng;
 
+        mark.align.latitude = mark.latitude;
+        mark.align.longitude = mark.longitude;
+
         var distance = p1_ll.distanceTo(p2_ll);
 
         var dp_w = x3dom_delta_map2scene(p1_ll,p2_ll);

js/ui_menu.js

@@ -51,6 +51,10 @@ function menu_init(){
         }
     }
 
+    if (!SETTINGS.experimental){
+      $(".experimental").hide();
+    }
+
     // init options menu
     var menu = $("#menu-content");
 
@@ -88,6 +92,8 @@ function menu_init(){
     marker_size_color_init();
 
     reset_view_init();
+
+    align_init();
 }
 
 function crosshair_init(){
@@ -136,4 +142,5 @@ function reset_view_init(){
         reset_to_initial_position();
     });
 
-}
\ No newline at end of file
+}
+

js/util_functions.js

@@ -62,7 +62,7 @@ function getAzimuth2(p1,p2){
 /*
  * azimuth by canvas coords
  */
-/*
+
 function getAzimuth(p1_ll,p2_ll){
 
     var Camera = Map.marker;
@@ -78,4 +78,3 @@ function getAzimuth(p1_ll,p2_ll){
     return azimuth;
 
 }
-*/
\ No newline at end of file

js/x3dom_init.js

@@ -900,6 +900,10 @@ X3DOMObject.Marker.slide = function(index,x,y,z){
     //d_x3d - map distance calculated from the model
     c.d_x3d = distance;
 
+    c.align.x = x;
+    c.align.y = y;
+    c.align.z = z;
+
     X3DOMObject.displayMarkInfo(index);
     X3DOMObject.displayInfo({});
 
@@ -994,6 +998,14 @@ X3DOMObject.PointerMarker.prototype._registerEvents = function(){
         mark.d_x3d = Math.sqrt(mark.x*mark.x+mark.z*mark.z);
         mark.d_map = "<font style='color:red;'>drag over map</font>";
 
+        mark.align = {
+          latitude: 0,
+          longitude: 0,
+          x: mark.x,
+          y: mark.y,
+          z: mark.z
+        };
+
         Data.markers.push(mark);
 
         X3DOMObject.displayMarkInfo(Data.markers.length-1);

test.html

@@ -21,6 +21,7 @@
     <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-controls-location.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>
 
@@ -61,7 +62,7 @@
     <div id='help_wrapper'>
         <div id='menu_button'></div>
         <div id='help_button'>?</div>
-        <!--<div id='align_button'></div>-->
+        <div id='align_button' class='experimental'></div>
     </div>
     <div id='info-wrapper'>
         <div id='window-info'></div>
@@ -117,6 +118,16 @@
                 <tr>
                     <td>&nbsp;</td>
                 </tr>
+                <tr>
+                    <td>
+                      <button id='align_0' class='experimental donothide'>Align0</button>
+                      <button id='align_1' class='experimental donothide'>Align1</button>
+                      <button id='align_2' class='experimental donothide'>Align2</button>
+                    </td>
+                </tr>
+                <tr>
+                    <td>&nbsp;</td>
+                </tr>
                 <tr>
                     <td><button>Close</button></td>
                 </tr>