commit f524783f735489c888ed04308ff5824029a8af43
Author: Marc Souviron <marc.souviron@vous-et-nous.com>
Date:   Sun Aug 25 23:39:03 2013 +0200

    permet la visualisation d'axes horizontaux via OSM

diff --git a/images/ptref.png b/images/ptref.png
new file mode 100644
index 0000000..71e4c17
Binary files /dev/null and b/images/ptref.png differ
diff --git a/js/pano.js b/js/pano.js
index dbf31b7..c40932c 100644
--- a/js/pano.js
+++ b/js/pano.js
@@ -8,6 +8,9 @@ if (cap_max == undefined) var cap_max = cap_min+360;
 if (ref_points == undefined) var ref_points = new Array();
 if (image_loop == undefined) var image_loop = true;
 
+var pt_alt;
+var pt_lat;
+var pt_lon;
 
 var debug_mode = false;
 var canvas;
@@ -173,9 +176,9 @@ function drawDecorations(ox, oy, tx, ty, twidth, theight) {
 
 function insert_drawn_point(lat, lon, alt) {
     var rt = 6371;  // Rayon de la terre
-    var alt1 = document.getElementById('pos_alt').childNodes[0].nodeValue;
-    var lat1 = document.getElementById('pos_lat').childNodes[0].nodeValue*Math.PI/180;
-    var lon1 = document.getElementById('pos_lon').childNodes[0].nodeValue*Math.PI/180;
+    var alt1 = pt_alt;
+    var lat1 = pt_lat*Math.PI/180;
+    var lon1 = pt_lon*Math.PI/180;
     var alt2 = alt;
     var lat2 = lat*Math.PI/180;
     var lon2 = lon*Math.PI/180;
@@ -713,6 +716,7 @@ function manage_ref_points(e) {
     var sel_pt = document.getElementById('sel_point');
     var do_insert = document.getElementById('do-insert');
     var do_delete = document.getElementById('do-delete');
+    var show_cap = document.getElementById('show-cap');
     var pos_x = nmodulo(last.x + e.pageX - canvas_pos.x - canvas.width/2, zm.im.width);
     var pos_y = last.y + e.pageY - canvas_pos.y - canvas.height/2;
     for(var i = 0; i < zm.pt_list.length; i++) {
@@ -724,6 +728,8 @@ function manage_ref_points(e) {
     }
     do_delete.onclick = function() {delete_ref_point(insrt)};
     do_insert.onclick = function() {insert_ref_point(insrt, e.pageX-canvas_pos.x, e.pageY-canvas_pos.y)};
+    var res = zm.get_cap_ele(pos_x, zm.im.height/2 - pos_y);
+    show_cap.onclick = function() {window.open("show_capline.php?cap="+res.cap+'&org_lat='+pt_lat+'&org_lon='+pt_lon)};
     return false;
 }
 
@@ -815,6 +821,10 @@ function paramOut(e) {
 }
 
 window.onload = function() {	
+    pt_alt = document.getElementById('pos_alt').childNodes[0].nodeValue;
+    pt_lat = document.getElementById('pos_lat').childNodes[0].nodeValue;
+    pt_lon = document.getElementById('pos_lon').childNodes[0].nodeValue;
+
     localisation = document.getElementById("locadraw");
     adding = document.getElementById("adding");
     canvas = document.getElementById("mon-canvas");
diff --git a/js/utils_osm.js b/js/utils_osm.js
new file mode 100644
index 0000000..c42c4e6
--- /dev/null
+++ b/js/utils_osm.js
@@ -0,0 +1,167 @@
+function draw_map() {
+
+    var zcontrol;
+    if (typeof zoom_control != 'undefined') {
+	switch (zoom_control) {
+	case 'full':
+	    zcontrol = new OpenLayers.Control.PanZoomBar();
+	    break;
+	case 'light':
+	default:
+	    zcontrol = new OpenLayers.Control.Zoom();
+	}
+    } else zcontrol = new OpenLayers.Control.Zoom();
+
+    var map = new OpenLayers.Map({
+	div: "map",
+        zoom: typeof zoom == 'undefined' ? 10:zoom,
+	controls:[zcontrol,
+		  new OpenLayers.Control.KeyboardDefaults(),
+		  new OpenLayers.Control.Navigation()],
+    });
+
+    if (typeof scale_line != 'undefined' && scale_line == true) {
+	map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: ''}));
+    }
+
+    map.addLayer(new OpenLayers.Layer.OSM());
+
+    if (typeof contour != 'undefined') contours = [contour];
+    if (typeof contours == 'undefined') contours = new Array;
+    for (var i = 0; i < contours.length; i++) {
+	var ct = contours[i];
+	var cntr = new OpenLayers.Layer.Vector("contour_"+i, {
+	    strategies: [new OpenLayers.Strategy.Fixed()],
+	    projection: new OpenLayers.Projection("EPSG:4326"),
+	    styleMap: new OpenLayers.StyleMap({
+		strokeWidth:     ct.strokeWidth,
+		strokeColor:     ct.strokeColor,
+		strokeOpacity:   ct.strokeOpacity,
+		fillOpacity:     ct.fillOpacity,
+		fillColor:       ct.fillColor
+	    }),
+	    protocol: new OpenLayers.Protocol.HTTP({
+		url: ct.url,
+		format: new OpenLayers.Format.OSM(),
+	    }),
+	    eventListeners: {
+		"featuresadded": function () {
+		    if (typeof fit_contours == 'undefined' || fit_contours) this.map.zoomToExtent(this.getDataExtent());
+		}
+	    }
+	});
+	map.addLayer(cntr);
+    }
+
+    if (typeof ref_point != 'undefined') ref_points = [ref_point];
+    if (typeof ref_points != 'undefined') {
+	refpts_layer = new OpenLayers.Layer.Vector("ref_points", {projection: "EPSG:4326"}); 
+	var selectMarkerControl = new OpenLayers.Control.SelectFeature(refpts_layer, {
+	    onSelect: function(feature) {
+		var le_popup = new OpenLayers.Popup.FramedCloud("Popup",
+								feature.attributes.lonlat,
+								null,
+								feature.attributes.description,
+								null,
+								true);
+		                                                //function() {selectMarkerControl.unselect(feature)});
+		feature.popup = le_popup;
+		map.addPopup(le_popup);
+	    },
+	    onUnselect: function(feature) {
+		//alert(feature.id);
+		map.removePopup(feature.popup);
+		feature.popup.destroy();
+		feature.popup = null;
+	    },
+	    multiple: true,
+	    toggle: true,
+	});
+	map.addControl(selectMarkerControl);
+	
+	selectMarkerControl.activate();
+	map.addLayer(refpts_layer);
+	
+
+	if (typeof def_points_style == 'undefined') def_points_style = {};
+	var def_pt = {
+	    icon_url:    def_points_style.icon_url,
+	    icon_width:  def_points_style.icon_width,
+	    icon_height: def_points_style.icon_height,
+	    showPopup:   def_points_style.showPopup   ? def_points_style.showPopup:false,
+	    icon_shiftX: def_points_style.icon_shiftX ? def_points_style.icon_shiftX:0,
+	    icon_shiftY: def_points_style.icon_shiftY ? def_points_style.icon_shiftY:0,
+	    opacity:     def_points_style.opacity ? def_points_style.opacity:1}
+	
+	for (var i = 0; i < ref_points.length; i++) {
+	    var pt = ref_points[i];
+            var ptGeo = new OpenLayers.Geometry.Point(pt.lon, pt.lat);
+            ptGeo.transform("EPSG:4326", map.getProjectionObject());
+	    var LonLat = new OpenLayers.LonLat(pt.lon, pt.lat).transform("EPSG:4326", map.getProjectionObject());
+	    map.setCenter(LonLat);
+	    var laFeature = new OpenLayers.Feature.Vector(ptGeo,
+							  {description:pt.descr, lonlat: LonLat},
+							  {externalGraphic: pt.icon_url?    pt.icon_url:def_pt.icon_url,
+							   graphicWidth:    pt.icon_width?  pt.icon_width:def_pt.icon_width,
+							   graphicHeight:   pt.icon_height? pt.icon_height:def_pt.icon_height,
+							   graphicXOffset:  pt.icon_shiftX? pt.icon_shiftX:def_pt.icon_shiftX,
+							   graphicYOffset:  pt.icon_shiftY? pt.icon_shiftY:def_pt.icon_shiftY,
+							   graphicOpacity:  pt.opacity?     pt.opacity:def_pt.opacity,
+							   title:           pt.title?       pt.title :''});
+	    if (i == 0) elFeature = laFeature;
+            refpts_layer.addFeatures(laFeature);
+	    if (pt.showPopup) selectMarkerControl.select(laFeature);
+	}
+	if (typeof zoom == 'undefined') map.zoomToExtent(refpts_layer.getDataExtent());
+    }
+
+    if (typeof ref_line != 'undefined') ref_lines = [ref_line];
+    if (typeof ref_lines != 'undefined') {
+	if (typeof def_line_style == 'undefined') def_line_style = {};
+	var def_ln = {
+	    width:       def_line_style.width? def_line_style.width:2,
+	    color:       def_line_style.color? def_line_style.color:'#00F',
+	    length:      def_line_style.length? def_line_style.length:20000,
+	    opacity:     def_line_style.opacity? def_line_style.opacity:1}
+	
+	var lineLayer = new OpenLayers.Layer.Vector("ref_lines"); 
+	map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));                                     
+	for (var i = 0; i < ref_lines.length; i++) {
+	    var ln = ref_lines[i];
+	    if(isNaN(ln.cap)) {
+		var pt = {lon: ln.lon2, lat: ln.lat2};
+	    } else {
+		var LonLat = new OpenLayers.LonLat(ln.lon1, ln.lat1);
+		var dist = ln.length? ln.length:def_ln.length;
+		var pt = OpenLayers.Util.destinationVincenty(LonLat, ln.cap, dist);
+	    }
+	    var points = new Array(
+		new OpenLayers.Geometry.Point(ln.lon1, ln.lat1),
+		new OpenLayers.Geometry.Point(pt.lon, pt.lat)
+	    );
+	    points[0].transform("EPSG:4326", map.getProjectionObject());
+	    points[1].transform("EPSG:4326", map.getProjectionObject());
+	    var line = new OpenLayers.Geometry.LineString(points);
+
+	    var style = { 
+		strokeColor:   ln.color? ln.color:def_ln.color, 
+		strokeWidth:   ln.width? ln.width:def_ln.width,
+		strokeOpacity: ln.width? ln.opacity:def_ln.opacity
+	    };
+
+	    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
+	    lineLayer.addFeatures([lineFeature]);
+	}
+	map.addLayer(lineLayer);                    
+    }
+    if (typeof get_lon_lat != 'undefined' && get_lon_lat) {
+	map.events.register("click", map, function(e) {
+	    var position = map.getLonLatFromViewPortPx(e.xy);
+	    position.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
+	    alert(position.lon.toFixed(3) + ', ' + position.lat.toFixed(3));
+	});
+    }
+}
+
+if (typeof addLoadEvent == 'function') addLoadEvent(draw_map);
+else window.onload = draw_map;
diff --git a/panorama.php b/panorama.php
index 61aebfb..4ff02ac 100644
--- a/panorama.php
+++ b/panorama.php
@@ -184,6 +184,7 @@ EO_FORM_PARAM;
        echo "<input type=\"button\" id=\"do-insert\" value=\"insérer\"/>\n";
        echo "<input type=\"button\" id=\"do-delete\" value=\"suppimer\"/>\n";
        echo "<input type=\"button\" id=\"do-cancel\" value=\"annuler\"/>\n";
