osrm-backend/Docs/WebFrontend/Route.js

/*
 *  Open Source Routing Machine (OSRM) - Web (GUI) Interface
 *	Copyright (C) Pascal Neis, 2011
 *
 *	This program is free software; you can redistribute it and/or modify
 *	it under the terms of the GNU AFFERO General Public License as published by
 *	the Free Software Foundation; either version 3 of the License, or
 *	any later version.
 *
 *	This program is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *	GNU General Public License for more details.
 *
 *	You should have received a copy of the GNU Affero General Public License
 *	along with this program; if not, write to the Free Software
 *	Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
 *	or see http://www.gnu.org/licenses/agpl.txt.
 */
 
/**
 * Title: Route.js
 * Description: JS file for routing
 *
 * @author Pascal Neis, pascal@neis-one.org 
 * @version 0.2 2011-06-23
 */

//======================
// OBJECTS
//Map
var HOST_ROUTING_URL = 'http://localhost:5000/viaroute';
//var HOST_ROUTING_URL = 'http://routingdemo.geofabrik.de/route-via/';
var HOST_WEBSITE = 'http://map.project-osrm.org/';//location.host

var ISCALCULATING = false;
var EPSG_4326 = new OpenLayers.Projection("EPSG:4326");
var EPSG_900913 = new OpenLayers.Projection("EPSG:900913");
var allRoutePoints = [];
//======================
// FUNCTIONS
/*
 * routing()-Function to create and send route request
 */
function routing(isDragRoute){
	//Check if startpoint is set		
	if(!isStartPointSet){
		//alert("Please set your Start location first!");
		document.getElementById('information').innerHTML =  '<p class="infoHLRed">Please set your Start location first!</p>';
		return;
	}
	//Check if endpoint is set
	if(!isEndPointSet){ 
		//alert("Please set your Destination first!");
		document.getElementById('information').innerHTML =  '<p class="infoHLRed">Please set your Destination first!</p>';
		return;
	}

	//Check if already a route is planning
	if(!isDragRoute){ ISCALCULATING = false; }
	if(ISCALCULATING){ return; }
	else{ ISCALCULATING = true; }
	
	//Get Coordinates of the Start and Endpoint
	var startFeat = getMarkerByName('start');
	var endFeat = getMarkerByName('end');
	var from = new OpenLayers.LonLat(startFeat.geometry.x,startFeat.geometry.y).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
	var to = new OpenLayers.LonLat(endFeat.geometry.x,endFeat.geometry.y).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));

	//Send Request
	var script = document.createElement('script');
    script.type = 'text/javascript';
    
    var callBackFunction = 'showResultsRoute';
    var instructions = '&geomformat=cmp&instructions=true';
    if(isDragRoute){
       callBackFunction = 'showResultsDragRoute';
       instructions = '&geomformat=cmp&instructions=false';
       document.getElementById('information').innerHTML =  '<p class="infoHL">Release mouse button to get Route Information!</p>(If no Route Summary is diplayed, press the Route!-button)';
    }
    
    script.src = HOST_ROUTING_URL + "?loc="+from.lat + ',' + from.lon;
    for(var i = 0; i < viaPointsVector.length; i++) {
		script.src += ('&loc=' + viaPointsVector[i][0] + ',' + viaPointsVector[i][1]);
	}
	script.src += '&loc=' + to.lat + ',' + to.lon;
    script.src +='&z='+this.map.getZoom()+'&output=json&jsonp='+callBackFunction+instructions;
    document.body.appendChild(script);
}

/*
 * reroute()-Function
 */
function reroute() {
	if(!isStartPointSet || !isEndPointSet){ return; }	
	routing(false);
}

/*
 * showResultsDragRoute()-Function to show route result for drag-route
 */
function showResultsDragRoute(response) {
    if (response) {
    	//Display Route
    	showRouteGeometry(response);
    }
  	markersLayer.clearMarkers();
    ISCALCULATING = false;
}

