Merge branch 'master' into gh-pages

RouteRater · Apr 20, 2015 · 46b8cdb · 46b8cdb
2 parents 033b116 + bb0320e
commit 46b8cdb
Show file tree

Hide file tree

Showing 39 changed files with 210 additions and 52 deletions.
diff --git a/images/cleardot.gif b/images/cleardot.gif
diff --git a/images/icon_bicycle.png b/images/icon_bicycle.png
diff --git a/images/icon_bicycle_selected.png b/images/icon_bicycle_selected.png
diff --git a/images/icon_bikeshops.png b/images/icon_bikeshops.png
diff --git a/images/icon_bikeshops_selected.png b/images/icon_bikeshops_selected.png
diff --git a/images/icon_cafe.png b/images/icon_cafe.png
diff --git a/images/icon_cafe_selected.png b/images/icon_cafe_selected.png
diff --git a/images/icon_congestion.png b/images/icon_congestion.png
diff --git a/images/icon_congestion_selected.png b/images/icon_congestion_selected.png
diff --git a/images/icon_cycleways.png b/images/icon_cycleways.png
diff --git a/images/icon_cycleways_selected.png b/images/icon_cycleways_selected.png
diff --git a/images/icon_destinations.png b/images/icon_destinations.png
diff --git a/images/icon_destinations_selected.png b/images/icon_destinations_selected.png
diff --git a/images/icon_incident.png b/images/icon_incident.png
diff --git a/images/icon_incident_selected.png b/images/icon_incident_selected.png
diff --git a/images/icon_junction.png b/images/icon_junction.png
diff --git a/images/icon_junction_selected.png b/images/icon_junction_selected.png
diff --git a/images/icon_lighting.png b/images/icon_lighting.png
diff --git a/images/icon_lighting_selected.png b/images/icon_lighting_selected.png
diff --git a/images/icon_obstructions.png b/images/icon_obstructions.png
diff --git a/images/icon_obstructions_selected.png b/images/icon_obstructions_selected.png
diff --git a/images/icon_potholes.png b/images/icon_potholes.png
diff --git a/images/icon_potholes_selected.png b/images/icon_potholes_selected.png
diff --git a/images/icon_pub.png b/images/icon_pub.png
diff --git a/images/icon_pub_selected.png b/images/icon_pub_selected.png
diff --git a/images/icon_steps.png b/images/icon_steps.png
diff --git a/images/icon_steps_selected.png b/images/icon_steps_selected.png
diff --git a/images/icon_unevenroad.png b/images/icon_unevenroad.png
diff --git a/images/icon_unevenroad_selected.png b/images/icon_unevenroad_selected.png
diff --git a/js/leaflet/images/marker-icon.png b/js/leaflet/images/marker-icon.png
diff --git a/js/leaflet/images/marker-shadow.png b/js/leaflet/images/marker-shadow.png
diff --git a/js/leaflet.geometryutil.js → js/leaflet/leaflet.geometryutil.js b/js/leaflet.geometryutil.js → js/leaflet/leaflet.geometryutil.js
diff --git a/js/leaflet.js → js/leaflet/leaflet.js b/js/leaflet.js → js/leaflet/leaflet.js
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,24 @@
+$(document).ready(function(){
+
+	if(!$('.navbar-collapse .nav').is(':visible')){
+		// Need to make the menu bar
+
+	}
+
+
+	function setSize(){
+		var foot = $('#footer');
+		foot.css('height','auto')
+		console.log('setSize')
+		if(foot.length > 0){
+			var h = foot.offset().top+foot.outerHeight();
+			if(h < $(window).height()){
+				foot.css('height',foot.outerHeight()+($(window).height()-h))
+			}
+		}
+	}
+
+	// Add resize function
+	$(window).on('resize',setSize);
+	setSize();
+});
diff --git a/js/routerater.js b/js/routerater.js
@@ -40,7 +40,7 @@ function RouteRater(){
 		"red": { color: ($('.red').css('background-color') ? $('.red').css('background-color') : '#b00000') },
 		"black": { color: "#000000" },
 		"white": { color: "#ffffff" },
-		"default": { weight: 8, opacity: 0.1 },
+		"default": { weight: 8, opacity: 0.2 },
 		"highlight": { weight: 8, opacity: 1 }
 	}
 	this.grades = ['green','blue','red','black'];
@@ -82,13 +82,13 @@ RouteRater.prototype.makeMap = function(){
 			errorTileUrl: 'missing.png'
 		});
 
