Configuration API for 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:

* required
ParameterDescription
id
Type:
Default:
undefined
The ID of the element where the map will be rendered.
channels
Type: Array
Default:
false
An array of PubNub channels to subscribe to. Either channels or channelGroups must be supplied.
channelGroups
Type: Array
Default:
false
An array of PubNub channel groups to subscribe to. Either channels or channelGroups must be supplied.
transform
Type:
Default:
function(m){}
Method for changing the payload format of your stream.
history
Type:
Default:
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 *
Type: Instance
Default:
false
An instance of the PubNub javascript global. This is required when using your own keys. See the subscribeKey example.
connect
Type:
Default:
function(){}
A function to call when PubNub makes a connection. See PubNub subscribe
marker
Type:
Default:
L.marker
A custom Mapbox marker object. Use this to change the marker icon, tooltip, etc.
rotate
Type:
Default:
false
Add bearing to markers in options.angle. This won't have any effect unless you're using a rotated marker type
message
Type:
Default:
function(message, timetoken, channel){}
A function to call everytime a PubNub message is received. See PubNub subscribe
transform
Type:
Default:
function(m){return m}
Method for changing the payload format of your stream.
provider
Type:
Default:
mapbox
Google or Mapbox
mbToken
Type:
Default:
undefined
Mapbox API Token (Mapbox Only).
mbId
Type:
Default:
undefined
Mapbox Map ID (MapBox Only).
options
Type:
Default:
{}
An options object supplied to the MapBox Maps constructor (MapBox Only).
googleKey
Type:
Default:
undefined
Google Maps API Key (Google Maps Only)
googleMutant
Type:
Default:
{ 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
On this page