/*
 * showResultsRoute()-Function to show route result
 */
function showResultsRoute(response) {
    if (response) {
		//Display Route
		if(document.getElementById("cbNoNames").checked == true){
			showNoNameStreets(response);
		}
		else{
			showRouteGeometry(response);
		}
		
		//Save Via Points that come with route
		var lengthOfArray = response.via_points.length;
		var i = 0;
		viaPointsVector.length = 0;
		viaPointsVector = response.via_points.slice(0);
		paintViaPoints();
 
  		//Create Link of the route
		var startFeat = getMarkerByName('start');
		var endFeat = getMarkerByName('end');
		var from = new OpenLayers.LonLat(startFeat.geometry.x,startFeat.geometry.y).transform(EPSG_900913,EPSG_4326);
		var to = new OpenLayers.LonLat(endFeat.geometry.x,endFeat.geometry.y).transform(EPSG_900913,EPSG_4326);
		var routelink = '<div id="routelink"><input name="routelink" type="submit" title="Get Link" onClick="createShortLink(\''+HOST_WEBSITE+'?fr='+from.lat.toFixed(6)+','+from.lon.toFixed(6)+'&to='+to.lat.toFixed(6)+','+to.lon.toFixed(6);
		for(i = 0; i < viaPointsVector.length; i++) {
				routelink += "&via=" + viaPointsVector[i][0] + "," + viaPointsVector[i][1];
		}
		routelink += '\');" value="Get Link"></div>';

		//Link for the GPX Download 
		var gpxLink = '(<a href="'+HOST_ROUTING_URL+'?loc='+from.lat.toFixed(6)+','+from.lon.toFixed(6);
		for(i = 0; i < viaPointsVector.length; i++) {
				gpxLink += "&loc=" + viaPointsVector[i][0] + "," + viaPointsVector[i][1];
		}
		gpxLink += '&loc='+to.lat.toFixed(6)+','+to.lon.toFixed(6)+'&z='+this.map.getZoom()
		gpxLink += '&output=gpx">Get GPX File</a>)';;

        //Show Route Summary
        var output = '<p class="routeSummaryHL">Some information about your Way <br> from \'<span class="routeSummaryHLlight">'+response.route_summary.start_point+'</span>\' to \'<span class="routeSummaryHLlight">'+response.route_summary.end_point+'</span>\'</p>';
        output += '<p class="routeSummary">Distance: <span class="routeSummarybold">'+response.route_summary.total_distance/1000+' km</span> - Duration: <span class="routeSummarybold">'+secondsToTime(response.route_summary.total_time)+'</span></p><p>'+routelink+'</p><p><span class="routeInstructionsHL">The Route-Instructions:</span> '+gpxLink+'</p>';
        //Show Route Instructions
        output += '<table>';
        lengthOfArray = response.route_instructions.length;

        var rowstyle='routeInstructionsEven';
        var indexPos = response.route_instructions[0][3];
		var point = allRoutePoints[indexPos];
		
		//Hack to suppress output of initial "0m" instruction		
		output += '<tr class="'+rowstyle+'"><td align="right" valign="top"><span class="routeSummarybold">1.</span></td><td class="'+rowstyle+'"><a href="#" class="nolinkStyle" onclick="setMapCenter(new OpenLayers.LonLat('+point.x+','+point.y+'));">'+response.route_instructions[0][0]+' on '+response.route_instructions[0][1];
		if(response.route_instructions[0][2] != 0)
			output += ' for '+getDistanceWithUnit(response.route_instructions[0][2]);
	   	output += '</a></td></tr>';
 
		for (i = 1; i < lengthOfArray; i++) {
			//console.log(response.route_instructions[i]);
        	//odd or even ?
        	if(i%2==0){ 
 				rowstyle='routeInstructionsEven'; 
 			} else {
 				rowstyle='routeInstructionsOdd';
 			}	
			
            indexPos = response.route_instructions[i][3];
			//console.log('setting : ' + response.route_instructions[i] + ' at ' + allRoutePoints[indexPos]);
			point = allRoutePoints[indexPos];
 			       	
            output += '<tr class="'+rowstyle+'"><td align="right" valign="top"><span class="routeSummarybold">'+(i+1)+'.</span></td><td class="'+rowstyle+'"><a href="#" class="nolinkStyle" onclick="setMapCenter(new OpenLayers.LonLat('+point.x+','+point.y+'));">'+response.route_instructions[i][0]+' on '+response.route_instructions[i][1]+' for '+getDistanceWithUnit(response.route_instructions[i][2])+'</a></td></tr>';
        }
		var rowstyle='routeInstructionsOdd';
       	if(i%2==0){ rowstyle='routeInstructionsEven'; }
		if( lengthOfArray > 0) {
	        var point = allRoutePoints[allRoutePoints.length-1];
	        output += '<tr class="'+rowstyle+'"><td align="right" valign="top"><span class="routeSummarybold">'+(i+1)+'.</span></td><td class="'+rowstyle+'"><a href="#" class="nolinkStyle" onclick="setMapCenter(new OpenLayers.LonLat('+point.x+','+point.y+'));">You have reached your destination</a></td></tr>';
        }
		output += '</table>';
        //alert(vectorLayerRoute.features[0].geometry.getVertices());
        
        document.getElementById('information').innerHTML = output;
	    ISCALCULATING = false;
		ISCALCULATINGVIA = false;
    }
}

