Tristen Brown tristen

Great Circle

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

Hash

Best to download this example to see the full effect outside of an iframe. Explore the anchor links in the example above. The hash links are refresh the map to the exact coordinates described.

Contributors

Locate the section for your github remote in the .git/config file. It looks like this:

[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
	url = [email protected]:joyent/node.git

Now add the line fetch = +refs/pull/*/head:refs/remotes/origin/pr/* to this section. Obviously, change the github url to match your project's URL. It ends up looking like this:

	var zoomSlider = document.getElementById('zoom');
	var zoomValue = document.getElementById('zoomvalue');
	var map, targetZoom;

	var initMap = function() {
	var template = 'http://{S}tile.openstreetmap.org/{Z}/{X}/{Y}.png';
	var subdomains = ['', 'a.', 'b.', 'c.'];
	var provider = new MM.TemplatedLayer(template, subdomains);
	map = new MM.Map('map', provider, null);

	var points = [];

	var clusters = {};

	points.map(function(x) {
	if (clusters[x.coordinates.join(',')]) {
	clusters[x.coordinates.join(',')].push(x);
	}
	clusters[x.coordinates.join(',')] = [x];
	});

	(function($) {
	$.fn.mapbox = function() {
	return this.map(function(x) {
	var $this = $(this);
	if (!$this.data('map')) $(this).data('map', mapbox.map(this));
	return $this.data('map');
	});
	};
	})(jQuery);

	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 14px;
	}

	import subprocess
	import sys, re
	MERC = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs'

	infile = sys.argv[1]

	info_output = subprocess.Popen(['gdalinfo', infile], stdout=subprocess.PIPE).communicate()[0]

	size_is_re = re.compile('Size is (?P<width>\d+), (?P<height>\d+)')
	size_is = filter(lambda x: x, map(lambda x: size_is_re.match(x), info_output.split('\n')))

	<!DOCTYPE html>
	<html>
	<head>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.js'></script>
	<script src='http://d3js.org/d3.v2.min.js?2.9.3'></script>
	<link
	href='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.css'
	rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }

	<html>
	<head>
	<title>runs over time</title>
	<style>
	body { margin: 0; padding: 0; background:#f8f8f8; }
	svg {
	font: 10px sans-serif;
	}
	path {
	stroke: steelblue;