Added the ability to search around a specific position

index.php

@@ -92,7 +92,21 @@
 			}
 		?>
 		<div id="position">
-			<p><strong>Votre navigateur doit prendre en charge la géolocalisation pour que ce site puisse fonctionner correctement.<br/>Your browser must have geolocation capabilities for this site to display.</strong></p>
+			<form action="" method="get">
+				<p>
+					<label for="position">Chercher autour de :</label><br/>
+					<input type="text" name="position" id="position"/>
+				</p>
+				<p>
+					<input type="submit" value="Chercher"/>
+				</p>
+				<?php
+					foreach($_GET as $GET=>$param)
+					{
+						echo '<input type="hidden" name="'.htmlspecialchars($GET).'" value="'.htmlspecialchars($param).'"/>';
+					}
+				?>
+			</form>
 		</div>
 		<hr/>
 		<p id="thanks">Map is handled thanks to the <a href="http://leafletjs.com/">Leaflet</a> library, using © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors tiles. Reverse geolocation (Nominatim) are provided by the <a href="http://www.mapquest.com/" alt="MapQuest icon">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png"> open API. Routes are provided by <a href='http://project-osrm.org/'>the OSRM project</a> (OSRM is a free and open source program under GNU Affero GPL).</p>

js.js

@@ -2,11 +2,23 @@
 var tiles_provider = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
 var reverse_geolocation_provider = "http://open.mapquestapi.com/nominatim/v1/reverse.php";
 var directions_provider = "http://router.project-osrm.org/viaroute";