/*
 * showRouteGeometry()-Function to show route result
 */
function showRouteGeometry(response) {
	if (response) {
	 	allRoutePoints.length = 0;
    	// now with compression of the route geometry
        var geometry = decodeRouteGeometry(response.route_geometry, 5);
       	var lengthOfArray = geometry.length;
        var points = [];
        points.length = lengthOfArray;
        var points = [];
 		//delete any previously displayed via route
		vectorLayerViaRoute.removeFeatures(vectorLayerViaRoute.features);
		vectorLayerRoute.removeAllFeatures();
 
        //Create Route Layer for Display
        for (var i = 0; i < lengthOfArray; i++) {
            var point = new OpenLayers.Geometry.Point(geometry[i][1], geometry[i][0]).transform(EPSG_4326, EPSG_900913);
            allRoutePoints.push(point);
			points.push(point);
            	
			if(i % 1024 == 0 && i>0 || i==lengthOfArray-1){
/*	 			var feature2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), null, {
					strokeColor: "#000066",
					strokeOpacity: 1,
					strokeWidth: 9
				});

	 			var feature1 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), null, {
					strokeColor: "#ffffff",
					strokeOpacity: 0.75,
					strokeWidth: 7
				});
*/

	 			var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), null, {
					strokeColor: "#0033ff",
					strokeOpacity: 0.7,
					strokeWidth: 5
				});
			//	vectorLayerRoute.addFeatures([feature2]);
			//	vectorLayerRoute.addFeatures([feature1]);
				vectorLayerRoute.addFeatures([feature]);
				points = [];
				points.push(point);
			}
        }
   }
}

/*
 * showNoNameStreets()-Function to show route result
 */
