MapMapChartEONEON Map Configuration API Reference for Realtime Apps

EON Map complete API reference for building Realtime Applications on PubNub, including basic usage and sample code

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

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.
To Initialize Pubnub you can use the following method(s) in the EON Map SDK:
  1. ParameterTypeRequiredDefaultsDescription
    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
let pubnub = new PubNub({
	subscribeKey: "mySubscribeKey",
	publishKey: "myPublishKey",
	cipherKey: "myCipherKey",
	authKey: "myAuthKey",
	logVerbosity: true,
	uuid: "myUniqueUUID",
	ssl: true,
	presenceTimeout: 130
});
It returns the Pubnub instance for invoking PubNub APIs like publish(), subscribe(), history(), hereNow(), etc.
  1. <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>
  2. 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 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>
  3. You can tell the map to follow a point to it's new location whenever data is received by supplying a message callback.

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