• Stars
    star
    135
  • Rank 269,239 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Realtime maps with PubNub and MapBox.

Please note that this project is no longer actively maintained or accepting Pull Requests. The EON library remains available on npm, bower, or through hotlink.


EON Maps

Real-time location tracking powered by PubNub and MapBox or Google Maps.

Examples

Installing

Hotlink

<script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
<link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>

Bower

bower install eon-map --save

Check out our bower example.

NPM

npm install eon-map --save

Check out our webpack example.

Quickstart

Call eon.map({}). Check out the table of options below for more information.

<div id='map'></div>
<script type="text/javascript">

var channel = 'pubnub-mapbox';

var pn = new PubNub({
  publishKey:   'YOUR_PUB_KEY', // replace with your own pub-key
  subscribeKey: 'YOUR_SUB_KEY'  // replace with your own sub-key
});

var map = eon.map({
  pubnub: pn,
  id: 'map',
  mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
  mbId: 'ianjennings.l896mh2e',
  channels: [channel]
});

</script>

Init

Parameter Value Default
id The ID of the element where the map will be rendered. undefined
channels An array of PubNub channels to subscribe to. Either channels or channelGroups must be supplied. false
channelGroups An array of PubNub channel groups to subscribe to. Either channels or channelGroups must be supplied. false
transform Method for changing the payload format of your stream. function(m){}
history Use PubNub history call to retrieve last message. This will display points at their last known location. Requires PubNub storage to be enabled. false
pubnub An instance of the PUBNUB javascript global. This is required when using your own keys. See the subscribeKey example. false
connect A function to call when PubNub makes a connection. See PubNub subscribe function(){}
marker A custom Mapbox marker object. Use this to change the marker icon, tooltip, etc. L.marker
rotate Add bearing to markers in options.angle. This won't have any effect unless you're using a rotated marker type. false
message A function to call everytime a PubNub message is recieved. See PubNub subscribe function(message, timetoken, channel){}
transform Method for changing the payload format of your stream. See example function(m){return m}
provider Google or Mapbox mapbox
mbToken Mapbox API Token (Mapbox Only). undefined
mbId Mapbox Map ID (MapBox Only). undefined
options An options object supplied to the MapBox Maps constructor (MapBox Only). {}
googleKey Google Maps API Key (Google Maps Only) undefined
googleMutant Configure Google Maps Styles and Options as documented in Google Mutant Plugin { type: 'roadmap'}

Lat/Long Values

eon.map expects an array of objects to be published on the same channel it's subscribed to. More on publishing in the next section.

For example, below you can find a list of all the Torchy's Tacos in Austin, TX.

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] }
];

Publishing Messages

The function below is called connect and fires when the pubnub_mapbox library is ready.

This function uses the included PubNub library to pubnub.publish() packets to the pubnub.subscribe() call waiting inside the Mapbox framework.

Notice how the subscribeKey and channel/channels matches.

function connect() {

  var point = {
    latlng: [37.370375, -97.756138]
  };

  var pn = new PubNub({
    publishKey:   'YOUR_PUB_KEY', // replace with your own pub-key
    subscribeKey: 'YOUR_SUB_KEY'  // replace with your own sub-key
  });

  setInterval(function(){
    var new_point = JSON.parse(JSON.stringify(point));

    new_point.latlng = [
      new_point.latlng[0] + (getNonZeroRandomNumber() * 0.1),
      new_point.latlng[1] + (getNonZeroRandomNumber() * 0.2)
    ];

    pn.publish({
      channel: channel,
      message: [new_point] // even a single point should be an array
    });

  }, 500);

};

var map = eon.map({
  pubnub: pn,
  id: 'map',
  mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
  mbId: 'ianjennings.l896mh2e',
  channels: [channel],
  connect: connect
});

You probably want to publish data from the back-end instead. Check out our docs for more info:

http://www.pubnub.com/documentation/

Following a Point

You can tell the map to follow a point to it's new location whenever data is received by supplying a message callback.

var pn = new PubNub({
  publishKey:   'YOUR_PUB_KEY', // replace with your own pub-key
  subscribeKey: 'YOUR_SUB_KEY'  // replace with your own sub-key
});

var map = eon.map({
  pubnub: pn,
  id: 'map',
  mbId: 'ianjennings.l896mh2e',
  //...
  message: function (data) {
    map.setView(data[3].latlng, 13);
  }
});

Marker Customization

You can supply a custom Mapbox marker object with custom tooltips by extening the L.marker object provided by mapbox. Learn more about custom markers here.

