Document message and transform options, new example to draw polylines…

… in google maps
pubnub · Jul 20, 2017 · 6c89ae2 · 6c89ae2
1 parent 98c8487
commit 6c89ae2
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -78,6 +78,8 @@ Parameter | Value | Default
 | connect | A function to call when PubNub makes a connection. See [PubNub subscribe](http://www.pubnub.com/docs/javascript/api/reference.html#subscribe) | ```function(){}``` |
 | marker | A custom Mapbox marker object. Use this to change the marker icon, tooltip, etc. | L.marker |
 | rotate | Add bearing to markers in ```options.angle```. This won't have any effect unless you're using [a rotated marker type](https://www.mapbox.com/mapbox.js/example/v1.0.0/rotating-controlling-marker/). | ```false``` |
+| message | A function to call everytime a PubNub message is recieved. See [PubNub subscribe](http://www.pubnub.com/docs/javascript/api/reference.html#subscribe) | ```function(message, timetoken, channel){}``` |
+| transform | Method for changing the payload format of your stream. See [example](https://github.com/pubnub/eon-chart/blob/master/examples/transform.html)| ```function(m){return m}```
 | provider | Google or Mapbox | ```mapbox```
 | mbToken |Mapbox API Token (Mapbox Only). | ```undefined```
 | mbId | Mapbox Map ID (MapBox Only). | ```undefined```

diff --git a/examples/google-draw-line.html b/examples/google-draw-line.html
@@ -0,0 +1,113 @@
+<!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>
diff --git a/examples/google.html b/examples/google.html
@@ -32,7 +32,10 @@
 
       var channel = 'pubnub-mapbox' + getNonZeroRandomNumber();
 
-      eon.map({
+      var pointA = false;
+      var pointB = false;
+
+      var map = eon.map({
         pubnub: pubnub,
         id: 'map',
         channels: [channel],
@@ -49,6 +52,35 @@
               {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;
+
         }
       });