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:

ParameterTypeRequiredDefaultDescription
idundefinedThe ID of the element where the map will be rendered.
channelsArrayOptionalfalseAn array of PubNub channels to subscribe to. Either channels or channelGroups must be supplied.
channelGroupsArrayOptionalfalseAn array of PubNub channel groups to subscribe to. Either channels or channelGroups must be supplied.
transformfunction(m){}Method for changing the payload format of your stream.
historyfalseUse PubNub history call to retrieve last message. This will display points at their last known location. Requires PubNub storage to be enabled.
pubnubInstanceYesfalseAn instance of the PubNub javascript global. This is required when using your own keys. See the subscribeKey example.
connectfunction(){}A function to call when PubNub makes a connection. See PubNub subscribe
markerL.markerA custom Mapbox marker object. Use this to change the marker icon, tooltip, etc.
rotatefalseAdd bearing to markers in options.angle. This won't have any effect unless you're using a rotated marker type
messagefunction(message, timetoken, channel){}A function to call everytime a PubNub message is received. See PubNub subscribe
transformfunction(m){return m}Method for changing the payload format of your stream.
providermapboxGoogle or Mapbox
mbTokenundefinedMapbox API Token (Mapbox Only).
mbIdundefinedMapbox Map ID (MapBox Only).
options{}An options object supplied to the MapBox Maps constructor (MapBox Only).
googleKeyundefinedGoogle 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);
}
});
Last updated on