function showNoNameStreets(response) {
    if (response) {
    	allRoutePoints.length = 0;
    	vectorLayerRoute.removeFeatures(vectorLayerRoute.features);
      	// now with compression of the route geometry
        var geometry = decodeRouteGeometry(response.route_geometry, 5);
       	var lengthOfArray = geometry.length;
        var points = [];
        points.length = lengthOfArray;
        
        //Check if a instruction has no name !
        var colors = [];
        if(true){
        	var instrucLength = response.route_instructions.length;
        	for (var i = 0; i < instrucLength; i++) {
        		var indexPos = response.route_instructions[i][3];
        		var streetName = response.route_instructions[i][1];
				if(streetName == ''){ colors[indexPos] = "#FF00FF"; }
				else{ colors[indexPos] = "#0033ff"; }
        	}
        }

 		//delete any previously displayed via route
		vectorLayerViaRoute.removeFeatures(vectorLayerViaRoute.features);
		vectorLayerRoute.removeAllFeatures();
        
        //Create Route Layer for Display
        var color = "#0033ff";
        var changeColor = false;
        for (var i = 0; i < lengthOfArray; i++) {
            var point = new OpenLayers.Geometry.Point(geometry[i][1], geometry[i][0]).transform(EPSG_4326, EPSG_900913);
            points.push(point);
            allRoutePoints.push(point);
				
            if(colors[i] != undefined){ changeColor=true;}
            	
			if(i % 1024 == 0 && i>0 || i==lengthOfArray-1 || changeColor){
				var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), null, {
					strokeColor: color,
					strokeOpacity: 0.7,
					strokeWidth: 5
				});
				vectorLayerRoute.addFeatures([feature]);
				points = [];
				points.push(point);
				
				if(colors[i] != undefined){ color = colors[i]; }
				changeColor=false;
			}
        }
   }
}

/*
 * secondsToTime()-Function to transform seconds to a time string
 */
function secondsToTime(seconds){
   seconds = parseInt(seconds);
   minutes = parseInt(seconds/60);
   seconds = seconds%60;
   hours = parseInt(minutes/60);
   minutes = minutes%60;
   //return stunden+':'+minuten+':'+seconds;
   if(hours==0){
   	return minutes+' min(s)';
   }
   else{
   	return hours+' h '+minutes+' min(s)';
   }
}

/*
 * getDistanceWithUnit()-Function to return a distance with units
 */
function getDistanceWithUnit(distance){
	distance = parseInt(distance);
	if(distance >= 1000){ return (parseInt(distance/1000))+' km'; }
	else{ return distance+' m'; }
}

/*
 * setMapCenter()-Function to add a marker and center the map
 */
function setMapCenter(lonlat){
	//lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
	//console.log('zooming to :' + lonlat);
	
	//Add Marker
	markersLayer.clearMarkers();
	var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon = new OpenLayers.Icon('img/marker.png',size,offset);
    markersLayer.addMarker(new OpenLayers.Marker(lonlat,icon));

	//Hack - FIXME !
	map.setCenter(new OpenLayers.LonLat(lonlat.lon-200, lonlat.lat), 17);
}

/*
 * decodeRouteGeometry()-Function to decode encoded Route Geometry
 */
function decodeRouteGeometry(encoded, precision) {
	precision = Math.pow(10, -precision);
	var len = encoded.length, index=0, lat=0, lng = 0, array = [];
	while (index < len) {
		var b, shift = 0, result = 0;
		do {
			b = encoded.charCodeAt(index++) - 63;
			result |= (b & 0x1f) << shift;
			shift += 5;
		} while (b >= 0x20);
		var dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
		lat += dlat;
		shift = 0;
		result = 0;
		do {
			b = encoded.charCodeAt(index++) - 63;
			result |= (b & 0x1f) << shift;
			shift += 5;
		} while (b >= 0x20);
		var dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
		lng += dlng;
		array.push([lat * precision, lng * precision]);
	}
	return array;
}

/*
 * createShortLink()-Function to "create" shortlink of a route
 */
function createShortLink(str){
	var script = document.createElement('script');
    script.type = 'text/javascript';
    var callBackFunction = 'showRouteLink';
    script.src = 'http://map.project-osrm.org/shorten/'+str+'&jsonp=showRouteLink';  	
    document.body.appendChild(script);
}

/*
 * showRouteLink()-Function
 */
function showRouteLink(response){
	document.getElementById('routelink').innerHTML = '<span class="routeSummarybold"> >> Your ShortLink:</span> <a href="'+response.ShortURL+'">'+response.ShortURL+'</a>';
}