I think mapbox is on bower now, so include it from there rather than statically

Hi,

I have the following use case:

• In our office I have a "realtime" EON map that displays markers
• These markers pop-in whenever one of our customers opens a web-form in our application
• I would like these markers to dynamically update when e.g. a state changes (timeout / login) or when certain events happen in our web-form.

So far I've succesfully got the map up, and get the markers to show / remove themselves whenever someone logs in or out. The markers also have a little pop-up displaying information about the remote source. All is well here.

What I can't get to work though, is updating properties other than the latlng / position of a marker. I would love to be able to change things like the pop-up, and optionally the marker color or icon.

It appears that the "message" function of the map is called each time an event is published from a remote source, but the "marker" function is not. And it appears that I can only set a custom icon and pop-up in the "marker" function. I don't know how to access the markers properties itself such as the icon, color and pop-up from within the "message" function.

How can I access the properties of the marker that the "message" belongs to so I can customise the marker based on data in the event that I receive? Is that possible?

Lastly it would also be nice if I could somehow "timeout" markers when they don't receive events for e.g. 10 minutes or longer.

Hope you guys are still developing on the EON map and could provide me some pointers here! Thanks a bunch.

Matthijs

• Amsterdam

The line is missing a ',' after subscribeKey is set:
var pn = new PubNub({
publishKey: 'demo',
subscribeKey: 'demo'
ssl: (('https:' == document.location.protocol) ? true : false)
});

I'm trying to build an Application which would allow me to drill-down on viewing devices, so my idea was that I'd have an index in which eon-map would be subscribed to something like "telemetries.*", and then if an specific device was selected eon-map would subscribe to "telemetries.{id}", for example. Trying it out though, it doesn't seem like subscribing like this works. Is this not supported yet or am I just missing something? Thanks!

Getting error when I try to configure with google maps.
Configuration:

var map = eon.map({
      pubnub: pn,
      provider: 'Google',  // tried with 'google' and 'Google' but didn't worked.
      id: 'tracking-map',
      googleKey: 'map_key',  //google map key.
      channels: ['channel']
    });

Error: Please supply a Mapbox Token:

Hi,

This project is awesome, and I'm currently using this framework to build a realtime dispatch system. The web app uses angularjs. So I was wondering if it was possible for a maker popup to have custom html instead of just text. Or, is there an onclick listener for marker popups? I need to show relative information when the person clicks on a popup.

Thanks for helping

Ideally, I'd like to be able to loop through and fade/change the color for all markers that haven't been updated after a certain time. Is this possible with the current Eon framework?

zooming creates artifacts

I have a set of latitude and longitude with their timestamps at which they were captured. I wish to animate a vehicle on the map using these data points. Is there any way to correct the location to the nearest road if the location is a bit away from the road ?

Goal is to see connected clients on a map.

@pubnubcraig says:

It would be cool to have eon.map/char {…, presence: true, …} and have a transformPresence or just use current transform with channel param passed in. (just off the top of my head)

thing of the possibilities for join, leave/timeout and state-change events and how you would use that to customize the map or chart, like icon animation or color change, etc.

Ian says:
right now the best way is to republish presence events
a user's state parameter would supply the lat / long in the same format as eon
then from there everything would be the same, but maybe like a isPresnece parameter like you suggested in the callbacks

Uncaught TypeError: L.RotatedMarker is not a constructor.

where do i get the mb_id and mb_token?
it isnt mention anywhere.
and how to configure map for different area.

