markmarkoh/index.html

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Realtime Traffic Mapper</title>
	<link rel="stylesheet" href="http://www.maxux.net/devs/maptraffic/style.css" media="all" type="text/css" />
	<style>
		html, body, #map {
			height: 100%;
		}
	</style>

</head>

<body>
    <script src="http://d3js.org/d3.v3.js"></script>
	<script src="http://datamaps.github.io/scripts/topojson.js"></script>
	<script src="http://datamaps.github.io/scripts/datamaps.none.min.js"></script>

	<div id="map"></div>

	<script>
	var colors = [
		'#F0FF60',
		'#FFC460',
		'#FF7D60',
		'#FF6081',
		'#FF60C0',
		'#FF60F7',
		'#B760FF',
		'#7E60FF',
		'#6077FF',
		'#60AFFF',
		'#60F2FF',
		'#60FFC4',
		'#60FF75',
		'#9CFF60',
		'#D7FF60',
	];

	var deletion = 0;
	var arcs = [
	{
                origin: {
                        latitude: 0,
                        longitude: 0
                },
                destination: {
                        latitude: 0,
                        longitude: 0
                }
        }
	];

	//basic map config with custom fills, mercator projection
	var map = new Datamap({
		scope: 'world',
		element: document.getElementById('map'),
		projection: 'mercator',
		setProjection: function(element) {
			var projection = d3.geo.mercator()
				.center([10, 40])
				.scale(800)
				.translate([element.offsetWidth / 2, element.offsetHeight / 2]);

			var path = d3.geo.path()
				.projection(projection);

			return {path: path, projection: projection};
		},
		geographyConfig: {
			dataUrl: 'world.topo.hi-res.json',
			hideAntarctica: false,
			highlightOnHover: true,
			highlightFillColor: '#3B3B3B',
			highlightBorderColor: '#FFFFFF',
			borderWidth: 0.5
		},
		fills: {
			defaultFill: '#1E1E1E',
		},
		done: connect
	});

	function input(message) {
		console.log(message);

		if(deletion > 2048) {
			for(var i = 0; i < arcs.length; i++)
				delete arcs[i];

			arcs.length = 0;
			deletion = 0;

		} else arcs[deletion++] = {};

		arcs[arcs.length] =  {
			origin: {
				latitude: message.src[0],
				longitude: message.src[1]
			},
			destination: {
				latitude: message.dst[0],
				longitude: message.dst[1]
			},
			options: {
				strokeColor: colors[message.color % colors.length]
			}
		};

		map.arc(arcs, {strokeWidth: 2, arcSharpness: 0 });
	}

	// setInterval(input, 500);

	function connect() {
		var self = this;

		// legacy websocket protocol for iPhone and iPod
		console.log('Connecting');
		this.socket = new WebSocket("ws://www.maxux.net:1441/", "maptraffic");

		this.socket.onopen = function() {
			console.log('Connected');
		}

		this.socket.onmessage = function(msg) {
			json = JSON.parse(msg.data);
			input(json);
		}

		this.socket.onclose = function() {
			console.log('Disconnected');
		}
	};

	</script>
</body>

## world.topo.hi-res.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.topo.hi-res.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Realtime Traffic Mapper</title>
	<link rel="stylesheet" href="http://www.maxux.net/devs/maptraffic/style.css" media="all" type="text/css" />
	<style>
	html, body, #map {
	height: 100%;
	}
	</style>

	</head>

	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="http://datamaps.github.io/scripts/topojson.js"></script>
	<script src="http://datamaps.github.io/scripts/datamaps.none.min.js"></script>

	<div id="map"></div>

	<script>
	var colors = [
	'#F0FF60',
	'#FFC460',
	'#FF7D60',
	'#FF6081',
	'#FF60C0',
	'#FF60F7',
	'#B760FF',
	'#7E60FF',
	'#6077FF',
	'#60AFFF',
	'#60F2FF',
	'#60FFC4',
	'#60FF75',
	'#9CFF60',
	'#D7FF60',
	];

	var deletion = 0;
	var arcs = [
	{
	origin: {
	latitude: 0,
	longitude: 0
	},
	destination: {
	latitude: 0,
	longitude: 0
	}
	}
	];

	//basic map config with custom fills, mercator projection
	var map = new Datamap({
	scope: 'world',
	element: document.getElementById('map'),
	projection: 'mercator',
	setProjection: function(element) {
	var projection = d3.geo.mercator()
	.center([10, 40])
	.scale(800)
	.translate([element.offsetWidth / 2, element.offsetHeight / 2]);

	var path = d3.geo.path()
	.projection(projection);

	return {path: path, projection: projection};
	},
	geographyConfig: {
	dataUrl: 'world.topo.hi-res.json',
	hideAntarctica: false,
	highlightOnHover: true,
	highlightFillColor: '#3B3B3B',
	highlightBorderColor: '#FFFFFF',
	borderWidth: 0.5
	},
	fills: {
	defaultFill: '#1E1E1E',
	},
	done: connect
	});

	function input(message) {
	console.log(message);

	if(deletion > 2048) {
	for(var i = 0; i < arcs.length; i++)
	delete arcs[i];

	arcs.length = 0;
	deletion = 0;

	} else arcs[deletion++] = {};

	arcs[arcs.length] = {
	origin: {
	latitude: message.src[0],
	longitude: message.src[1]
	},
	destination: {
	latitude: message.dst[0],
	longitude: message.dst[1]
	},
	options: {
	strokeColor: colors[message.color % colors.length]
	}
	};

	map.arc(arcs, {strokeWidth: 2, arcSharpness: 0 });
	}

	// setInterval(input, 500);

	function connect() {
	var self = this;

	// legacy websocket protocol for iPhone and iPod
	console.log('Connecting');
	this.socket = new WebSocket("ws://www.maxux.net:1441/", "maptraffic");

	this.socket.onopen = function() {
	console.log('Connected');
	}

	this.socket.onmessage = function(msg) {
	json = JSON.parse(msg.data);
	input(json);
	}

	this.socket.onclose = function() {
	console.log('Disconnected');
	}
	};

	</script>
	</body>