+       echo "<input type=\"button\" id=\"show-cap\" value=\"visualiser cet axe sur OSM\"/>\n";
        echo "</p>\n";
      }
      
diff --git a/show_capline.php b/show_capline.php
new file mode 100644
index 0000000..7e5ccf9
--- /dev/null
+++ b/show_capline.php
@@ -0,0 +1,68 @@
+<head>
+  <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="style.css" />
+<?php
+   if (isset($_REQUEST['cap']) && isset($_REQUEST['org_lat']) && isset($_REQUEST['org_lon'])) {
+     $cap = $_REQUEST['cap'];
+     $org_lat = $_REQUEST['org_lat'];
+     $org_lon = $_REQUEST['org_lon'];
+     $complete = true;
+   } else {
+     $complete = false;
+   }
+$pt_comment = 'Le point de départ';
+if ($complete) {
+  echo <<< EOS
+    <script>
+    zoom = 12;
+  var get_lon_lat = false;
+  var scale_line = true;
+
+  var def_points_style = {
+  showPopup: false,
+  icon_width: 24,
+  icon_height: 24,
+  icon_shiftX: -12,
+  icon_shiftY: -24,
+  opacity: 0.7}
+
+  var ref_point = {
+  lon: $org_lon,
+  lat: $org_lat,
+  icon_url: 'images/ptref.png',
+  descr: '<div id="bulle">$pt_comment</div>',
+  showPopup: true,
+  icon_width: 24,
+  icon_height: 24,
+  icon_shiftX: -12,
+  icon_shiftY: -24,
+  title: 'chez nous'
+  };
+
+  var ref_line = {
+  lon1: $org_lon,
+  lat1: $org_lat,
+  cap: $cap,
+  width: 2,
+  length: 120000,
+  color: '#F00'
+  };
+  </script>
+  <script src="http://openlayers.org/api/OpenLayers.js"></script>
+  <script src="js/utils_osm.js"></script>
+EOS;
+ }
+?>
+</head>
+<body>
+<?php
+if ($complete) {
+  echo '<div id="map"></div>'."\n";
+ } else {
+  echo "<h1>Il faut indiquer des coordonnées.</h1>\n";
+ }
+?>
+</body>
+</html>
