Not able to set infowindow in map using pubnub

Question

I want to track driver vehicles so that i am using pubnub service

Library : https://github.com/pubnub/eon-map (suggested by pubnub support team)

I set one socket to get latitude and longitude from drivers mobile devices every 30 seconds and using that values i showing markers on my admin dashboard map.

Here is my code:

// socket connection code is write here and socket is connected successfully

var pn = new PubNub({
      publishKey: 'pub-adsasdasd',
      subscribeKey: 'sub-asdasdadasdas'
    });
var channel = 'eon-maps-geolocation-input';

var map = eon.map({
      pubnub: pn,
      id: 'map',
      mbId: 'ianjennings.l896mh2e',
      mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
      channels:[channel],
      options: {
          center: new L.LatLng(31.0461,34.8516),
          zoom: 8
      },
      provider: 'google',
      googleKey: 'AIzaSyBYcy2l0Yf4lDADZ_i6dy0M6pFZyPQA',
      connect: connect
  }
});

function connect() {
    socket.on('showrows', function(locations) {
        // console.log(locations);
        var arr = [];
        locations.forEach(function(i, v) {
            if (i[2] != null) {
                var obj = {};
                obj['latlng'] = [i[2], i[3]];              
                arr.push(obj);
            }
        });

        var new_torchys = JSON.parse(JSON.stringify(arr));
        for (var i = 0; i < new_torchys.length; i++) {

            new_torchys[i] = {
                marker: new_torchys[i].marker,
                latlng: [
                    new_torchys[i].latlng[0],
                    new_torchys[i].latlng[1]
                ],
            }
        }


        pn.publish({
            channel: channel,
            message: new_torchys
        });


    });
}

Above code displays marker successfully but i am not able to set info window while click on marker.

I write this code in for loop

var marker = L.marker([new_torchys[i].latlng[0], new_torchys[i].latlng[1]]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.");

But marker layer is overlay and map looks very bad.

I also want real time location while driver moving.

Please help me how to do this???

Answer 1

There is a callback function that can be passed to eon.map called marker. Within this function, create an instance of a mapbox icon, bind a popup to it, and then return it.

var channel = 'eon-maps-geolocation-input';

eon.map({
    pubnub: pubnub,
    id: 'map',
    mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
    mbId: 'ianjennings.l896mh2e',
    channels: [channel],
    connect: connect,
    options: {
      zoomAnimation: false,
    },
    marker: function (latlng, data) {
        var marker = new L.marker(latlng, {
          icon: L.mapbox.marker.icon()
        })
        .bindPopup('<button class="trigger">Say hi</button>');

        return marker;
    }
  });

If you are sending the geolocation from the device every 30 seconds, the map will automatically update as soon as the location is PubNub published on your specified channel eon-maps-geolocation-input

pn.publish({
    channel: channel,
    message: new_torchys
});

For Mapbox icon help refer to their docs https://www.mapbox.com/mapbox.js/example/v1.0.0/clicks-in-popups/

For an in depth guide for location tracking with EON, check out this https://github.com/pubnub/eon-workshop/tree/master/lesson3