Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EON Map Critical Issue - Displaying Marker Data #19

Open
Larry3DT opened this issue May 12, 2017 · 1 comment
Open

EON Map Critical Issue - Displaying Marker Data #19

Larry3DT opened this issue May 12, 2017 · 1 comment

Comments

@Larry3DT
Copy link

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

@hZarin
Copy link

hZarin commented Aug 8, 2018

hi @Larry3DT :)
eon.map({
pubnub: pubnub,
// setView: ([43.6475, -79.3838], 14),
id: 'map',
mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
mbId: 'ianjennings.l896mh2e',
channelGroups: ['pubnub-mapbox-example'],
connect: connect,
history: false,
options: {
zoomAnimation: false,
center: [35.6892,51.3890]
// zoom: 13
},
marker: function (latlng, data) {
var marker = new L.marker(latlng, {
icon: L.mapbox.marker.icon()
}),
popup = channels[indexChannel];
marker.bindPopup(popup);
indexChannel = indexChannel + 1;

            return marker;
        }

i read data for marker , from channels[indexChannel]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants