eon-map
Version:
Mapbox Realtime Maps with PubNub. Part of the EON Framework.
124 lines (104 loc) • 3.21 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 pubnub = new PubNub({
publishKey: 'demo',
subscribeKey: 'demo'
});
var channels = ['pubnub-mapbox-1', 'pubnub-mapbox-2', 'pubnub-mapbox-3'];
// create channel group
pubnub.channelGroups.addChannels(
{
channels: channels,
channelGroup: "pubnub-mapbox-example"
},
function(status) {
if (status.error) {
console.log("operation failed w/ status: ", status);
} else {
console.log("operation done!")
// list channels
pubnub.channelGroups.listChannels(
{
channelGroup: "pubnub-mapbox-example"
},
function (status, response) {
if (status.error) {
console.log("operation failed w/ error:", status);
return;
}
console.log("listing push channel for device")
response.channels.forEach( function (channel) {
console.log(channel)
})
}
);
}
}
);
eon.map({
pubnub: pubnub,
id: 'map',
mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
mbId: 'ianjennings.l896mh2e',
channelGroups: ['pubnub-mapbox-example'],
connect: connect,
history: true,
options: {
zoomAnimation: false,
}
});
function publish(pointId, channel) {
var point = {
latlng: [37.370375, -97.756138]
};
var new_point = JSON.parse(JSON.stringify(point));
new_point.latlng = [
new_point.latlng[0] + (getNonZeroRandomNumber() * 0.05),
new_point.latlng[1] + (getNonZeroRandomNumber() * 0.1)
];
var m = {};
m[pointId] = new_point;
pubnub.publish({
channel: channel,
message: m
});
}
function connect() {
setInterval(function(){
publish('first', channels[0]);
publish('second', channels[1]);
publish('third', channels[2]);
}, 5000);
};
</script>
</body>
</html>