<div id='map'></div>
<script>
  L.RotatedMarker = L.Marker.extend({
    options: { angle: 0 },
    _setPos: function(pos) {
      L.Marker.prototype._setPos.call(this, pos);
      if (L.DomUtil.TRANSFORM) {
        // use the CSS transform rule if available
        this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
      } else if (L.Browser.ie) {
        // fallback for IE6, IE7, IE8
        var rad = this.options.angle * L.LatLng.DEG_TO_RAD,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad);
        this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
          costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
      }
    }
  });

  var pn = new PubNub({
    publishKey:   'YOUR_PUB_KEY', // replace with your own pub-key
    subscribeKey: 'YOUR_SUB_KEY'  // replace with your own sub-key
  });

  var map = eon.map({
    pubnub: pn,
    id: 'map',
    mbId: 'ianjennings.lec77m70',
    mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
    channels: ['rutgers-bus-data'],
    rotate: true,
    history: true,
    marker: function (latlng, data) {

      var marker = new L.RotatedMarker(latlng, {
        icon: L.icon({
          iconUrl: 'http://i.imgur.com/2fmFQfN.png',
          iconSize: [9, 32]
        })
      });

      marker.bindPopup('Route ' + data.routeTag.toUpperCase());

      return marker;

    }
  });
</script>

Configure using your own PubNub API Keys

Using your own API Key with Eon Maps

You can set the pubnub init parameter when using Eon Maps. This allows you to configure PubNub client connections with extra security options such a auth_key and your cipher_key. You should also set secure: true and ssl: true as well.

<div id="map"></div>
<script>
  var pn  = PUBNUB({
    subscribeKey : 'YOUR_SUB_KEY',
    ssl : true
  });
  var channel = 'my-map';
  var map = eon.map({
    pubnub: pn,  // PubNub goes here
    channels: channel,
    id: 'map',
    mbId 'mapbox.streets',
    mbToken: 'pk.ey31IjoiaWRtc3giLCJhIjoiZZ1zMGI2ZjBlNTMxZjk5YTEwNjM5WNJlOWI4MmJiZGIifQ.U1jMQo2QVeuUtt85oD7hkQ'
  });
</script>

Kitchen Sink

Check out the bus.html and flight.html for full featured examples.

Customizing with Mapbox

The MapBox map object is returned by eon.mapbox and can be customized using the Mapbox API. Also see the Mapbox examples page.

Also note that you can customize your map using Mapbox map editor. You can change the map background style, add static markers, etc. Visit Mapbox for your own API key.

Distributed Systems

The EON library compiles all messages at designated intervals. This means you can publish from multiple sources into one map. For example, you can map the individual locations of 3 phones by supplying the same channel to your PubNub publish requests. The flight example works like this; not every flight is updated on every subscribe call.

More Repositories

1

eon

An open-source chart and map framework for realtime data.
Shell
879
star
2

pubnub-api

APIs for developers building secure realtime mobile, web, and IoT apps.
JavaScript
817
star
3

java

PubNub Java-based APIs for core Java, Android
Java
624
star
4

javascript

PubNub JavaScript SDK docs https://www.pubnub.com/docs/sdks/javascript
JavaScript
539
star
5

real-time-stocks

This repository includes full app code for streaming stock quote data from PHP to a JavaScript HTML5 app. The PubNub Real-time Network offers a Globally Distributed solution for streaming real-time data to millions of users in less than 0.25 seconds. This provides developers the capability to utilize the Service Mediation aspect of the PubNub network to stream data over TCP socket connections using WebSockets and other protocols. This repository is an HTML5 JavaScript and CSS3 example using live real-time data stream from a server. Where PubNub fits in is in the mediation and brokering of the message stream in real-time to millions of people. The PubNub Real-time Network provides highly reliable services for real-time data streams. The PubNub Real-Time Network Build real-time apps quickly and scale them globally.
HTML
205
star
6

objective-c

PubNub Objective-C based APIs for iOS and OS X
Objective-C
178
star
7

react-chat-components

Chat UI Components to build chat applications with PubNub on React with TypeScript support
TypeScript
173
star
8

python

PubNub Python-based SDK with Asyncio support
Python
154
star
9

paper-chat

A simple chat room in Material Design build with Polymer (Polymer 0.5)
HTML
152
star
10

php

PubNub clients for PHP
PHP
124
star
11

eon-chart

Realtime animated graphs with PubNub and C3.
JavaScript
123
star
12

ruby

PubNub Ruby-based APIs
Ruby
119
star
13

genetic-car-2

Genetic Cars 2 (Globally Distributed)
JavaScript
114
star
14

rltm.js

Easily swap realtime providers with a single code base
JavaScript
107
star
15

go

PubNub clients for Go
Go
104
star
16

arduino

