markers colors and size

js/leaflet_init.js

@@ -136,8 +136,7 @@ LeafletObject.prototype.highlightMarker = function(index){
 
 LeafletObject.prototype.dehighlightMarker = function(index){
 
-    var color = $("#my-sph-"+index).find("material").attr("myColor");
-    color = convert_color_x2l(color);
+    color = Data.markers[index].color;
     
     var style = {color:color,fillColor:color};
 
@@ -165,35 +164,3 @@ LeafletObject.prototype.deleteMarker = function(index){
     this.marker.removeMeasureMarker(index);
 
 }
-
-function convert_color_x2l(color){
-    
-    var rgb = color.split(" ");
-    
-    var r = parseInt(rgb[0]*15);
-    var g = parseInt(rgb[1]*15);
-    var b = parseInt(rgb[2]*15);
-    
-    r = r.toString(16);
-    g = g.toString(16);
-    b = b.toString(16);
-    
-    return "#"+r+g+b;
-    
-}
-
-function convert_color_l2x(color){
-    
-    var r = parseInt(color[1],16);
-    var g = parseInt(color[2],16);
-    var b = parseInt(color[3],16);
-    
-    r = r/15;
-    g = g/15;
-    b = b/15;
-    
-    return r+" "+g+" "+b;
-    
-}
-
-

js/ui_init.js

@@ -63,6 +63,8 @@ var SETTINGS = {
 //     'kml'    : "scene.kml"
 }
 
+var MARKER_PREFIX = "my-sph-";
+
 // no comments
 function parseURL(){
     var parameters=location.href.replace(/\?/ig,"&").split("&");
@@ -478,7 +480,9 @@ function leaf_events(){
             
                 var mark = new X3L({
                     latitude: Lm._latlng.lat,
-                    longitude: Lm._latlng.lng
+                    longitude: Lm._latlng.lng,
+                    color: SETTINGS.markercolor,
+                    size: SETTINGS.markersize,
                 });
                 
                 var p1_ll = Camera._latlng;
@@ -720,41 +724,3 @@ function x3d_mouseMove(){
     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;
-    
-}

js/util_functions.js

+/*
+ * convert '0.5 1.0 0.5' to #7f7
+ */
+
+function convert_color_x2l(color){
+    
+    var rgb = color.split(" ");
+    
+    var r = parseInt(rgb[0]*15);
+    var g = parseInt(rgb[1]*15);
+    var b = parseInt(rgb[2]*15);
+    
+    r = r.toString(16);
+    g = g.toString(16);
+    b = b.toString(16);
+    
+    return "#"+r+g+b;
+    
+}
+
+/*
+ * convert #7f7 to '0.5 1.0 0.5'
+ */
+function convert_color_l2x(color){
+    
+    var r = parseInt(color[1],16);
+    var g = parseInt(color[2],16);
+    var b = parseInt(color[3],16);
+    
+    r = r/15;
+    g = g/15;
+    b = b/15;
+    
+    return r+" "+g+" "+b;
+    
+} 
+
+// http://www.movable-type.co.uk/scripts/latlong.html
+// initial bearing
+// precision problems?!
+/*
+ * azimuth by geo coords
+ */
+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;
+  
+}
+
+/*
+ * azimuth by canvas coords
+ */
+function getAzimuth(p1_ll,p2_ll){
+    
+    var Camera = Map.marker;
+    
+    var p1 = Camera._map.latLngToLayerPoint(p1_ll);
+    var p2 = Camera._map.latLngToLayerPoint(p2_ll);
+    
+    var dx = p2.x - p1.x;
+    var dz = p2.y - p1.y;
+    
+    var azimuth = (180/Math.PI*Math.atan2(dx,-dz)+360)%360;
+    
+    return azimuth;
+    
+}
\ No newline at end of file

js/x3dom_init.js

@@ -292,6 +292,10 @@ X3DOMObject.Shape.prototype._registerEvents = function(){
         var z = e.originalEvent.worldZ;
 
         if (self._ctrlKey||SETTINGS.pointer){
+            
+            $("#sliding_sphere").find('material').attr("diffuseColor",convert_color_l2x(SETTINGS.markercolor));
+            $("#sliding_sphere").find('Sphere').attr("radius",SETTINGS.markersize/2);
+            
             X3DOMObject.Marker.place(x,y,z,"sliding_sphere");
             $("#sliding_sphere").find("switch").attr("whichChoice",0);
         }else{
@@ -416,17 +420,20 @@ X3DOMObject.prototype.createMarker = function(x,y,z,id){
 
     var self = this;
     
-    sph_class = "";
+    var sph_class = "";
     
     var index = null;
     
+    var color = convert_color_l2x(SETTINGS.markercolor);
+    var size = SETTINGS.markersize/2;
+    
     if ((id=="")||(id==undefined)){
         sph_class = "my-markers";
         index = $("."+sph_class).length;
         id = "my-sph-"+index;
+        color = convert_color_l2x(self.data.markers[index].color);
+        size  = self.data.markers[index].size/2;
     }
-
-    var color = convert_color_l2x(SETTINGS.markercolor);
     
     var html = `
     <group id='`+id+`' class='`+sph_class+`'>
@@ -436,22 +443,19 @@ X3DOMObject.prototype.createMarker = function(x,y,z,id){
         <appearance> 
             <material diffuseColor='`+color+`' transparency='0.0' myColor='`+color+`'></material>
         </appearance> 
-        <Sphere DEF="sphere" radius="`+(SETTINGS.markersize/2)+`" />
+        <Sphere DEF="sphere" radius="`+size+`" />
         </shape> 
     </transform>
     </switch>
     </group>
     `;
-
-    var test = convert_color_x2l(SETTINGS.markercolor);
-    console.log(test);
     
     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);
+    //var shape = $(sphere_element).find("shape");
+    //var id_prefix = $(sphere_element).attr("id").substr(0,7);
     
     return sphere_element;
     // sphere events
@@ -951,7 +955,9 @@ X3DOMObject.PointerMarker.prototype._registerEvents = function(){
         var mark = new X3L({
             x: parseFloat(xyz[0]) || 0,
             y: parseFloat(xyz[1]) || 0,
-            z: parseFloat(xyz[2]) || 0
+            z: parseFloat(xyz[2]) || 0,
+            color: SETTINGS.markercolor,
+            size:  SETTINGS.markersize,
         });
         
         mark.d_x3d = Math.sqrt(mark.x*mark.x+mark.z*mark.z);

js/x3l.js

@@ -20,7 +20,10 @@ var X3L = function(options){
         tilt: 90,
         roll: 0,
         
-        fov: 0
+        fov: 0,
+        
+        color: "#1f1",
+        size: 2,
     };
     
     this._data = $.extend(defaults,options);
@@ -38,6 +41,9 @@ var X3L = function(options){
     this.roll = this._data.roll;
     
     this.fov = this._data.fov;
+    
+    this.color = this._data.color;
+    this.size = this._data.size;
 
 };
 

test.html

@@ -24,6 +24,8 @@
     <script type='text/javascript' src='js/ui_functions.js'></script>
     <script type='text/javascript' src='js/ui_align.js'></script>
     
+    <script type='text/javascript' src='js/util_functions.js'></script>
+    
     <link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
     <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>