<commit_before><!--
Inspired from Choropleth example on leaflet's website:

http://leafletjs.com/examples/choropleth-example.html

-->

<!DOCTYPE html>
<html>
<head>
	<title>Propensity to Cycle Front Page</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />

	<style>
  	html,
    body {
        height: 100%;
    }
		#map {
				height: 100%;
		}

		.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}

		.legend {
			text-align: left;
			line-height: 18px;
			color: #555;
		}
		.legend i {
			width: 18px;
			height: 18px;
			float: left;
			margin-right: 8px;
			opacity: 0.7;
		}
	</style>
</head>
<body>
	<div id="map"></div>

	<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>

	<script type="text/javascript" src="test_regions.js"></script>
	<script type="text/javascript">

  govt_target_gj = gendereq_gj = dutch_gj = ebike_gj = statesData

	  var map = L.map('map').setView([ 53, 0.55], 6);

		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=<KEY>', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
			id: 'mapbox.light'
		}).addTo(map);


		// control that shows region info on hover
		var info = L.control();

		info.onAdd = function (map) {
			this._div = L.DomUtil.create('div', 'info');
			this.update();
			return this._div;
		};

		info.update = function (props, scenario) {



		  if (!(scenario == undefined)){
		    if (scenario == "census"){
		        this._div.innerHTML = '<h4>Cycling to Work</h4>' +  (props ?
				    '<b>' + capitalize(props.Region) + '</b><br />' + props.pcycle + '  % in 2011 Census'
				    : 'Hover over a region');
		    }else if (scenario == "govt_target"){
		        this._div.innerHTML = '<h4>Cycling to Work</h4>' +  (props ?
				    '<b>' + capitalize(props.Region) + '</b><br />' + props.govtarget_slc + '  % in Government Target'
				    : 'Hover over a region');
		    }else if (scenario == "gendereq"){
		        this._div.innerHTML = '<h4>Cycling to Work</h4>' +  (props ?
				    '<b>' + capitalize(props.Region) + '</b><br />' + props.gendereq_slc + '  % in Gender Equality'
				    : 'Hover over a region');
		    }else if (scenario == "dutch"){
		        this._div.innerHTML = '<h4>Cycling to Work</h4>' +  (props ?
				    '<b>' + capitalize(props.Region) + '</b><br />' + props.dutch_slc + '  % in Go Dutch'
				    : 'Hover over a region');
		    }else if (scenario == "ebike"){
		        this._div.innerHTML = '<h4>Cycling to Work</h4>' +  (props ?
				    '<b>' + capitalize(props.Region) + '</b><br />' + props.ebike_slc + '  % in Ebike'
				    : 'Hover over a region');
		    }

        /*
		    for(var i=0; i<arguments.length; i++) {
	        console.log(arguments[i])
	      }*/
		  }else{

		    this._div.innerHTML = '<h4>Cycling to work</h4>' +  (props ?
				'<b>' + props.name + '</b><br />'	: 'Hover over a region');
		  }


		};

    // Capitalize all words in a region except 'and' and 'of'
		function capitalize(s){
		    s = s.replace(/-/g, ' ');
		    s = s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } )
        s = s.replace('And', 'and');
        s = s.replace('Of', 'of');
        return s;
    };

		info.addTo(map);

    /*
		// get color depending on population govtarget_slc value
		function getColor(d) {
			return d > 1000 ? '#800026' :
			       d > 500  ? '#BD0026' :
			       d > 200  ? '#E31A1C' :
			       d > 100  ? '#FC4E2A' :
			       d > 50   ? '#FD8D3C' :
			       d > 20   ? '#FEB24C' :
			       d > 10   ? '#FED976' :
			                  '#FFEDA0';

			                  // [0, 3, 6, 12, 20, 40],
		}*/

		function getColor(d) {
			return d > 40 ? '#800026' :
			       d > 20  ? '#BD0026' :
			       d > 12  ? '#E31A1C' :
			       d > 6   ? '#FD8D3C' :
			       d > 3   ? '#FEB24C' :
			       d > 0   ? '#FED976' :
			                  '#FFEDA0';

			                  // [0, 3, 6, 12, 20, 40],
		}

		function style_census(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.pcycle)
			};
		}

		function highlightFeature_census(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "census");
		}

		var olc;

		function resetHighlight_census(e) {
			olc.resetStyle(e.target);
			info.update();
		}

		function zoomToFeature(e) {
			window.open(e.target.feature.properties.url);
		}

		function onEachFeature_census(feature, layer) {
      //console.log("layer is " + layer.name);
		  layer.on({
				mouseover: highlightFeature_census,
				mouseout: resetHighlight_census,
				click: zoomToFeature
			});
		}

		olc = L.geoJson(statesData, {
			style: style_census,
			onEachFeature: onEachFeature_census
		});//.addTo(map);

    var govtarget;


    function style_govt_target(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.govtarget_slc)
			};
		}

		function highlightFeature_govt_target(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "govt_target");
		}


		function resetHighlight_govt_target(e) {
			govtarget.resetStyle(e.target);
			info.update();
		}

		function onEachFeature_govt_target(feature, layer) {
      //console.log("layer is " + layer.name);
		  layer.on({
				mouseover: highlightFeature_govt_target,
				mouseout: resetHighlight_govt_target,
				click: zoomToFeature
			});
		}

		govtarget	= L.geoJson(govt_target_gj, {
			style: style_govt_target,
			onEachFeature: onEachFeature_govt_target
		});//.addTo(map);


		// ------------------------------ //

		 var govtarget;


    function style_govt_target(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.govtarget_slc)
			};
		}

		function highlightFeature_govt_target(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "govt_target");
		}


		function resetHighlight_govt_target(e) {
			govtarget.resetStyle(e.target);
			info.update();
		}

		function onEachFeature_govt_target(feature, layer) {
      //console.log("layer is " + layer.name);
		  layer.on({
				mouseover: highlightFeature_govt_target,
				mouseout: resetHighlight_govt_target,
				click: zoomToFeature
			});
		}

		govtarget	= L.geoJson(govt_target_gj, {
			style: style_govt_target,
			onEachFeature: onEachFeature_govt_target
		})//;.addTo(map);



		// ---------------------------------- //


		 var gendereq;


    function style_gendereq(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.gendereq_slc)
			};
		}

		function highlightFeature_gendereq(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "gendereq");
		}


		function resetHighlight_gendereq(e) {
			gendereq.resetStyle(e.target);
			info.update();
		}

		function onEachFeature_gendereq(feature, layer) {
      //console.log("layer is " + layer.name);
		  layer.on({
				mouseover: highlightFeature_gendereq,
				mouseout: resetHighlight_gendereq,
				click: zoomToFeature
			});
		}

		gendereq	= L.geoJson(gendereq_gj, {
			style: style_gendereq,
			onEachFeature: onEachFeature_gendereq
		})//;.addTo(map);


		// ---------------------------------------//

		var dutch;


    function style_dutch(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.dutch_slc)
			};
		}

		function highlightFeature_dutch(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "dutch");
		}


		function resetHighlight_dutch(e) {
			dutch.resetStyle(e.target);
			info.update();
		}

		function onEachFeature_dutch(feature, layer) {
      //console.log("layer is " + layer.name);
		  layer.on({
				mouseover: highlightFeature_dutch,
				mouseout: resetHighlight_dutch,
				click: zoomToFeature
			});
		}

		dutch	= L.geoJson(dutch_gj, {
			style: style_dutch,
			onEachFeature: onEachFeature_dutch
		});//.addTo(map);


		// ------------------------ //

		var ebike;


    function style_ebike(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.ebike_slc)
			};
		}

		function highlightFeature_ebike(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "ebike");
		}


		function resetHighlight_ebike(e) {
			ebike.resetStyle(e.target);
			info.update();
		}

		function onEachFeature_ebike(feature, layer) {
      //console.log("layer is " + layer.name);
		  layer.on({
				mouseover: highlightFeature_ebike,
				mouseout: resetHighlight_ebike,
				click: zoomToFeature
			});
		}

		ebike	= L.geoJson(ebike_gj, {
			style: style_ebike,
			onEachFeature: onEachFeature_ebike
		});//.addTo(map);

		var map_layers = {
  	  "Census 2011 Cycling" : olc,
      "Government Target": govtarget,
      "Gender equality" : gendereq,
      "Go Dutch" : dutch,
      "Ebikes" : ebike
    };

    L.control.layers(map_layers, null, {collapsed:false}, {position: 'topleft'}).addTo(map);

    // Add census as the default layer<commit_msg>Remove unused code<commit_after><!--
