---
source_url: https://www.pubnub.com/docs/sdks/eon-map/api-reference/configuration
title: Configuration API for EON Map SDK
updated_at: 2026-06-12T11:25:15.880Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# 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:

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| id |  | Optional | `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 |  | Optional | `function(m){}` | Method for changing the payload format of your stream. |
| history |  | Optional | `false` | Use PubNub history call to retrieve last message. This will display points at their last known location. Requires [Message Persistence](https://www.pubnub.com/products/pubnub-platform/) 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 |  | Optional | `function(){}` | A function to call when PubNub makes a connection. See [PubNub subscribe](https://www.pubnub.com/docs/sdks/javascript/api-reference/publish-and-subscribe#subscribe) |
| marker |  | Optional | `L.marker` | A custom Mapbox marker object. Use this to change the marker icon, tooltip, etc. |
| rotate |  | Optional | `false` | Add bearing to markers in `options.angle`. This won't have any effect unless you're using [a rotated marker type](https://docs.mapbox.com/mapbox.js/example/v1.0.0/rotating-controlling-marker/) |
| message |  | Optional | `function(message, timetoken, channel){}` | A function to call everytime a PubNub message is received. See [PubNub subscribe](https://www.pubnub.com/docs/sdks/javascript/api-reference/publish-and-subscribe#subscribe) |
| transform |  | Optional | `function(m){return m}` | Method for changing the payload format of your stream. |
| provider |  | Optional | `mapbox` | Google or Mapbox |
| mbToken |  | Optional | `undefined` | Mapbox API Token (Mapbox Only). |
| mbId |  | Optional | `undefined` | Mapbox Map ID (MapBox Only). |
| options |  | Optional | `{}` | An options object supplied to the [MapBox Maps constructor](https://docs.mapbox.com/mapbox.js/api/v2.4.0/l-mapbox-map/) (MapBox Only). |
| googleKey |  | Optional | `undefined` | Google Maps API Key (Google Maps Only) |
| googleMutant |  | Optional | `{ type: 'roadmap'}` | Configure Google Maps Styles and Options as documented in [Google Mutant Plugin](https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant#usage) |

### Sample code

#### Initialize the PubNub client API

:::note 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.
:::

```javascript
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

```javascript
<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](https://docs.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/)

:::note 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.
:::

```javascript
<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=' +
                costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
            }
        }
    });

    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.lec77m70',
        mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
        channels: ['rutgers-bus-data'],
        rotate: true,
        history: true,
        marker: function (latlng, data) {

            let 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>
```

#### 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.

:::note 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.
:::

```javascript
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);
    }
});
```