commit 73fd547726440486c9a939aea6d9b4212cff7b27
Author: Marc Souviron <marc.souviron@vous-et-nous.com>
Date:   Sun Sep 1 23:07:16 2013 +0200

    Amélioration du style de la page de tracé de cap
    insertion de la distance du curseur au point de référence cur cette même page.

diff --git a/css/layers.css b/css/layers.css
new file mode 100644
index 0000000..28b8cab
--- /dev/null
+++ b/css/layers.css
@@ -0,0 +1,56 @@
+#panel {
+    position:absolute;
+    top: 0;
+    z-index:100000;
+    right: 0;
+    height: 1em; 
+    width: 10em;
+}
+#panel div { 
+    float: left;
+    margin: 0.5em;
+}
+
+#position {
+    z-index:100000;
+    position:absolute;
+    left:40%;
+    top:0;
+    background-color:#000;
+    padding:0 0.5em;
+    border-radius: 0 0 0.5em 0.5em;
+    color:#FC0;
+    font-size: 120%;
+}
+
+.lebouton {
+    z-index:100000;
+    position:absolute;
+    left:10%;
+    top:0;
+    width:2em;
+    height:2em;
+    background-color:#F00;
+}
+
+#extra {
+    background-color:#F00;
+    padding:0 1em;
+}
+
+#extra input {
+    padding:0 1em;
+    vertical-align:middle;
+}
+
+#extra label {
+    margin:0;
+    padding:0;
+    display:block;
+    text-align:left;
+}
+
+#controls {
+    background-color:#F0F;
+    padding:1em;
+}
diff --git a/js/pano.js b/js/pano.js
index 06558a0..1a14e6b 100644
--- a/js/pano.js
+++ b/js/pano.js
@@ -488,7 +488,7 @@ function tzoom(zv) {
 		    }
 		    res.innerHTML += '</ul><p>test sur : '+tx0+','+ty0+'</p>';
 		    var tst = this.get_cap_ele(tx0, ty0);
-		    res.innerHTML += '<p>cap:'+tst.cap+', shift:'+tst.ele+'</p>';
+		    res.innerHTML += '<p>cap:'+tst.cap+', ele:'+tst.ele+'</p>';
 		    var tst2 = this.get_pos_xy(tst.cap, tst.ele);
 		    res.innerHTML += '</ul><p>x:'+tst2.x+', y:'+tst2.y+'</p>';
 		}
diff --git a/js/utils_osm.js b/js/utils_osm.js
index db7761c..c54c365 100644
--- a/js/utils_osm.js
+++ b/js/utils_osm.js
@@ -11,7 +11,7 @@ function draw_map() {
 	    zcontrol = new OpenLayers.Control.Zoom();
 	}
     } else zcontrol = new OpenLayers.Control.Zoom();
-
+    
     var map = new OpenLayers.Map({
 	div: "map",
         zoom: typeof zoom == 'undefined' ? 10:zoom,
@@ -19,19 +19,70 @@ function draw_map() {
 		  new OpenLayers.Control.KeyboardDefaults(),
 		  new OpenLayers.Control.Navigation()],
     });
-
+    
     if (typeof scale_line != 'undefined' && scale_line == true) {
 	map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: ''}));
     }
