milkbread/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Testmap</title>
  <meta charset="utf-8" />
  <script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://bl.ocks.org/milkbread/raw/5917907/slider.js"></script>

  <style>
  @import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css);
  @import url(http://bl.ocks.org/milkbread/raw/5743667/RKToolbox_0.1.css);
  .axis text {
   font-family: sans-serif;
   font-size: 16px;
   text-anchor:left;
   fill:#0f0;
   opacity:0.8;
  }
  #info {
    background-color:#c8ba09;
  }
  </style>
</head>
<body>
  <div id=slider></div>
  <div id="map" style="width: 600px; height: 300px"></div>
  <div id=info style="width: 600px;"></div>
  <script>
  var inputValue = window.location.hash.replace('#','').split(':');
  if (inputValue[0]=='') inputValue[0] = 'DP_pure'; //define it, where nothing was specified

  var infos = [], cell = d3.select('#info');
  infos[0] = cell.append('text');
  infos[1] = cell.append('text').text("Simplified number of points: ");
  infos[1].append('br');
  infos[2] = cell.append('text').text('The calculation took: ') ;
  infos[2].append('br');
  infos[3] = cell.append('text').text('Average time of calculation: ') ;
  var timeArray = [];

  var map = L.map('map').setView([52.67, 21.97], 4);
  var toolserver = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png');
  var stamen = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: 'Add some attributes here!'}).addTo(map);
  var baseLayers = {"stamen": stamen, "toolserver-mapnik":toolserver};

  var slider = new slider(d3.select("#slider"),600,75);
  slider.reDefineIndicator(6);
  slider.addScalebar([0,10]);


  d3.json("/milkbread/raw/5917907/shortest_paris-moscow.js", function(navigation_route) {

    slider.addHoverListener(hoverAction);

    var allPoints = navigation_route.route_geometry

    var polyline = new L.polyline(allPoints, {color: '#41b611', smoothFactor:0}).addTo(map);

    infos[0].text("Total number of points: " + polyline._originalPoints.length).append('br')

    var overlays = {"line": polyline};

    var control = L.control.layers(baseLayers, overlays).addTo(map);

    function hoverAction(){
      var start_time = Date.now();

      polyline.options.smoothFactor=slider.getIndicPosition();
      polyline.redraw();
      //console.log(polyline)

      infos[1].text("Simplified number of points: " + polyline._parts[0].length).append('br')
      var processingTime = ((Date.now() - start_time)/1000);
      infos[2].text('The calculation took: '+processingTime.toFixed(4)).append('br')
      timeArray.push(processingTime)
      var averageTime = 0;
      timeArray.forEach(function(d){averageTime = averageTime + d})
      averageTime = averageTime/(timeArray.length)
      infos[3].text('Average time of calculation: '+averageTime.toFixed(4)+ " ("+timeArray.length+" iterations)")


    }

  })


  </script>
 </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Testmap</title>
	<meta charset="utf-8" />
	<script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://bl.ocks.org/milkbread/raw/5917907/slider.js"></script>

	<style>
	@import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css);
	@import url(http://bl.ocks.org/milkbread/raw/5743667/RKToolbox_0.1.css);
	.axis text {
	font-family: sans-serif;
	font-size: 16px;
	text-anchor:left;
	fill:#0f0;
	opacity:0.8;
	}
	#info {
	background-color:#c8ba09;
	}
	</style>
	</head>
	<body>
	<div id=slider></div>
	<div id="map" style="width: 600px; height: 300px"></div>
	<div id=info style="width: 600px;"></div>
	<script>
	var inputValue = window.location.hash.replace('#','').split(':');
	if (inputValue[0]=='') inputValue[0] = 'DP_pure'; //define it, where nothing was specified

	var infos = [], cell = d3.select('#info');
	infos[0] = cell.append('text');
	infos[1] = cell.append('text').text("Simplified number of points: ");
	infos[1].append('br');
	infos[2] = cell.append('text').text('The calculation took: ') ;
	infos[2].append('br');
	infos[3] = cell.append('text').text('Average time of calculation: ') ;
	var timeArray = [];

	var map = L.map('map').setView([52.67, 21.97], 4);
	var toolserver = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png');
	var stamen = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: 'Add some attributes here!'}).addTo(map);
	var baseLayers = {"stamen": stamen, "toolserver-mapnik":toolserver};

	var slider = new slider(d3.select("#slider"),600,75);
	slider.reDefineIndicator(6);
	slider.addScalebar([0,10]);


	d3.json("/milkbread/raw/5917907/shortest_paris-moscow.js", function(navigation_route) {

	slider.addHoverListener(hoverAction);

	var allPoints = navigation_route.route_geometry

	var polyline = new L.polyline(allPoints, {color: '#41b611', smoothFactor:0}).addTo(map);

	infos[0].text("Total number of points: " + polyline._originalPoints.length).append('br')

	var overlays = {"line": polyline};

	var control = L.control.layers(baseLayers, overlays).addTo(map);

	function hoverAction(){
	var start_time = Date.now();

	polyline.options.smoothFactor=slider.getIndicPosition();
	polyline.redraw();
	//console.log(polyline)

	infos[1].text("Simplified number of points: " + polyline._parts[0].length).append('br')
	var processingTime = ((Date.now() - start_time)/1000);
	infos[2].text('The calculation took: '+processingTime.toFixed(4)).append('br')
	timeArray.push(processingTime)
	var averageTime = 0;
	timeArray.forEach(function(d){averageTime = averageTime + d})
	averageTime = averageTime/(timeArray.length)
	infos[3].text('Average time of calculation: '+averageTime.toFixed(4)+ " ("+timeArray.length+" iterations)")


	}

	})



	</script>
	</body>
	</html>