arnaucube
arnaucube/cellMapVisualizerPublic Self-hosted repository
cellMapVisualizer/web/views/main/main.js
web/views/main/main.jsRaw
  1'use strict';
  2
  3angular.module('app.main', ['ngRoute', 'leaflet-directive'])
  4
  5    .config(['$routeProvider', function($routeProvider) {
  6        $routeProvider.when('/main', {
  7            templateUrl: 'views/main/main.html',
  8            controller: 'MainCtrl'
  9        });
 10    }])
 11
 12    .controller('MainCtrl', function($scope, $http, leafletMapEvents) {
 13        //get mcc and mnc data
 14        $scope.mcc=[];
 15        $http.get('mcc-mnc-list.json')
 16            .then(function(data) {
 17                console.log('data success');
 18                console.log(data);
 19                $scope.mcc = data.data;
 20            }, function(data) {
 21                console.log('data error');
 22            });
 23
 24
 25
 26        //map
 27        $scope.center = {
 28            lat: 41.38014146592283,
 29            lng: 2.1773743629455566,
 30            zoom: 17
 31        };
 32        $scope.bounds = {};
 33        $scope.markers = [];
 34        $scope.paths = [];
 35        $scope.tiles = {
 36            //url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
 37            url: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
 38            // més estils https://leaflet-extras.github.io/leaflet-providers/preview/
 39            options: {
 40                attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 41            }
 42        };
 43        $scope.events = {
 44            map: {
 45                enable: ['dragend'],
 46                logic: 'emit'
 47            }
 48        };
 49        $scope.eventDetected = "No events yet...";
 50        console.log($scope.eventDetected);
 51        $scope.$on('leafletDirectiveMap.map-simple-map.dragend', function(event) {
 52            $scope.eventDetected = "Dragend";
 53            console.log($scope.eventDetected);
 54            console.log($scope.center);
 55            if ($scope.center.zoom > 16) {
 56                $scope.getCells($scope.center.lat, $scope.center.lng);
 57            }
 58        });
 59
 60        var antennaIcon = {
 61            iconUrl: 'img/antenna.png',
 62            iconSize: [50, 50], // size of the icon
 63            iconAnchor: [25, 50], // point of the icon which will correspond to marker's location
 64        };
 65        var markX = {
 66            iconUrl: 'img/markX.png',
 67            iconSize: [50, 50], // size of the icon
 68            iconAnchor: [25, 50], // point of the icon which will correspond to marker's location
 69        };
 70        var markY = {
 71            iconUrl: 'img/markY.png',
 72            iconSize: [50, 50], // size of the icon
 73            iconAnchor: [25, 50], // point of the icon which will correspond to marker's location
 74        };
 75        $scope.getCells = function(lat, lng) {
 76            $scope.status = "getting data";
 77            var xLat = lat + 0.002;
 78            var xLng = lng - 0.004;
 79            var yLat = lat - 0.002;
 80            var yLng = lng + 0.004;
 81            console.log(xLat + ", " + xLng);
 82            console.log(yLat + ", " + yLng);
 83            //$http.get(urlapi + 'cells/43.73429/7.41841/43.73210/7.42196')
 84            $http.get(urlapi + 'cells/' + xLat + '/' + xLng + '/' + yLat + '/' + yLng)
 85                .then(function(data) {
 86                    console.log('data success');
 87                    console.log(data);
 88                    $scope.cells = data.data;
 89                    //draw markers on map
 90                    $scope.markers = [];
 91                    $scope.markers.push({
 92                        lat: Number(xLat),
 93                        lng: Number(xLng),
 94                        icon: markX
 95                    });
 96                    $scope.markers.push({
 97                        lat: Number(yLat),
 98                        lng: Number(yLng),
 99                        icon: markY
100                    });
101                    for (var i = 0; i < $scope.cells.length; i++) {
102                        /*var company ="";
103                        company = $scope.mcc.filter(function(obj){
104                            return obj.mcc==$scope.cells[i].mcc && obj.mnc == $scope.cells[i].net;
105                        });*/
106                        var company = "";
107                        for(var k in $scope.mcc){
108                            if($scope.mcc[k].mcc==$scope.cells[i].mcc && $scope.mcc[k].mnc == $scope.cells[i].net) {
109                                company = $scope.mcc[k];
110                            }
111                        }
112                        console.log(company);
113                        $scope.markers.push({
114                            lat: Number($scope.cells[i].lat),
115                            lng: Number($scope.cells[i].lon),
116                            message: "lat:" + $scope.cells[i].lat + ", lon:" + $scope.cells[i].lon +"<br> mcc:"+ $scope.cells[i].mcc + ", mnc:" + $scope.cells[i].net + "<br>" + company.brand,
117                            icon: antennaIcon
118                        });
119                    }
120
121                    /*$scope.center = {
122                        lat: (Number($scope.cells[0].lat) + Number($scope.cells[0].lat)) / 2,
123                        lng: (Number($scope.cells[0].lon) + Number($scope.cells[0].lon)) / 2,
124                        zoom: 16
125                    };*/
126                    $scope.status = "data charged";
127                }, function(data) {
128                    console.log('data error');
129                });
130        };
131        $scope.getCells(41.38014146592283, 2.1773743629455566);
132        $scope.status = "getting data";
133    });