EON Map Critical Issue - Displaying Marker Data #19
Description
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