The Official PubNub Arduino-based API!
C++
103
star
17

c-sharp

PubNub clients for C-Sharp based languages, including MS Windows C#/.net, Silveright, IIS, and Mono
C#
101
star
18

typescript-ref-app-team-chat

Team Chat Reference Application for PubNub Chat With React, Redux and TypeScript
TypeScript
98
star
19

chat-engine

Object oriented event emitter based framework for building chat applications in Javascript.
JavaScript
96
star
20

workshop-raspberrypi

IoT Hands On Workshop: Build a Realtime App with Raspberry Pi 2 and PubNub. Demo Web ->
Python
89
star
21

pubnub-angular

Official PubNub AngularJS SDK
JavaScript
84
star
22

angular-js

Example of AngularJS integration with the PubNub AngularJS SDK v1
CSS
78
star
23

webrtc-chat

A simple webrtc chatting application.
JavaScript
69
star
24

pubnub-xkcd

http://twitter.com/stephenlb - PubNub Powered xkcd MMO World Game. Live with WebSockets and rendered with HTML5 Canvas.
JavaScript
56
star
25

react

TypeScript
49
star
26

webgl-visualization

A visualization of the PubNub traffic in WebGL.
JavaScript
47
star
27

pi-house

A simplified version of Raspberry Pi House web interface.
CSS
47
star
28

c

PubNub clients for C, C++, and Raspberry Pi
C
46
star
29

d3-bubble

Showcasing d3 bubble chart using PubNub streaming data
CSS
43
star
30

c-core

PubNub for C and C-like platforms build home
C
43
star
31

open-growth

Open Growth - grow your business 10x by automating tedious workforce tasks with machines - rules-based "customer delighter" with MonkeyLearn ML/AI enriched customer profile building. A framework for Developers capable of delighting your customers with template generated multi-channel messages in realtime.
JavaScript
38
star
32

pubnub-chat-channel-presence

PubNub Chat with Channel Presence is a new and breakthrough technology that has never existed until now empowering you (the developer) to obtain details about a PubNub Channel's Occupants. Receive Server Sent Notifications World-wide from PubNub's 10 Data Centers regarding "Who's There?" - Who is online and who will receive PubNub messages.
JavaScript
37
star
33

pubnUber

PubNub Uber (phonegap)
JavaScript
35
star
34

transportation

PubNub Transportation Solution
CSS
33
star
35

video-sync

PubNub VideoSync SDK for YouTube Video Multi-user Playback
HTML
32
star
36

iot-push-demo

A simulated IoT panel desktop UI for Android (GCM) and iOS (APNS) push notification demo using Cordova
JavaScript
32
star
37

pubnub-angular2

JavaScript
32
star
38

unity

PubNub for Unity3D 5.x
C#
31
star
39

backbone

An example of BackboneJS integration with the PubNub library.
JavaScript
30
star
40

rust

PubNub Rust SDK.
Rust
29
star
41

pubnub-jscourse

HTML
28
star
42

dart

PubNub Dart SDK
Dart
27
star
43

super-simple-chat

A simple chat room demo for a PhoneGap tutorial
CSS
26
star
44

Unity-Realtime-Chat-Room-Tutorial

A realtime unity chat room for iOS, Android, web and others.
C#
26
star
45

pubnub-android-chat

Java
25
star
46

swift

PubNub native Swift SDK for iOS, MacOS, WatchOS, TvOS
Swift
24
star
47

oi-web-notifications

A simple realtime web notification demo
CSS
23
star
48

Realtime-RaspberryPi-Temperature-Humidity-Sensor

Stream live temperature and humidity readings from the Raspberry Pi and visualize through realtime charts and graphs
JavaScript
22
star
49

LeapMotionServoBots

LeapMotionServoBots
Java
21
star
50

pubnub-polymer

A Custom element to connect PubNub data stream.
HTML
19
star
51

eon-workshop

Hands on Exercises for the EON workshop
HTML
19
star
52

secure-key-exchange

Babel - Encrypted Self Destructing Messaging with Asymmetric Key Exchange Public-Private Crypto.
JavaScript
19
star
53

haskell

PubNub Haskell SDK
Haskell
18
star
54

pongnub

Realtime Multiplayer Online Pong
JavaScript
16
star
55

pubnub-rickshaw-memory

Publish the memory usage of a nodeJS instance in pubnub-rickshaw format
JavaScript
16
star
56

d3-wordcloud

Demo of a word cloud generated from messages from a chat room
JavaScript
15
star
57

pubnub-ember

PubNub Ember SDK
CoffeeScript
14
star
58

swift-radio-station

Swift
14
star
59

am-chat