-
+    
     if (typeof base_layers != 'undefined') {
-	map.addControl(new OpenLayers.Control.LayerSwitcher());
+	var layers = new OpenLayers.Control.LayerSwitcher();
+	map.addControl(layers);
 	for (var i = 0; i < base_layers.length; i++) {
 	    map.addLayer(base_layers[i]);
-	    if (base_layers[i].type == google.maps.MapTypeId.SATELLITE) {
-		base_layers[i].mapObject.setTilt(0);
+	}
+	
+	// gestion du 45° google //
+	function update_tilt() {
+	    for (var i = 0; i < base_layers.length; i++) {
+		if (base_layers[i].type == google.maps.MapTypeId.SATELLITE) {
+		    base_layers[i].mapObject.setTilt(this.checked?1:0);
+		    //alert((chkbx.checked?1:0)+'//'+i);
+		    base_layers[i].removeMap;
+		    base_layers[i].redraw;
+		}
 	    }
 	}
+	document.getElementById("tilt").onchange = update_tilt;
+	// fin de gestion du 45° google //
+	
+	// autres tests
+	function show_pos(e) {
+	    alert(formatLonlats(map.getLonLatFromViewPortPx(e.xy)));
+	}
+	function set_pos(e) {
+	    if(this.checked) {
+		document.getElementById("position").style.display = 'none';
+		map.events.register("click", map, show_pos);
+	    } else {
+		document.getElementById("position").style.display = 'block';
+		map.events.unregister("click", map, show_pos);
+	    }
+	}
+	var panel = new OpenLayers.Control.Panel({
+	    div: document.getElementById("panel")
+	});
+	
+	function formatLonlats(lonLat) {
+	    lonLat.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
+            var lat = lonLat.lat;
+            var lon = lonLat.lon;
+	    var dist = OpenLayers.Util.distVincenty(lonLat, new OpenLayers.LonLat(ln.lon1, ln.lat1))*1000;
+            return lat.toFixed(5) + ', ' + lon.toFixed(5) + ' à ' + parseInt(dist) + ' mètres';
+	}
+	
+	map.addControl (new OpenLayers.Control.MousePosition({
+	    div: document.getElementById("position"),
+	    formatOutput: formatLonlats
+	}));
+
+	var history = new OpenLayers.Control.NavigationHistory();
+	map.addControl(history);
+	panel.addControls([history.next, history.previous]);
+	map.addControl(panel);
+
+	document.getElementById("clic_pos").onchange = set_pos;
+	layers.layersDiv.appendChild(document.getElementById("extra"));
+	// fin des autres tests
     } else {
 	map.addLayer(new OpenLayers.Layer.OSM());
     }
diff --git a/show_capline.php b/show_capline.php
index 86f714c..fa4b9f8 100644
--- a/show_capline.php
+++ b/show_capline.php
@@ -2,7 +2,7 @@
   <title>Visualisation axe horizontal sur OSM</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link type="image/x-icon" rel="shortcut icon" href="images/tsf.png"/>
-  <link rel="stylesheet" type="text/css" href="map.css" />
+  <link rel="stylesheet" type="text/css" href="css/layers.css" />
 <?php
 if (isset($_REQUEST['cap']) && isset($_REQUEST['org_lat']) && isset($_REQUEST['org_lon'])) {
   $cap = $_REQUEST['cap'];
@@ -28,7 +28,7 @@ if ($complete) {
 <script src="http://openlayers.org/api/OpenLayers.js"></script>
     <script>
     zoom = 12;
-  var get_lon_lat = true;
+  var get_lon_lat = false;
   var scale_line = true;
 
   var def_points_style = {
@@ -67,11 +67,11 @@ var base_layers = [
   {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
 					       ),
 		   new OpenLayers.Layer.Google(
-					       "Google Physical",
+					       "Google Relief",
   {type: google.maps.MapTypeId.TERRAIN, visibility: false}
 					       ),
 		   new OpenLayers.Layer.Google(
-					       "Google Streets",
+					       "Google plan",
   {numZoomLevels: 20, visibility: false}
 					       ),
 		   new OpenLayers.Layer.Google(
@@ -89,6 +89,13 @@ EOS;
 <?php
 if ($complete) {
   echo '<div id="map"></div>'."\n";
+  echo '<div id="panel"></div>'."\n";
+  echo '<div id="position"></div>'."\n";
+  echo '<div id="extra">'."\n";
+  echo '<p>Autres contrôles'."\n";
+  echo '<label><input type="checkbox" id="tilt" checked="checked"/>vision à 45°</label>'."\n";
+  echo '<label><input type="checkbox" id="clic_pos"/>Position afichée sur clic</label>'."\n";
+  echo '</div>'."\n";
 } else {
   echo "<h1>Il faut indiquer des coordonnées.</h1>\n";
 }
