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