-		this.map = L.map('map',{'layers':this.layers.base["Route rater"],'center':[this.pos.lat, this.pos.lng],'zoom':this.pos.zoom});
+		this.map = L.map('map',{'layers':this.layers.base["Gray-scale"],'center':[this.pos.lat, this.pos.lng],'zoom':this.pos.zoom});
 		this.control = L.control.layers(this.layers.base,this.layers.overlay);
 		this.control.addTo(this.map);
 		L.control.scale().addTo(this.map);
 	}
 
-	this.icons.basic = L.icon({iconUrl: 'icons/.png',shadowUrl: 'leaf-shadow.png',iconSize:[38, 95],shadowSize:[50, 64],iconAnchor:[22, 94],shadowAnchor: [4, 62],popupAnchor:  [-3, -76]});
+	this.icons.basic = L.icon({iconUrl: 'images/marker-icon.png',shadowUrl: 'images/marker-shadow.png',iconSize:[38, 95],shadowSize:[50, 64],iconAnchor:[22, 94],shadowAnchor: [4, 62],popupAnchor:  [-3, -76]});
 
 	var _obj = this;
 	this.map.on('moveend',function(e){
@@ -119,7 +119,12 @@ RouteRater.prototype.makeMap = function(){
 	var html = '<ol class="gradeselection">';
 	for(var i = 0; i < this.grades.length ; i++) html += '<li><div class="'+this.grades[i]+'"></div></li>';
 	html += '</ol>';
-	html += '<div id="grade_desc"><div class="inner"></div></div>';
+	html += '<div id="gradedescriptiontoggle">\?</div>';
+	html += '<div id="gradedescription"></div>';
+	$(document).on('click','#gradedescriptiontoggle',function(e){
+		$('#gradedescription').toggle();
+	});
+
 	$('#grade').html(html).hide();
 	$(document).on('click','.gradeselection li div',{me:this},function(e){ e.data.me.setRoad($(this).attr("class")); })
 
@@ -150,6 +155,7 @@ RouteRater.prototype.addMoment = function(la,ln,ts){
 }
 
 RouteRater.prototype.getRoads = function(callback){
+	console.log('getRoads')
 	if(this.map.getZoom() > 15){
 		var bounds = this.map.getBounds();
 
@@ -286,6 +292,7 @@ RouteRater.prototype.addRoutes = function(data){
 RouteRater.prototype.setRoad = function(properties){
 
 	$('.gradeselection li.selected').removeClass('selected');
+	$('.gradeselection li div').html('&nbsp;');//&#x2713;
 	if(properties){
 		$('#grade').show();
 		if(typeof properties==="string"){
@@ -303,9 +310,7 @@ RouteRater.prototype.setRoad = function(properties){
 		if(this.road.newgrade == this.road.grade) this.road.newgrade = null;
 		g = (this.road.newgrade ? this.road.newgrade : this.road.grade);
 		grade = this.grades[g-1];
-		$('.gradeselection li:eq('+(g-1)+')').addClass('selected');
-		$('#grade_desc').removeClass().addClass(grade);
-		$('#grade_desc .inner').html(this.data.grades[grade].desc);
+		$('.gradeselection li:eq('+(g-1)+')').addClass('selected').find('div').html('&#x2713;');
 		$('#grade').show();
 
 		// Update form
@@ -317,8 +322,6 @@ RouteRater.prototype.setRoad = function(properties){
 	}else{
 		this.road = null;
 		$('#grade').hide();
-		$('#grade_desc').removeClass();
-		$('#grade_desc .inner').html('');
 	}
 
 
@@ -341,6 +344,7 @@ RouteRater.prototype.selectNearestRoad = function(loc,px){
 
 RouteRater.prototype.clear = function(txt){
 
+	console.log('clear')
 	if(!txt) txt = 'Click on the map to add a moment.';
 	$('#title').html(txt);
 	$('#details').html('');
@@ -367,16 +371,19 @@ RouteRater.prototype.processMoments = function(){
 
 		// We have no moments
 		var _obj = this;
-		this.timeout = setTimeout(function(){ _obj.clear('Couldn\'t find your location. Click on the map to add a moment'); this.i = -1; },5000);
+		var s = 10000;
+		this.timeout = setTimeout(function(){ console.log('timeout'); _obj.clear('Couldn\'t find your location. Click on the map to add a moment'); this.i = -1; },s);
 		if(this.trygeolocate){
 			this.i = -1;	// reset counter
 			// Try to use the user's location
-			this.map.locate({setView: true,timeout:5000});
+			this.map.locate({setView: true,timeout:s});
 		}
-		console.log(this.trygeolocate,this.clickable)
+		//console.log(this.trygeolocate,this.clickable)
 
 	}else{
 
+		if(this.timeout) clearTimeout(this.timeout);
+
 		if(this.i < this.moments.length){
 			this.marker = L.latLng(this.moments[this.i].lat,this.moments[this.i].lng);
 
@@ -394,7 +401,7 @@ RouteRater.prototype.processMoments = function(){
 			var pre = "";
 			var d = new Date(this.moments[this.i].time);
 			this.timestamp = this.moments[this.i].time;
-			if(this.moments.length > 0) pre = '<h2>Rate moment'+(this.moments.length > 1 ? ' '+(this.i+1)+' of '+(this.moments.length) : '')+'</h2>';
+			if(this.moments.length > 0) pre = '<h2>Rating moment'+(this.moments.length > 1 ? ' '+(this.i+1)+' of '+(this.moments.length) : '')+'</h2>';
 			$('#title').html(pre);
 			$('#details').html('<time datetime="'+this.moments[this.i].time+'" class="datestamp">'+friendlyTime(d)+'</time><div class="routename"></div>')
 
@@ -411,9 +418,10 @@ RouteRater.prototype.processMoments = function(){
 					// Find the nearest graded path within 20 pixels
 					this.selectNearestRoad(this.marker,20);
 				}
-
 			});
-
+
+			$(window).trigger('resize')
+
 		}else{
 			console.log('done')
 			this.i = -1;
@@ -492,7 +500,7 @@ RouteRater.prototype.selectMomentType = function(id,i){
 	if(this.results[i][0].mood) $('.mood_'+this.results[i][0].mood+' input').trigger('click');
 
 	if($('.selectedmoment').length==0) $('#typeahead').after('<div class="selectedmoment"></div>')
-	$('.selectedmoment').html('<a href="#"><span href="#" class="change">&#10799;</span><span class="title">'+this.results[i][0].title+'</span><span class="desc">'+this.results[i][0].desc+'</span></a></div>');
+	$('.selectedmoment').html('<a href="#"><img src="../images/icon_'+this.results[i][2]+'_selected.png" alt="'+this.results[i][0].title+'" /><span href="#" class="change">&#10799;</span><span class="title">'+this.results[i][0].title+'</span><span class="desc">'+this.results[i][0].desc+'</span></a></div>');
 
 	// Update the search text
 	$('#filter').val(this.results[i][0].title).hide();
@@ -516,7 +524,7 @@ RouteRater.prototype.typeahead = function(id){
 
 		this.typeaheadsetup = true;
 
-		if($('#'+id).length == 0) $('#moment').prepend('<div class=""><label for="filter" class="sr-only">Category:</label> <input type="text" name="filter" id="filter" class="fullwidth" placeholder="Category e.g. Busy road, good cycle path" /></div>');
+		if($('#'+id).length == 0) $('#moment').prepend('<div class="filterholder"><label for="filter" class="">Category:</label> <input type="text" name="filter" id="filter" class="fullwidth" placeholder="Find e.g. cycle-path, steps, obstruction" /></div>');
 
 		// Add the typeahead div and hide it
 		$('#moment').append('<div id="'+t+'"></div>');
@@ -650,8 +658,8 @@ RouteRater.prototype.search = function(str){
 		n = results.length;
 		for(var i = 0; i < n; i++){
 			//if(results[i][1] > 0 && results[i][1] >= results[0][1]/10) html += '<li><a href="#" data="'+i+'"><span class="score">'+Math.round(100*results[i][1]/results[0][1])+'% match</span><span class="title">'+results[i][0].title+'</span><span class="desc">'+results[i][0].desc+'</span></a></li>';
-			if(results[i][1] > 0) html += '<li><a href="#" class="selecter" data="'+i+'"><span class="score">'+Math.round(100*results[i][1]/results[0][1])+'% match</span><span class="title">'+results[i][0].title+'</span><span class="desc">'+results[i][0].desc+'</span></a></li>';
-		}
+			if(results[i][1] > 0) html += '<li><a href="#" class="selecter" data="'+i+'"><img src="../images/icon_'+results[i][2]+'.png" alt="'+results[i][0].title+'" /><span class="score">'+Math.round(100*results[i][1]/results[0][1])+'% match</span><span class="title">'+results[i][0].title+'</span><span class="desc">'+results[i][0].desc+'</span></a></li>';
+		}//<img src="../images/icon_'+results[i][2]+'.png" 
 		html += "</ol>";
 	}
 
@@ -672,6 +680,12 @@ RouteRater.prototype.init = function(){
 		success: function(data){
 			this.data = data;
 
+			//BLAH
+			html = '<ol>';
+			for(var i in this.data.grades) html += '<li><span class="'+i+' box"></span>'+this.data.grades[i].desc+"</li>"
+			html += '</ol>';
+			$('#gradedescription').append(html);
+
 			this.typeahead('filter');
 
 			$('#moment').append('<div id="mood"><div class="mood mood_happy" data="happy"><input type="radio" name="mood" value="good" /></div><div class="mood mood_neutral" data="neutral"><input type="radio" name="mood" value="none" /></div><div class="mood mood_sad" data="sad"><input type="radio" name="mood" value="problem" /></div></div>');

diff --git a/map.html b/map.html
@@ -5,7 +5,7 @@
 		<link href='style.css' rel='stylesheet' type="text/css">
 		<link rel="stylesheet" href="leaflet.css" />
 		<script src="js/jquery-1.10.0.min.js"></script>
-		<script src="js/leaflet.js"></script>
+		<script src="js/leaflet/leaflet.js"></script>
 		<script src="js/map.js"></script>
 		<title>Route Rater</title>
 	</head>

diff --git a/rate/config/config.json b/rate/config/config.json
@@ -6,30 +6,93 @@
 		"black": { "title": "Grade: black (extreme)", "desc": "Multi-lane sections/gyratories/lots of experience and luck", "keywords": ["black","advanced","extreme"], "img": "" }
 	},
 	"moments": {
-		"junction_busy": { "title": "Junction: busy", "desc": "A busy junction", "keywords":["junction","intersection","busy"],"img": "","mood":"sad" },
-		"junction_confusing": { "title": "Junction: confusing", "desc": "A confusing or badly-signed junction", "keywords": ["intersection","complicated","confusing","signage"], "img": "","mood":"sad" },
-		"road_busy": { "title": "Road: busy", "desc": "A busy road with heavy traffic", "img": "","initial": 0.6,"mood":"sad" },
-		"road_fast": { "title": "Road: fast", "desc": "A road with fast traffic", "img": "","mood":"sad" },
-		"road_quiet": { "title": "Road: quiet", "desc": "A quiet road", "img": "","mood":"happy" },
-		"road_uneven": { "title": "Road: uneven", "desc": "A road with an uneven or bumpy surface", "img": "","mood":"sad" },
-		"road_pothole": { "title": "Road: pothole", "desc": "A hole in the road", "img": "","initial":0.5,"mood":"sad" },
-		"lighting_good": { "title": "Lighting: good", "desc": "Well lit at night", "img": "","mood":"happy" },
-		"lighting_poor": { "title": "Lighting: poor", "desc": "Badly lit at night", "img": "","mood":"sad" },
-		"intimidating": { "title": "Intimidating", "desc": "Uncomfortable location", "img": "","mood":"sad" },
-		"signage_good": { "title": "Signage: good", "desc": "Good or clear signage", "keywords": ["sign"], "img": "","mood":"happy" },
-		"signage_poor": { "title": "Signage: poor", "desc": "Bad or unclear signage", "keywords": ["sign"], "img": "","mood":"sad" },
-		"cpath_good": { "title": "Cycle-path: good", "desc": "A good section of cycle path", "img": "", "initial": 0.7, "mood":"happy" },
-		"cpath_obstruct_perm": { "title": "Cycle-path: obstructed by street furniture", "desc": "Street furniture in bike lane e.g. a bollard or sign-post", "keywords": ["sign-post","lamp-post","bollard","post","fence","street light"], "img": "","mood":"sad" },
-		"cpath_obstruct_temp": { "title": "Cycle-path: obstructed by vehicle", "desc": "A temporary obstruction in a bike lane", "img": "","mood":"sad" },
-		"cpath_confusing": { "title": "Cycle-path: confusing", "desc": "A particularly complicated section of cycle path", "keywords": ["complicated","confusing"], "img": "","mood":"sad" },
-		"cfriend_cafe": { "title": "Cycle-friendly: cafe", "desc": "A cafe that welcomes people with bicycles", "img": "", "initial": 0.8, "mood":"happy" },
-		"cfriend_pub": { "title": "Cycle-friendly: pub", "desc": "A pub that welcomes people with bicycles", "img": "","mood":"happy" },
-		"incident_nearmiss_bus": { "title": "Near miss: bus/tram", "desc": "A hairy moment with a bus or tram", "img": "","mood":"sad" },
-		"incident_nearmiss_car": { "title": "Near miss: car/taxi", "desc": "A hairy moment with a car or taxi", "img": "","mood":"sad" },
-		"incident_nearmiss_van": { "title": "Near miss: van/lorry", "desc": "A hairy moment with a van or lorry", "img": "","mood":"sad" },
-		"incident_nearmiss_bike": { "title": "Near miss: bike", "desc": "A hairy moment with another bicycle", "img": "","mood":"sad" },
-		"incident_nearmiss_person": { "title": "Near miss: pedestrian", "desc": "A hairy moment with a pedestrian", "img": "","mood":"sad" },
-		"incident_rta": { "title": "Road accident", "desc": "A road traffic accident", "img": "","mood":"sad" }
+		"cycleparking": {
+			"title": "Cycle parking", 
+			"desc": "Quality of the parking provision"
+		},
+		"obstructions": {
+			"title": "Obstruction",
+			"desc": "A narrow place, difficult for cycles to pass",
+			"keywords": ["sign-post","lamp-post","bollard","post","fence","street light","gate"],
+			"mood":"sad"
+		},
+		"cycleways": {
+			"title": "Cycle-path",
+			"desc": "The quality of a dedicated cycle path",
+			"initial": 0.7
+		},
+		"closure": {
+			"title": "Temporary closure",
+			"desc": "A route temporarily barred to cycle access.", 
+			"mood":"sad"
+		},
+		"bikeshops": {
+			"title": "Bike shop",
+			"desc": "A place to buy or fix bikes",
+			"mood":"happy"
+		},
+		"potholes": {
+			"title": "Pothole",
+			"desc": "A hole in the road",
+			"initial":0.5,
+			"mood":"sad"
+		},
+		"signs": {
+			"title": "General signage", 
+			"desc": "How clear or unclear the general signage is",
+			"keywords": ["sign","directions"]
+		},
+		"routesigns": {
+			"title": "Bike route sign", 
+			"desc": "A sign indicating cycle routes",
+			"keywords": ["sign","directions"]
+		},
+		"congestion": {
+			"title": "Congestion",
+			"desc": "A place where cyclists will be delayed or need to take extra care",
+			"initial": 0.6,
+			"mood":"sad"
+		},
+		"destinations": {
+			"title": "Destination",
+			"desc": "A place where cyclists may want to visit",
+			"mood":"sad"
+		},
+		"steps": {
+			"title": "Steps", 
+			"desc": "A place where you will have to carry your bike"
+		},
+		"unevenroad": {
+			"title": "Road: uneven",
+			"desc": "A road with an uneven or bumpy surface",
+			"mood":"sad"
+		},
+		"cafe": {
+			"title": "Cycle-friendly cafe",
+			"desc": "A cafe that welcomes people with bicycles",
+			"initial": 0.8,
+			"mood":"happy"
+		},
+		"junction": {
+			"title": "Junction",
+			"desc": "A junction where you need to take care",
+			"keywords":["junction","intersection","busy"],
+			"mood":"sad"
+		},
+		"lighting": {
+			"title": "Lighting", 
+			"desc": "Quality of the street lighting"
+		},
+		"pub": {
+			"title": "Cycle-friendly pub",
+			"desc": "A pub that welcomes people with bicycles",
+			"mood":"happy"
+		},
+		"incident": {
+			"title": "Near miss or accident", 
+			"desc": "A hairy moment with another vehicle or pedestrian", 
+			"mood":"sad"
+		}
 	},
 	"tree": {
 		"text": "Rate a moment",

diff --git a/rate/index.html b/rate/index.html
@@ -4,8 +4,9 @@
 		<link href='../style.css' rel='stylesheet' type="text/css">
 		<link rel="stylesheet" href="../leaflet.css" />
 		<script src="../js/jquery-1.10.0.min.js"></script>
-		<script src="../js/leaflet.js"></script>
-		<script src="../js/leaflet.geometryutil.js"></script>
+		<script src="../js/leaflet/leaflet.js"></script>
+		<script src="../js/leaflet/leaflet.geometryutil.js"></script>
+		<script src="../js/main.js"></script>
 		<script src="../js/routerater.js"></script>
 		<title>Route Rater</title>
 	</head>
@@ -40,5 +41,10 @@
 			</div>
 			<div id="nav"></div>
 		</div>
+		<div id="footer">
+			<div class="container">
+				Map data &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors (<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>), Imagery &copy; <a href="http://mapbox.com">Mapbox</a> & Route Rater.
+			</div>
+		</div>
 	</body>
 </html>