eon-map
Version:
Mapbox Realtime Maps with PubNub. Part of the EON Framework.
123 lines (104 loc) • 2.9 kB
HTML
<html>
<head>
<meta charset=utf-8 />
<title>EON Maps</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
</style>
<script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.1.0/eon.js"></script>
<link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.1.0/eon.css"/>
</head>
<body>
<div id='map'></div>
<script>
function getNonZeroRandomNumber(){
var random = Math.floor(Math.random()*199) - 99;
if(random==0) return getNonZeroRandomNumber();
return random;
}
</script>
<script>
var pn = new PubNub({
publishKey: 'demo',
subscribeKey: 'demo'
ssl: (('https:' == document.location.protocol) ? true : false)
});
function getNonZeroRandomNumber(){
var random = Math.floor(Math.random()*199) - 99;
if(random==0) return getNonZeroRandomNumber();
return random;
}
var channel = 'pubnub-mapbox-' + getNonZeroRandomNumber();
var map = eon.map({
pubnub: pn,
id: 'map',
mbId: 'ianjennings.l896mh2e',
mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
channels:[channel],
connect: connect,
message: function (data) {
map.setView(data[3].latlng, 13);
}
});
function connect() {
var me = {
icon: {
'marker-color': '#ce1126'
}
};
var them = {
icon: {
'marker-color': '#29abe2'
}
};
var torchys = [
{
latlng: [30.370375, -97.756138]
},
{
latlng: [30.323118, -97.739144]
},
{
latlng: [30.302816, -97.699490]
},
{
latlng: [30.293479, -97.742405]
},
{
latlng: [30.250337, -97.754593]
},
{
latlng: [30.236689, -97.762730]
}
];
setInterval(function(){
var new_torchys = JSON.parse(JSON.stringify(torchys));
for (var i = 0; i < new_torchys.length; i++) {
new_torchys[i] = {
marker: new_torchys[i].marker,
latlng: [
new_torchys[i].latlng[0] + (getNonZeroRandomNumber() * 0.0002),
new_torchys[i].latlng[1] + (getNonZeroRandomNumber() * 0.0002)
]
}
}
pn.publish({
channel: channel,
message: new_torchys
});
}, 1000);
};
</script>
</body>
</html>