Inspired from Choropleth example on leaflet's website:

http://leafletjs.com/examples/choropleth-example.html

-->

<!DOCTYPE html>
<html>
<head>
	<title>Propensity to Cycle Front Page</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />

	<style>
  	html,
    body {
        height: 100%;
    }
		#map {
				height: 100%;
		}

		.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}

		.legend {
			text-align: left;
			line-height: 18px;
			color: #555;
		}
		.legend i {
			width: 18px;
			height: 18px;
			float: left;
			margin-right: 8px;
			opacity: 0.7;
		}
	</style>
</head>
<body>
	<div id="map"></div>

	<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>

	<script type="text/javascript" src="test_regions.js"></script>
	<script type="text/javascript">

  govt_target_gj = gendereq_gj = dutch_gj = ebike_gj = statesData

	  var map = L.map('map').setView([ 53, 0.55], 6);

		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
			id: 'mapbox.light'
		}).addTo(map);


		// control that shows region info on hover
		var info = L.control();

		info.onAdd = function (map) {
			this._div = L.DomUtil.create('div', 'info');
			this.update();
			return this._div;
		};

		info.update = function (props, scenario) {



		  if (!(scenario == undefined)){
		    if (scenario == "census"){
		        this._div.innerHTML = '<h4>Cycling to Work</h4>' +  (props ?
				    '<b>' + capitalize(props.Region) + '</b><br />' + props.pcycle + '  % in 2011 Census'
				    : 'Hover over a region');
		    }else if (scenario == "govt_target"){
		        this._div.innerHTML = '<h4>Cycling to Work</h4>' +  (props ?
				    '<b>' + capitalize(props.Region) + '</b><br />' + props.govtarget_slc + '  % in Government Target'
				    : 'Hover over a region');
		    }else if (scenario == "gendereq"){
		        this._div.innerHTML = '<h4>Cycling to Work</h4>' +  (props ?
				    '<b>' + capitalize(props.Region) + '</b><br />' + props.gendereq_slc + '  % in Gender Equality'
				    : 'Hover over a region');
		    }else if (scenario == "dutch"){
		        this._div.innerHTML = '<h4>Cycling to Work</h4>' +  (props ?
				    '<b>' + capitalize(props.Region) + '</b><br />' + props.dutch_slc + '  % in Go Dutch'
				    : 'Hover over a region');
		    }else if (scenario == "ebike"){
		        this._div.innerHTML = '<h4>Cycling to Work</h4>' +  (props ?
				    '<b>' + capitalize(props.Region) + '</b><br />' + props.ebike_slc + '  % in Ebike'
				    : 'Hover over a region');
		    }
		  }else{
		    this._div.innerHTML = '<h4>Cycling to work</h4>' +  (props ?
				'<b>' + props.name + '</b><br />'	: 'Hover over a region');
		  }

		};

    // Capitalize all words in a region except 'and' and 'of'
		function capitalize(s){
		    s = s.replace(/-/g, ' ');
		    s = s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } )
        s = s.replace('And', 'and');
        s = s.replace('Of', 'of');
        return s;
    };

		info.addTo(map);

		function getColor(d) {
			return d > 40 ? '#800026' :
			       d > 20  ? '#BD0026' :
			       d > 12  ? '#E31A1C' :
			       d > 6   ? '#FD8D3C' :
			       d > 3   ? '#FEB24C' :
			       d > 0   ? '#FED976' :
			                  '#FFEDA0';

			                  // [0, 3, 6, 12, 20, 40],
		}

		function style_census(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.pcycle)
			};
		}

		function highlightFeature_census(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "census");
		}

		var olc;

		function resetHighlight_census(e) {
			olc.resetStyle(e.target);
			info.update();
		}

		function zoomToFeature(e) {
			window.open(e.target.feature.properties.url);
		}

		function onEachFeature_census(feature, layer) {
		  layer.on({
				mouseover: highlightFeature_census,
				mouseout: resetHighlight_census,
				click: zoomToFeature
			});
		}

		olc = L.geoJson(statesData, {
			style: style_census,
			onEachFeature: onEachFeature_census
		});

    var govtarget;

    function style_govt_target(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.govtarget_slc)
			};
		}

		function highlightFeature_govt_target(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "govt_target");
		}


		function resetHighlight_govt_target(e) {
			govtarget.resetStyle(e.target);
			info.update();
		}

		function onEachFeature_govt_target(feature, layer) {
		  layer.on({
				mouseover: highlightFeature_govt_target,
				mouseout: resetHighlight_govt_target,
				click: zoomToFeature
			});
		}

		govtarget	= L.geoJson(govt_target_gj, {
			style: style_govt_target,
			onEachFeature: onEachFeature_govt_target
		});

		// ------------------------------ //

		 var govtarget;

    function style_govt_target(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.govtarget_slc)
			};
		}

		function highlightFeature_govt_target(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "govt_target");
		}


		function resetHighlight_govt_target(e) {
			govtarget.resetStyle(e.target);
			info.update();
		}

		function onEachFeature_govt_target(feature, layer) {
		  layer.on({
				mouseover: highlightFeature_govt_target,
				mouseout: resetHighlight_govt_target,
				click: zoomToFeature
			});
		}

		govtarget	= L.geoJson(govt_target_gj, {
			style: style_govt_target,
			onEachFeature: onEachFeature_govt_target
		});

		// ---------------------------------- //

		 var gendereq;


    function style_gendereq(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.gendereq_slc)
			};
		}

		function highlightFeature_gendereq(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "gendereq");
		}


		function resetHighlight_gendereq(e) {
			gendereq.resetStyle(e.target);
			info.update();
		}

		function onEachFeature_gendereq(feature, layer) {
		  layer.on({
				mouseover: highlightFeature_gendereq,
				mouseout: resetHighlight_gendereq,
				click: zoomToFeature
			});
		}

		gendereq	= L.geoJson(gendereq_gj, {
			style: style_gendereq,
			onEachFeature: onEachFeature_gendereq
		});


		// ---------------------------------------//

		var dutch;


    function style_dutch(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.dutch_slc)
			};
		}

		function highlightFeature_dutch(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "dutch");
		}


		function resetHighlight_dutch(e) {
			dutch.resetStyle(e.target);
			info.update();
		}

		function onEachFeature_dutch(feature, layer) {
		  layer.on({
				mouseover: highlightFeature_dutch,
				mouseout: resetHighlight_dutch,
				click: zoomToFeature
			});
		}

		dutch	= L.geoJson(dutch_gj, {
			style: style_dutch,
			onEachFeature: onEachFeature_dutch
		});


		// ------------------------ //

		var ebike;


    function style_ebike(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.ebike_slc)
			};
		}

		function highlightFeature_ebike(e) {
			var layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

			info.update(layer.feature.properties, "ebike");
		}


		function resetHighlight_ebike(e) {
			ebike.resetStyle(e.target);
			info.update();
		}

		function onEachFeature_ebike(feature, layer) {
		  layer.on({
				mouseover: highlightFeature_ebike,
				mouseout: resetHighlight_ebike,
				click: zoomToFeature
			});
		}

		ebike	= L.geoJson(ebike_gj, {
			style: style_ebike,
			onEachFeature: onEachFeature_ebike
		});//.addTo(map);

		var map_layers = {
  	  "Census 2011 Cycling" : olc,
      "Government Target": govtarget,
      "Gender equality" : gendereq,
      "Go Dutch" : dutch,
      "Ebikes" : ebike
    };

    L.control.layers(map_layers, null, {collapsed:false},  {position: 'bottomright'}).addTo(map);

    // Add census as the default layer
{'fraction_non_alphanumeric': 0.16976479514415782, 'fraction_numerical': 0.021955614567526555, 'mean_word_length': 2.5455615332885, 'pattern_counts': {'":': 2, '<': 117, '<?xml version=': 0, '>': 135, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2609966', 'n_tokens_mistral': 9630, 'n_tokens_neox': 7660, 'n_words': 1439}