Hi –
Please can you help me. I have been battling with this for days now and is now becoming critical. I am trying to display data in a Marker. I have just short of copied your Flight example and have also tried your Bus Route example.
The minute I try add to the marker.bindPopup(), the form will not render. I have highlighted in Yellow both the Publish and Subscribe
In an effort to hopefully make it easier for you to correct me, please see my code below.
I really appreciate your help.
//////////////// Code//////////
$peccr_code="CSI"; //[peccr_code];
$Qsql="SELECT assetID FROM PECCR_Rescources WHERE peccr_code='".$peccr_code."' AND (availability='Transporting' || availability='Accepted')";
$result = mysql_query($Qsql);
$channels="";
$spacer="', ";
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
$channels= $channels."'".($row[0]).$spacer;
// printf ("Name: %s", $row[0]);
}
$channels=trim($channels);
$channels=substr($channels, 0, -1);
?>
DOCTYPE html
Transporting and Accepted Ticket Track
body {
margin: 0;
padding: 0;
}
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
function getNonZeroRandomNumber(){
var random = Math.floor(Math.random()199) - 99;
if(random==0) return getNonZeroRandomNumber();
return random;
}
var pubnub = new PubNub({
publishKey: 'pub-c-580cec3e-9217-41d6-becd-78b9b526041a',
subscribeKey: 'sub-c-8baae792-de10-11e6-831c-02ee2ddab7fe'
});
var channels = [];
// create channel groupchannels
pubnub.channelGroups.addChannels(
{
channels: channels,
channelGroup: "sc_tickets"
},
function(status) {
if (status.error) {
console.log("operation failed w/ status: ", status);
} else {
console.log("operation done!")
// list channels
pubnub.channelGroups.listChannels(
{
channelGroup: "sc_tickets"
},
function (status, response) {
if (status.error) {
console.log("operation failed w/ error:", status);
return;
}
console.log("listing push channel for device")
response.channels.forEach( function (channel) {
console.log(channel)
})
}
);
}
}
);
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 (http://l.browser.ie/) ) {
// fallback for IE6, IE7, IE8
var 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 + ')';
}
}
});
eon.map({
pubnub: pubnub,
id: 'map',
mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
mbId: 'ianjennings.l896mh2e',
channelGroups: ['sc_tickets'],
connect: connect,
rotate: true,
history: false,
marker: function (latlng, data) {
var marker = new L.RotatedMarker(latlng, {
icon: L.icon({
iconUrl: 'https://i.imgur.com/2fmFQfN.png',
iconSize: [9, 32]
})
});
marker.bindPopup('Ticket ' );
return marker;
}
});
function publish(pointId, channel) {
var point = {
latlng: [37.370375, -97.756138]
};
var new_point = JSON.parse(JSON.stringify(point));
new_point.latlng = [
new_point.latlng[0] + (getNonZeroRandomNumber() * 0.05),
new_point.latlng[1] + (getNonZeroRandomNumber() * 0.1)
];
var m = {};
m[pointId] = new_point;
pubnub.publish({
channel: channel,
message: m,
data: ["A33D8C",
37.6271,
-122.3858,
118]
});
}
function connect() {
setInterval(function(){
publish('first', channels[0]);
publish('second', channels[1]);
publish('third', channels[2]);
}, 5000);
};
function getUrlVars() {
var vars = [];
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&])/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
Best regards,
Larry

Thanks for adding channelGroups!

I'm getting an error that pubnub is not defined when I attempt to call eon.map with channelGroups. It's just a typo in pubnub-mapbox.js (it needs to be self.pubnub):

May I ask, do you have a API for "mapbox style" in eno.map function?

Such as "mbToken" and "mbid" like this:
mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg'
mbId: 'ianjennings.l896mh2e'

It seems impossible to somehow get a working mbId on Mapbox anymore as they changed their API / GUI and there is no more classic Studio...
Maybe its time to upgrade EON Maps to the new Mapbox GL API, where only the accessToken is needed?

How do I have multiple points displayed on the map, all animated when their position is updated, but without passing the array of all location points into the Pubnub channel at once? E.g., if I have three cars I want to track, each car would push up their own location separately. The examples such as https://www.pubnub.com/developers/eon/map/flight/ seem to imply you need to bach all of the location points together. I'd love to know what I'm missing!

If someone does not supply the channels param to the eon.map object a very confusing error is thrown.

Catch this and throw our own error.

Hi

When using One Marker example how do I also make show a path that a marker traveled? For example show a path using X number of last coordinates. Is it possible ?

Many new developers are not familiar with the concept of dynamic keys:

var a = "key";
var data = {};
data[a] = true;
console.log(data.key);
// true

It would make sense to provide the option of:

{
    latlng: [1,2,],
    key: 'something'
}

As an option

Just wondering if you have any examples of adding lines. We have referenced API info for Mapbox but receive errors. Note - we are implementing in Ionic mobile framework

var map = eon.map({
pubnub: pubNub,
id: 'map',
mbToken: this.mbToken,
mbId: this.mbId,
channelGroups: [this.channelGroup],
connect: this.connect(this),
history: false,

  options: {
    zoomAnimation: false,
    tileLayer: 'safetravels.cjln3hfpn3tlb2vs6et264mme-9xcwi',
    featureLayer: function(){
    	var geojson = [
		  {
		    "type": "Feature",
		    "geometry": {
		      "type": "LineString",
		      "coordinates": [
		        [-77.03238901390978,38.913188059745586],
		        [-122.414, 37.776]
		      ]
		    },
		    "properties": {
		      "stroke": "#fc4353",
		      "stroke-width": 5
		    }
		  }
		];
L.geoJson(geojson ).addTo(map);
  }
  },

});

Error:

TypeError: Cannot set property 'accessToken' of undefined
TypeError: Cannot set property 'accessToken' of undefined
at new create (eon.js:9935)
at Object.window.eon.map (eon.js:10169)
at HomePage.webpackJsonp.194.HomePage.ngOnInit

what does it mean if have a ".grid.json" error in my server request? It seems like I have a tile.grid.json file missing, does this have something to do with the eon? how can I make my tile.grid.json file?

I'm using eon with channelGroups. In the description of Distributed Systems it seems that the intention is for multiple sources to be able to publish to the same channel, and have eon take care of automatically creating the Mapbox markers and updating their positions. For channelGroups, this doesn't seem to be working. I have multiple sources publishing to multiple channels, but all channels are assigned to one channel group. Although eon is receiving all the messages from that channel group, I'm only seeing one marker on the map. I've made sure the messages are arrays as indicated in the documentation.

I want to display multiple markers data coming from multiple channels. is it possible? here's my data structure of my message

[{
latlng: [1.00,1.00]
}]

right now if I initialize my constructor like below, no matter which channels my data comes from, only one marker is rendered on the map and updated

var map = eon.map({
          pubnub: pn,
          id: 'map',
          options: {
          center: [23.7167498, 90.4154881], // [lat, lng]
          zoom: 14,
          },
          mbToken: '....',
          mbId: '....',
          channels: ['bus-01','bus-02']
        });

I cannot get it working by using the below script, the requetsed url is still "demo" url

http://ps4.pubnub.com/subscribe/demo/my-map/0/0?uuid=some_long_string&pnsdk=PubNub-JS-Web%2F3.7.8

<script>

  var channel = 'my-map';

  eon.map({
    id: 'map',
    mb_token: 'pk.ey31IjoiaWRtc3giLCJhIjoiZZ1zMGI2ZjBlNTMxZjk5YTEwNjM5WNJlOWI4MmJiZGIifQ.U1jMQo2QVeuUtt85oD7hkQ',
    mb_id: 'mapbox.streets',
    subscribe_key: 'my_own_pubnub_sub_key',
    channel: channel
  });

</script>

However if I used the below script, it works

<script>
var output = PUBNUB.$('output')
,   pubnub = PUBNUB.init({ subscribe_key : 'my_own_key' });

pubnub.subscribe({
    channel  : 'my-map',
    callback : function(message) {
        output.innerHTML = [
            JSON.stringify(message), '<br>', output.innerHTML
        ].join('');
    }
});
</script>

The only differences is I am not using eon-map eon.map function.

Could someone please show how to use own pubnub key

Is there a way to access the leaflet object when using 'google' provider? Not having this seriously limits functionality we can build, and it shouldn't be so hard to expose it, I imagine, greatly increasing developer freedom to tinker with the maps :)

Could you post an example of transform function. The given link in the README.md
https://github.com/pubnub/eon-chart/blob/master/examples/transform.html does not work.