eon-map
Version:
Mapbox Realtime Maps with PubNub. Part of the EON Framework.
82 lines (66 loc) • 1.82 kB
HTML
<html>
<head>
<title>Leaflet</title>
<script type="text/javascript" src="../eon-map.js"></script>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div style="width: 100%; height:500px" id="map"></div>
<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 channel = 'pubnub-mapbox' + getNonZeroRandomNumber();
eon.map({
pubnub: pubnub,
id: 'map',
channels: [channel],
connect: connect,
options: {
center: new L.LatLng(37.370375, -97.75613851),
zoom: 5
},
provider: 'google',
googleKey: 'AIzaSyBYcy2l0Yf4lDADZ_U0zi6dy0M6pFZyPQA',
googleMutant: {
type: 'roadmap',
styles: [
{elementType: 'labels', stylers: [{visibility: 'off'}]},
{featureType: 'water', stylers: [{color: '#000000'}]}
]
}
});
function connect() {
var point = {
latlng: [37.370375, -97.756138]
};
setInterval(function(){
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)
];
pubnub.publish({
channel: channel,
message: [new_point]
});
}, 1000);
};
</script>
</body>
</html>