+var lat_long_provider = "http://open.mapquestapi.com/nominatim/v1/search.php"
 var email = "webmaster@phyks.me"; //Mettre votre adresse e-mail ici si vous utilisez Nominatim (cf Usage Policy de Nominatim)
 
 /* Script : */
 
 window.onload = function() {
+	function escapeHTML(unsafe)
+	{
+		return unsafe
+			.replace(/&/g, "&")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;")
+			.replace(/"/g, "&quot;")
+			.replace(/'/g, "&#039;");
+	}
+
+
 	function params() //Get all the parameters in the URL
 	{	
 		var t = location.search.substring(1).split('&');
@@ -14,7 +26,7 @@ window.onload = function() {
 	
 		for (var i=0; i<t.length; i++)
 		{
-			var x = t[ i ].split('=');
+			var x = t[i].split('=');
 			params[x[0]] = x[1];
 		}
 		return params;
@@ -29,51 +41,69 @@ window.onload = function() {
 	var available = false;
 	var update = false;
 	var refresh = false;
+	var ignore_position = false;
+	var position = '';
 
 	for(GET in params) //Define boolean to handle the different cases next
 	{
-		if(params_url != '')
+		if(GET != '')
-			params_url += '&';
-		
-		params_url += GET+'='+params[GET];
-		
-		switch(GET)
 		{
-			case 'map':
+			if(params_url != '')
-			map_get = true;
+				params_url += '&';
-			break;
 			
-			case 'available':
+			params_url += GET+'='+params[GET];
-			available = true;
-			break;
 			
-			case 'free':
+			switch(GET)
-			free = true;
+			{
-			break;
+				case 'map':
+				map_get = true;
+				break;
 				
-			case 'station':
+				case 'available':
-			station = true;
+				available = true;
-			break;
+				break;
 				
-			case 'update':
+				case 'free':
-			update = true;
+				free = true;
-			break;
+				break;
 				
-			case 'refresh':
+				case 'station':
-			refresh = true;
+				station = true;
-			break;
+				break;
+				
+				case 'update':
+				update = true;
+				break;
+				
+				case 'refresh':
+				refresh = true;
+				break;
+
+				case 'ignorePosition':
+				ignore_position = true;
+				break;
+
+				case 'position':
+				position = params[GET];
+				break;
+			}
 		}
 	}
 	
 	if(available || free || station)
 	{
-		if(update == false && navigator.geolocation) //We don't want to update and the navigator as geolocation capabilities
+		if(update == false && (navigator.geolocation || position != '')) //We don't want to update and the navigator as geolocation capabilities or we specified a position
 		{
 			function successFunction(position)
 			{
 				var latitude = position.coords.latitude; //Get the current position
 				var longitude = position.coords.longitude;
 
+				getBikes(latitude, longitude);
+			}
+
+			function getBikes(latitude, longitude)
+			{
 				var xhr; //Define xhr variables
 				try 
 				{  
@@ -261,7 +291,7 @@ window.onload = function() {
 	
 					xhr.open("POST", "ajax.php",  true); //xhr handle the data about stations
 					xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-					xhr.send("latitude=" + latitude +  "&longitude=" + longitude + "&" + params_url + "&email=" + email + "&directions_provider="+  encodeURI(directions_provider) +"&reverse_geolocation_provider="+ encodeURI(reverse_geolocation_provider));
+					xhr.send("latitude=" + latitude +  "&longitude=" + longitude + "&" + params_url + "&email=" + email + "&directions_provider="+ encodeURI(directions_provider) +"&reverse_geolocation_provider="+ encodeURI(reverse_geolocation_provider));
 				}
 				
 				if(map_get == true || station) //If we need a map
@@ -355,18 +385,89 @@ window.onload = function() {
 				}
 			}
 
-			if(refresh) //If refresh, we want to force a new position (non cached)
+			if(position == '' && !ignore_position) 
-				navigator.geolocation.getCurrentPosition(successFunction, errorFunction, {enableHighAccuracy:true,  maximumAge:0, timeout:2000});
+			{
-			else
+				if(refresh) //If refresh, we want to force a new position (non cached)
-				navigator.geolocation.getCurrentPosition(successFunction, errorFunction, {enableHighAccuracy:true,  maximumAge:60000, timeout:2000}); //Else, we are ok with 60 seconds old position
+					navigator.geolocation.getCurrentPosition(successFunction, errorFunction, {enableHighAccuracy:true,  maximumAge:0, timeout:2000});
+				else
+					navigator.geolocation.getCurrentPosition(successFunction, errorFunction, {enableHighAccuracy:true,  maximumAge:60000, timeout:2000}); //Else, we are ok with 60 seconds old position
+			}
+			else if(position != '')
+			{
+				var latitude = 0;
+				var longitude = 0;
+
+				var xhr; //Define xhr variables
+				try 
+				{  
+					xhr = new XMLHttpRequest();
+				}
+				catch (e)
+				{
+					try 
+					{   
+						xhr = new ActiveXObject('Msxml2.XMLHTTP');
+					}
+					catch (e2)
+					{
+						try 
+						{  
+							xhr = new ActiveXObject('Microsoft.XMLHTTP');
+						}
+						catch (e3) 
+						{  
+							xhr = false;
+						}
+					}
+				}
+
+				if(xhr == false)
+				{
+					document.getElementById("position").innerHTML = "<p>Une erreur a été rencontrée. Veuillez réessayer.</p>";
+				}
+				else
+				{
+					xhr.onreadystatechange  = function()
+					{
+						if(xhr.readyState  == 4)
+						{
+							if(xhr.status  == 200)
+							{
+								var json = JSON.parse(xhr.responseText); //Parse the response
+
+								latitude = json[0].lat;
+								longitude = json[0].lon;
+
+								if(latitude == 0 && longitude == 0)
+									document.getElementById("position").innerHTML = "<p>Une erreur a été rencontrée. Veuillez réessayer.</p>";
+								else
+									getBikes(latitude, longitude);
+							}
+						}
+					}
+				}
+				
+				xhr.open("GET", lat_long_provider+"?format=json&q="+encodeURI(position+", Paris, France"),  true); //xhr handle the data about stations
+				xhr.send();
+			}
 		}
 		else
 		{
-			document.getElementById("position").innerHTML = "<p>Votre navigateur doit prendre en charge la géolocalisation pour que ce site puisse fonctionner correctement.</p>";
+			var input_params = '';
+
+			for(GET in params)  //Define hidden input to keep params
+			{
+				if(GET != '')
+				{
+					input_params += "<input type='hidden' name='"+GET+"' value='"+params[GET]+"'/>";
+				}
+			}
+
+			document.getElementById("position").innerHTML = '<form action="index.php" method="get"><p><label for="position">Chercher autour de :</label><br/><input typ="text" name="position" id="position"/></p><p><input type="submit" value="Chercher"/></p>'+escapeHTML(input_params)+'</form>';
 		}
 	}
 	else //If we didn't choose what to do, display the choices
 	{
-		document.getElementById("position").innerHTML = "<p><a href='?available=1'><img src='images/velo.png' alt='Retirer un vélo'/></a><span id='ou'> ou </span><a href='?free=1'><img src='images/parking.png' alt='Rendre un vélo'/></a>";
+		document.getElementById("position").innerHTML = "<p><a href='?available=1&"+params_url+"'><img src='images/velo.png' alt='Retirer un vélo'/></a><span id='ou'> ou </span><a href='?free=1&"+params_url+"'><img src='images/parking.png' alt='Rendre un vélo'/></a></p><p><a href='?ignorePosition=1&"+params_url+"'>Ignorer la géolocalisation</a></p>";
 	}
 }