examples/channel_groups.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>EON Maps</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position:absolute;
        top:0;
        bottom:0;
        width:100%;
      }
    </style>

    <script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.1.0/eon.js"></script>
    <link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.1.0/eon.css"/>

  </head>
  <body>
    <div id='map'></div>
    <script>
      function getNonZeroRandomNumber(){
        var random = Math.floor(Math.random()*199) - 99;
        if(random==0) return getNonZeroRandomNumber();
        return random;
      }
    </script>
    <script>

      var pubnub = new PubNub({
        publishKey: 'demo',
        subscribeKey: 'demo'
      });

      var channels = ['pubnub-mapbox-1', 'pubnub-mapbox-2', 'pubnub-mapbox-3'];

      // create channel group
      pubnub.channelGroups.addChannels(
          {
              channels: channels,
              channelGroup: "pubnub-mapbox-example"
          },
          function(status) {
              if (status.error) {
                  console.log("operation failed w/ status: ", status);
              } else {
                  console.log("operation done!")

                  // list channels
                  pubnub.channelGroups.listChannels(
                    {
                      channelGroup: "pubnub-mapbox-example"
                    },
                    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)
                      })
                    }
                  );

              }
          }
      );
      eon.map({
        pubnub: pubnub,
        id: 'map',
        mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
        mbId: 'ianjennings.l896mh2e',
        channelGroups: ['pubnub-mapbox-example'],
        connect: connect,
        history: true,
        options: {
          zoomAnimation: false,
        }
      });

      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
        });

      }

      function connect() {

        setInterval(function(){
          publish('first', channels[0]);
          publish('second', channels[1]);
          publish('third', channels[2]);
        }, 5000);

      };

    </script>
  </body>
</html>