index.scala.html

  
 @(string:String)

<!DOCTYPE html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
    <!--<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>-->
    <!--<script src="https://code.angularjs.org/1.3.15/angular.js"></script>-->
    <!--<script src="/assets/javascript/ng-map.js"></script>-->
    <!--<script src="/assets/javascript/taxi-data.js"></script>-->
    <script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=placeses,visualization,drawing,geometry,places"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
    <script src="//rawgit.com/angular-ui/angular-google-maps/2.1.5/dist/angular-google-maps.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
    <script src="/assets/javascript/cbuffer.js"></script>

    <script>

angular.module("myApp", ['uiGmapgoogle-maps'])
        .controller("Example", function($scope, $interval) {

             $scope.tweetRingBuffer = CBuffer(1000);

                function MockHeatLayer(heatLayer) {
                    $scope.heatLayer = heatLayer;
                    $scope.pointArray = new google.maps.MVCArray($scope.tweetRingBuffer.toArray());
                    $scope.heatLayer.setData($scope.pointArray);
                    };

            $scope.map = {
                        center: {
                        latitude: 37.782551,
                        longitude: -122.445368
                        },
                        zoom: 12,
                        heatLayerCallback: function (layer) {
                            //set the heat layers backend data
                            var mockHeatLayer = new MockHeatLayer(layer);
                            },
                        showHeat: true
                    };

              var ws = new WebSocket("ws://127.0.0.1:9000/websocket?topic=Algernons");

              // binding model for the UI
              $scope.messages = [];

              // what to do when we receive message from the webserver
              ws.onmessage = function(msg) {

                var obj = JSON.parse(msg.data);
                $scope.$digest();
                $scope.tweetRingBuffer.push(new google.maps.LatLng(obj.lat, obj.lng));
                $scope.pointArray = new google.maps.MVCArray($scope.tweetRingBuffer.toArray());
                $scope.heatLayer.setData($scope.pointArray);
              };

        });

</script>

</head>
<body>
<style>
    .angular-google-map-container { height: 800px; }

  </style>
<div ng-app="myApp" ng-controller="Example">
    <ui-gmap-google-map center='map.center' zoom='map.zoom'>
        <ui-gmap-layer namespace="visualization" type="HeatmapLayer" show="map.showHeat" onCreated="map.heatLayerCallback"></ui-gmap-layer>