A demo of using PubNub Access Manager to secure a public chatting experience.
JavaScript
14
star
60

pubstrap-chat

Bootstrap 3 Chat Plugin
JavaScript
14
star
61

flutter-ref-app-simple-chat

Dart
13
star
62

go-metrics-statsd

library for sending statsd messages via go-metrics https://github.com/rcrowley/go-metrics
Go
13
star
63

ios-swift-todo-app

Collaborative to-do app in swift
Swift
13
star
64

swift-ref-app-team-chat

Team Chat Reference Application for PubNub Chat With SwiftUI and ReSwift
Swift
13
star
65

chat-examples-javascript

Sample code and apps for PubNub’s Chat Resource Center
JavaScript
12
star
66

webgl-stackhack

A collaborative block painting game.
JavaScript
12
star
67

eon-builder

CSS
12
star
68

chat-engine-examples

Examples for angular, react, jQuery, and NodeJS
HTML
12
star
69

swift-apple-watch-heart-rate-pubnub-eon

Objective-C
12
star
70

collab-notes-react

A collaborative stickie note web app with React.js, ES6, and PubNub
CSS
12
star
71

easy-hacker-news-stream

The Easiest Way to Create a Hacker News Feed using Python and JavaScript - We’ve all been sitting in the back of a CS lecture or class and looked up from our laptop to actually listen and taken a quick peek around at everyone’s laptops. More likely than not, quite a few of those screens were displaying the all too familiar Hacker News orange. While maybe we should all pay attention more to the speaker, it seems new, cool news always takes precedence. So what if you were determined to never miss a single article? Or what if you wanted to get every update from the site and automate based off that new information? By leveraging the power of PubNub’s real time global network and scraping a little RSS everyone will never miss a new Hacker News article again.
HTML
12
star
72

lua

lua
Lua
11
star
73

flutter-demo-app

Dart
11
star
74

kotlin-telemedicine-demo

A sample application that demonstrates how to build a feature-rich chat app for telemedicine using PubNub Chat and PubNub Kotlin SDK
Kotlin
11
star
75

pubnub-drone

Parrot AR 2.0 Drone Controlled with PubNub
JavaScript
10
star
76

auth-chat-demo

A simple chat room demo using PubNub JavaScript pub/sub API for both client and server, combined with PubNub Access Manager APIs and OAuth.
JavaScript
10
star
77

chat-engine-tutorial

JavaScript
10
star
78

moderation-dashboard

Moderation Dashboard is a React application that provides moderation capabilities to Chat applications built using PubNub and PubNub Chat Components
JavaScript
9
star
79

chat-examples-java

Sample code and apps for PubNub’s Chat Resource Center
Java
9
star
80

pubnub-tessel

Getting Started Guide and Example Programs for Tessel.io / PubNub integration
CoffeeScript
9
star
81

polymer-cat-chat-v1

A simple chat room in Material Design build with Polymer (Polymer 1.0)
HTML
9
star
82

LinkItONE

PubNub LinkIt ONE Library
C++
8
star
83

redux

Redux based Client State Management for interacting with PubNub Realtime APIs
TypeScript
8
star
84

vue

JavaScript
8
star
85

pubnub-rickshaw

HTML
8
star
86

pubnub-bluetooth

Connect PubNub to tiny-circuits bluetooth module (nrf8001)
JavaScript
8
star
87

kafka-bridge

Messages from your Kafka cluster can be received on a target mobile device.
Rust
7
star
88

chat-engine-apple

Objective-C
7
star
89

tutorial-app-react-native

JavaScript
7
star
90

javascript-quickstart-platform

JavaScript
HTML
7
star
91

rabbitmq

Adapter to connect PubNub's real-time network with RabbitMQ deployments behind an enterprise's firewall
Java
7
star
92

bitcoin

Real-time BitCoin graphs with PubNub and D3.js
CSS
7
star
93

kotlin

PubNub Kotlin SDK
Kotlin
7
star
94

bootstrap-content-curator

A real-time feed management system using Bootstrap UI that enables the rapid authoring of feed headlines for applications in social news, social TV, social music, social sports, social commerce and social finance.
HTML
7
star
95

johnnyfive-eon

Realtime data visualization with PubNub EON Demo & Arduino: Displaying the data sent by Arduino with DS18B20 temperature sensor using Johnny-Five
HTML
7
star
96

pubnub-chatterbox-ios

Objective-C
6
star
97

brightscript

Brightscript
6
star
98

js-chat

PubNub JavaScript Chat SDK
TypeScript
6
star
99

graphql-pubnub-subscriptions

TypeScript
6
star
100

chat-examples-swift

Sample code and apps for PubNub’s Chat Resource Center
Swift
5
star