gistfile1.ts

/// <reference path='../_all.ts' />

module App
{
    'use strict';

    import ICurrentPosition = App.Services.ICurrentPosition;

    export class MapCtrl extends App.Controllers.Basic
    {
        private map: google.maps.Map;
        private mapEvents: any;
        private mapOptions: any;
        private getOrdersURL: string = '/api/orders';

        private $http: ng.IHttpService;
        private $currentPosition: ICurrentPosition;

        public $scope: any;

        /**
         *   Creates Map controller object
         *
         *   @param {ng.IScope} $scope
         *   @param {ICurrentPosition} CurrentPosition
         *   @param {ng.IHttpService} $http
         */
        constructor($scope: ng.IScope, CurrentPosition: ICurrentPosition, $http: ng.IHttpService)
        {
            super($scope);
            var _this = this;

            this.$scope = $scope;
            this.$http = $http;
            this.$currentPosition = CurrentPosition;

            // player obj
            this.$scope.player = {
                marker: undefined,
                icon: '/images/map/marker_self.png'
            };

            this.$scope.orders = [];

            this.mapOptions = {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoom: MapCtrl.getLocalStorageItem('mapPositionZoom') || 8,
                center: new google.maps.LatLng(
                    MapCtrl.getLocalStorageItem('mapPositionLat') || 0,
                    MapCtrl.getLocalStorageItem('mapPositionLon') || 0
                )
            };

            this.mapEvents = {
                idle: function() {
                    _this.getUserLocation();
                    _this.mapEvents.idle = function() {};

                    // get orders
                    _this.getOrders();
                }
            };

            this.createMap();
        }

        /**
         * Cache current map state in local storage
         * @param lat
         * @param lon
         * @param zoom
         */
        static cacheMapState(lat: number, lon: number, zoom: number): void
        {
            localStorage.setItem('mapPositionLat', lat.toString());
            localStorage.setItem('mapPositionLon', lon.toString());
            localStorage.setItem('mapPositionZoom', zoom.toString());
        }

        /**
         * Get cached value from local storage
         * @param name
         * @returns {number}
         */
        static getLocalStorageItem(name: string): number
        {
            return parseFloat(localStorage.getItem(name));
        }

        /**
         * Change the center of map
         * @param lat
         * @param lon
         */
        private setCenter(lat: number, lon: number): void
        {
            this.map.setCenter(new google.maps.LatLng(lat, lon));
        }

        /**
         * Change the position of player
         * @param lat
         * @param lot
         */
        private setPlayerLocation(lat: number, lot: number): void
        {
            var position = new google.maps.LatLng(lat, lot);
            this.$scope.player.marker = new google.maps.Marker({
                position: position,
                map: this.map,
                icon: this.$scope.player.icon
            });
        }

        /**
         * Create map and init
         */
        private createMap(): void
        {
            var _this = this;

            this.map = new google.maps.Map(document.getElementById('google-map'), this.mapOptions);
            google.maps.event.addListener(this.map, 'idle', function() {
                _this.mapEvents.idle();
            });
        }

        /**
         * Get orders for player
         */
        private getOrders(): void
        {
            var _this = this;

            this.$http.get(this.getOrdersURL)
                .success(function(data, status) {
                    _this.createOrdersMarkers(data.orders);
                })
                .error(response => { });
        }

        /**
         * Create markers for orders
         * @param orders
         */
        private createOrdersMarkers(orders: Array<any>): void
        {
            var _this = this;

            // empty existing markers
            _this.$scope.orders = [];

            // Create new markers
            _.each(orders, function(data) {
                var orderLocation = new google.maps.LatLng(data['location']['latitude'], data['location']['longitude']);

                _this.$scope.orders.push(new google.maps.Marker({
                    position: orderLocation,
                    map: _this.map,
                    title: orderLocation.toString()
                }));
            });
        }

        /**
         * Get user current location
         */
        private getUserLocation(): void
        {
            var _this = this;
            this.$currentPosition.get().then(function(location){

                // update player's coordinates
                _this.setPlayerLocation(location.latitude, location.longitude);

                _this.map.setZoom(17);
                _this.setCenter(location.latitude, location.longitude);

                // Cache map state
                MapCtrl.cacheMapState(location.latitude, location.longitude, 17);

                _this.DEBUGdrawSquare();
            });
        }

        private DEBUGdrawSquare(): void
        {
            var x = 0.01;
            var latitude = -27.593976599999998;
            var longitude = 152.92014509999998;

            var triangleCoords = [
                new google.maps.LatLng(latitude - x, longitude - x),
                new google.maps.LatLng(latitude - x, longitude + x),
                new google.maps.LatLng(latitude + x, longitude + x),
                new google.maps.LatLng(latitude + x, longitude - x),
                new google.maps.LatLng(latitude - x, longitude - x)
            ];

            // Construct the polygon.
            var bermudaTriangle = new google.maps.Polygon({
                paths: triangleCoords,
                strokeColor: '#FF0000',
                strokeOpacity: 0,
                strokeWeight: 0,
                fillColor: '#FF0000',
                fillOpacity: 0.1
            });

            bermudaTriangle.setMap(this.map);
        }
    }
}