tristen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Great Circle

Create an arc like shape by specifying two points and drawing the points between them using HTML canvas
Contributors

  
## app.js
var initMap = function() {
  var provider = new com.modestmaps.TemplatedLayer('http://tile.openstreetmap.org/{Z}/{X}/{Y}.png');
  var map = new com.modestmaps.Map('map', provider);
  var canvas = document.createElement('canvas');
  canvas.style.position = 'absolute';
  canvas.style.left = '0';
  canvas.style.top = '0';
  canvas.width = map.dimensions.x;
  canvas.height = map.dimensions.y;
  map.parent.appendChild(canvas);

  var locations = [];
  var sf = new com.modestmaps.Location(37.7749295, -122.4194155);
  var london = new com.modestmaps.Location(51.5001524, -0.1262362);
  for (var i = 0; i <= 100; i++) {
    var f = i/100.0;
    locations.push(com.modestmaps.Location.interpolate(sf, london, f));
  }
  map.setExtent(locations);

  function redraw() {
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.strokeStyle = '#404040';
    ctx.beginPath();
    var p = map.locationPoint(locations[0]);
    ctx.moveTo(p.x,p.y);
    for (var i = 1; i < locations.length; i++) {
      p = map.locationPoint(locations[i]);
      ctx.lineTo(p.x,p.y);
    }
    ctx.stroke();
  }

  map.addCallback('drawn', redraw);
  map.addCallback('resized', function() {
    canvas.width = map.dimensions.x;
    canvas.height = map.dimensions.y;
    redraw();
  });

  redraw();
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Modest Maps JS Demo | Great Circle</title>
    <link rel='stylesheet' href='style.css'>
  </head>

  <body onload='initMap()'>
    <div id='map' />
    <script src='https://rawgithub.com/stamen/modestmaps-js/master/modestmaps.min.js'></script>
    <script src='app.js'></script>
  </body>
</html>

## style.css
body {
  font: 13px/22px 'Helvetica Neue', Helvetica, sans;
  margin: 0;
  padding: 0;
  }
#map {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  }
	var initMap = function() {
	var provider = new com.modestmaps.TemplatedLayer('http://tile.openstreetmap.org/{Z}/{X}/{Y}.png');
	var map = new com.modestmaps.Map('map', provider);
	var canvas = document.createElement('canvas');
	canvas.style.position = 'absolute';
	canvas.style.left = '0';
	canvas.style.top = '0';
	canvas.width = map.dimensions.x;
	canvas.height = map.dimensions.y;
	map.parent.appendChild(canvas);

	var locations = [];
	var sf = new com.modestmaps.Location(37.7749295, -122.4194155);
	var london = new com.modestmaps.Location(51.5001524, -0.1262362);
	for (var i = 0; i <= 100; i++) {
	var f = i/100.0;
	locations.push(com.modestmaps.Location.interpolate(sf, london, f));
	}
	map.setExtent(locations);

	function redraw() {
	var ctx = canvas.getContext('2d');
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.strokeStyle = '#404040';
	ctx.beginPath();
	var p = map.locationPoint(locations[0]);
	ctx.moveTo(p.x,p.y);
	for (var i = 1; i < locations.length; i++) {
	p = map.locationPoint(locations[i]);
	ctx.lineTo(p.x,p.y);
	}
	ctx.stroke();
	}

	map.addCallback('drawn', redraw);
	map.addCallback('resized', function() {
	canvas.width = map.dimensions.x;
	canvas.height = map.dimensions.y;
	redraw();
	});

	redraw();
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Modest Maps JS Demo \| Great Circle</title>
	<link rel='stylesheet' href='style.css'>
	</head>

	<body onload='initMap()'>
	<div id='map' />
	<script src='https://rawgithub.com/stamen/modestmaps-js/master/modestmaps.min.js'></script>
	<script src='app.js'></script>
	</body>
	</html>
	body {
	font: 13px/22px 'Helvetica Neue', Helvetica, sans;
	margin: 0;
	padding: 0;
	}
	#map {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	}