- Notifications
You must be signed in to change notification settings - Fork51
Realtime maps with PubNub and MapBox.
License
pubnub/eon-map
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Please note that this project is no longer actively maintained or accepting Pull Requests. The EON library remains available on npm, bower, or through hotlink.
Real-time location tracking powered byPubNub andMapBox orGoogle Maps.
<scripttype="text/javascript"src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script><linktype="text/css"rel="stylesheet"href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>
bower install eon-map --save
Check out ourbower example.
npm install eon-map --save
Check out ourwebpack example.
Calleon.map({}). Check out the table of options below for more information.
<divid='map'></div><scripttype="text/javascript">varchannel='pubnub-mapbox';varpn=newPubNub({publishKey:'YOUR_PUB_KEY',// replace with your own pub-keysubscribeKey:'YOUR_SUB_KEY'// replace with your own sub-key});varmap=eon.map({pubnub:pn,id:'map',mbToken:'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',mbId:'ianjennings.l896mh2e',channels:[channel]});</script>
| Parameter | Value | Default |
|---|---|---|
| id | The ID of the element where the map will be rendered. | undefined |
| channels | An array of PubNub channels to subscribe to. Eitherchannels orchannelGroups must be supplied. | false |
| channelGroups | An array of PubNub channel groups to subscribe to. Eitherchannels orchannelGroups must be supplied. | false |
| transform | Method for changing the payload format of your stream. | function(m){} |
| history | Use PubNub history call to retrieve last message. This will display points at their last known location. RequiresPubNub storage to be enabled. | false |
| pubnub | An instance of the PUBNUB javascript global. This is required when using your own keys. See thesubscribeKey example. | false |
| connect | A function to call when PubNub makes a connection. SeePubNub subscribe | function(){} |
| marker | A custom Mapbox marker object. Use this to change the marker icon, tooltip, etc. | L.marker |
| rotate | Add bearing to markers inoptions.angle. This won't have any effect unless you're usinga rotated marker type. | false |
| message | A function to call everytime a PubNub message is recieved. SeePubNub subscribe | function(message, timetoken, channel){} |
| transform | Method for changing the payload format of your stream. Seeexample | function(m){return m} |
| provider | Google or Mapbox | mapbox |
| mbToken | Mapbox API Token (Mapbox Only). | undefined |
| mbId | Mapbox Map ID (MapBox Only). | undefined |
| options | An options object supplied to theMapBox Maps constructor (MapBox Only). | {} |
| googleKey | Google Maps API Key (Google Maps Only) | undefined |
| googleMutant | Configure Google Maps Styles and Options as documented inGoogle Mutant Plugin | { type: 'roadmap'} |
eon.map expects an array of objects to be published on the same channel it's subscribed to. More on publishing in the next section.
For example, below you can find a list of all the Torchy's Tacos in Austin, TX.
vartorchys=[{latlng:[30.370375,-97.756138]},{latlng:[30.323118,-97.739144]},{latlng:[30.302816,-97.699490]},{latlng:[30.293479,-97.742405]},{latlng:[30.250337,-97.754593]},{latlng:[30.236689,-97.762730]}];
The function below is calledconnect and fires when thepubnub_mapbox library is ready.
This function uses the included PubNub library to pubnub.publish()packets to the pubnub.subscribe() call waiting inside theMapbox framework.
Notice how thesubscribeKey andchannel/channels matches.
functionconnect(){varpoint={latlng:[37.370375,-97.756138]};varpn=newPubNub({publishKey:'YOUR_PUB_KEY',// replace with your own pub-keysubscribeKey:'YOUR_SUB_KEY'// replace with your own sub-key});setInterval(function(){varnew_point=JSON.parse(JSON.stringify(point));new_point.latlng=[new_point.latlng[0]+(getNonZeroRandomNumber()*0.1),new_point.latlng[1]+(getNonZeroRandomNumber()*0.2)];pn.publish({channel:channel,message:[new_point]// even a single point should be an array});},500);};varmap=eon.map({pubnub:pn,id:'map',mbToken:'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',mbId:'ianjennings.l896mh2e',channels:[channel],connect:connect});
You probably want to publish data from the back-end instead.Check out our docs for more info:
http://www.pubnub.com/documentation/
You can tell the map to follow a point to it's new location whenever data is received by supplying amessage callback.
varpn=newPubNub({publishKey:'YOUR_PUB_KEY',// replace with your own pub-keysubscribeKey:'YOUR_SUB_KEY'// replace with your own sub-key});varmap=eon.map({pubnub:pn,id:'map',mbId:'ianjennings.l896mh2e',//...message:function(data){map.setView(data[3].latlng,13);}});
You can supply a custom Mapbox marker object with custom tooltips by extening theL.marker object provided by mapbox. Learn more about custom markershere.
<divid='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 availablethis._icon.style[L.DomUtil.TRANSFORM]+=' rotate('+this.options.angle+'deg)';}elseif(L.Browser.ie){// fallback for IE6, IE7, IE8varrad=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+')';}}});varpn=newPubNub({publishKey:'YOUR_PUB_KEY',// replace with your own pub-keysubscribeKey:'YOUR_SUB_KEY'// replace with your own sub-key});varmap=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){varmarker=newL.RotatedMarker(latlng,{icon:L.icon({iconUrl:'http://i.imgur.com/2fmFQfN.png',iconSize:[9,32]})});marker.bindPopup('Route '+data.routeTag.toUpperCase());returnmarker;}});</script>
You can set thepubnub init parameter when using Eon Maps. This allows you to configure PubNub client connections with extra security options such aauth_key and yourcipher_key. You should also setsecure: true andssl: true as well.
<divid="map"></div><script>varpn=PUBNUB({subscribeKey :'YOUR_SUB_KEY',ssl :true});varchannel='my-map';varmap=eon.map({pubnub:pn,// PubNub goes herechannels:channel,id:'map',mbId'mapbox.streets',mbToken:'pk.ey31IjoiaWRtc3giLCJhIjoiZZ1zMGI2ZjBlNTMxZjk5YTEwNjM5WNJlOWI4MmJiZGIifQ.U1jMQo2QVeuUtt85oD7hkQ'});</script>
Check out thebus.html andflight.html for full featured examples.
The MapBox map object is returned byeon.mapbox and can be customized using theMapbox API. Also see theMapbox examples page.
Also note that you can customize your map using Mapbox map editor. You can change the map background style, add static markers, etc. VisitMapbox for your own API key.
The EON library compiles all messages at designated intervals. This means you can publish from multiple sources into one map. For example, you can map the individual locations of 3 phones by supplying the same channel to your PubNub publish requests. Theflight example works like this; not every flight is updated on every subscribe call.
About
Realtime maps with PubNub and MapBox.