Configuration API for PubNub EON Map SDK

EON Map complete API reference for building real-time applications on PubNub, including basic usage and sample code

Initialization

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

Description

This function is used for initializing the PubNub Client API context. This function must be called before attempting to utilize any API functionality in order to establish account level credentials such as publishKey and subscribeKey.

Method(s)

To Initialize PubNub you can use the following method(s) in the EON Map SDK:

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

Basic Usage

Initialize the PubNub client API

Required UUID

Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the UUID, you won't be able to connect to PubNub.

let pubnub = new PubNub({
    subscribeKey: "mySubscribeKey",
    publishKey: "myPublishKey",
    cipherKey: "myCipherKey",
    authKey: "myAuthKey",
    logVerbosity: true,
    uuid: "myUniqueUUID",
    ssl: true,
    presenceTimeout: 130
});

Returns

It returns the PubNub instance for invoking PubNub APIs like publish(), subscribe(), history(), hereNow(), etc.

Other Examples

Configure using your own PubNub API Keys

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

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

Required UUID

Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the UUID, you won't be able to connect to PubNub.

<div data-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
                let 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=' +

show all 49 lines

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.

Required UUID

Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the UUID, you won't be able to connect to PubNub.

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

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