pubnub / eon-map

Realtime maps with PubNub and MapBox.
https://www.pubnub.com/developers/eon/
MIT License
135 stars 51 forks source link

EON Map Critical Issue - Displaying Marker Data #19

Open Larry3DT opened 7 years ago

Larry3DT commented 7 years ago

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 = [<?php echo $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 commented 6 years ago

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]