Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Maxnet Updates
<!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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.