évolution template de démonstration du service

development.ini.sample

@@ -15,6 +15,12 @@
     pyramid_debugtoolbar
 
 sqlalchemy.url = sqlite:///%(here)s/db.sqlite3
+
+osrm.hostname=osrm.recette.xcg.global
+osrm.scheme=http
+
+
+
 # By default, the toolbar only appears for clients from IP addresses
 # '127.0.0.1' and '::1'.
 # debugtoolbar.hosts = 127.0.0.1 ::1

pytsprf/assets/css/service.css

+#map {
+	width: 300px;
+	height: 300px;
+}
\ No newline at end of file

pytsprf/assets/js/pytsprf.js

+function addPoint(location) {
+
+    var pointObject = new Point(location);
+    Window.latlng.push(pointObject);
+
+    
+}
+
+function Point(location) {
+
+    this.lat = location[0];
+    this.lng = location[1];
+}
+
+function onMapClick(e) {
+
+    $.when(locate(e.latlng)).done(function (data) {
+
+        var nearest_coord = L.latLng(
+           data.mapped_coordinate[0],
+           data.mapped_coordinate[1] 
+        ),
+            points,
+            marker,
+            k;
+
+        // check status
+        if (data.status !== 0) {
+
+            return;
+        }
+
+        // eliminate non-coherent response
+        if (Math.abs(e.latlng.lat - nearest_coord.lat) > self.degree_precision ||
+                Math.abs(e.latlng.lng - nearest_coord.lng) > self.degree_precision) {
+            return;
+        }
+        marker = L.marker([
+            nearest_coord.lat,
+            nearest_coord.lng
+        ]).on('click', self.onMarkerClick, self);
+
+	var loaction = [nearest_coord.lat, nearest_coord.lng];
+    	addPoint(location);
+
+		var appIcon = L.icon({
+				    iconUrl: '../assets/leaflet/images/marker-icon.png',
+				    shadowUrl: '../assets/leaflet/images/marker-shadow.png',
+
+				    iconSize:     [38, 95], // size of the icon
+				    shadowSize:   [50, 64], // size of the shadow
+				    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
+				    shadowAnchor: [4, 62],  // the same for the shadow
+				    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
+				});
+
+		L.marker([nearest_coord.lat, nearest_coord.lng], {icon: appIcon}).addTo(Window.map);
+
+    });
+}
+
+         // this function return the nearest lat/long couple
+function locate(coord) {
+
+		var lat = coord.lat;
+		var lng = coord.lng;
+		var url = "http://" + this.osrm_hostname + "/locate?loc=" + lat.toFixed(5) + "," + lng.toFixed(5) 
+
+		var data
+		   
+		data = {'mapped_coordinate':[lat, lng], status:0};
+		   
+		return data; 
+
+ /*            return $.ajax({
+                url: url,
+                dataType: "json"
+            }); */
+        }
+
+
+
+
+
+	function execute() {
+
+
+	       $.ajax({
+	        type: 'POST',
+	        url: '/tsp',
+	        contentType: "application/json; charset=utf-8",
+	        headers:{'X-Messaging-Token':'xxx@domain.com-NDY2Y2JmZWMyMDVlYjVjMTJmMmM4YjljZjQ1YjA1YTA1YWRjMGQyZGJiOWEyZmYzNjU0MTFhYzA5OWYxYzExZQ=='},
+	        data: JSON.stringify(Window.latlng),
+	        success: function(response) {
+	            response = JSON.parse(response);
+
+	            var waypoints = Array();
+	                                 
+	            var route = response.route;
+	            
+alert(route);
+	  
+	            
+	    
+	        },
+	            error: function(error) {
+alert(error.responseText);
+
+	            }
+	        
+	            
+	            
+	        });
+	        
+	        return false;    
+	           
+	
+	};
+
+function initmap() {
+
+            this.data = {};
+	    this.osrm_hostname = "osrm.recette.xcg.global";
+            this.degree_precision = 0.01;
+            this.max_viapoints = 50;
+
+
+Window.map = L.map('map').setView([49.866667, 2.333333], 13);
+Window.latlng =Array();
+
+url = 'http://{s}.mqcdn.com/tiles/1.0.0/{id}/{z}/{x}/{y}.png';
+
+    var MQCDN_ATTR = '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">';
+    var SUBDOMAINS = ['otile1', 'otile2', 'otile3', 'otile4'];
+
+
+    var satelite = L.tileLayer(url, {
+        id: 'map',
+        attribution: MQCDN_ATTR,
+        subdomains: SUBDOMAINS
+    }).addTo(Window.map);
+
+    Window.map.on('click', onMapClick);
+
+	
+}