examples/google-draw-line.html

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet</title>

    <script type="text/javascript" src="../eon-map.js"></script>

    <style type="text/css">
      body {
        padding: 0px;
        margin: 0px;
      }
    </style>

  </head>
  <body>
    <div style="width: 100%; height:500px" id="map"></div>
    <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 channel = 'pubnub-mapbox' + getNonZeroRandomNumber();

      var pointA = false;
      var pointB = false;

      var map = eon.map({
        pubnub: pubnub,
        id: 'map',
        channels: [channel],
        connect: connect,
        options: {
          center: new L.LatLng(37.370375, -97.75613851),
          zoom: 5
        },
        provider: 'google',
        googleKey: 'AIzaSyBYcy2l0Yf4lDADZ_U0zi6dy0M6pFZyPQA',
        googleMutant: {
          type: 'roadmap',
          styles: [
              {elementType: 'labels', stylers: [{visibility: 'off'}]},
              {featureType: 'water', stylers: [{color: '#000000'}]}
          ]
        },
        message: function(message, timetoken, channel) {

          console.log(message, timetoken, channel);

          var currentPoint = new L.LatLng(message[0].latlng[0], message[0].latlng[1]);

          if(pointA && pointB) {

            var pointList = [pointA, pointB];

            console.log(pointA)

            var firstpolyline = new L.Polyline(pointList, {
                color: 'red',
                weight: 3,
                opacity: 0.5,
                smoothFactor: 1
            });

            console.log(map)

            firstpolyline.addTo(map);

          }

          pointB = pointA;
          pointA = currentPoint;

        }
      });

      function connect() {

        var point = {
          latlng: [37.370375, -97.756138]
        };

        setInterval(function(){

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

          pubnub.publish({
            channel: channel,
            message: [new_point]
          });

        }, 1000);

      };

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