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 //map
14 $scope.center = {
15 lat: 41.38014146592283,
16 lng: 2.1773743629455566,
17 zoom: 17
18 };
19 $scope.bounds = {};
20 $scope.markers = [];
21 $scope.paths = [];
22 $scope.tiles = {
23 //url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
24 url: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
25 // més estils https://leaflet-extras.github.io/leaflet-providers/preview/
26 options: {
27 attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
28 }
29 };
30 $scope.events = {
31 map: {
32 enable: ['dragend'],
33 logic: 'emit'
34 }
35 };
36 $scope.eventDetected = "No events yet...";
37 console.log($scope.eventDetected);
38 $scope.$on('leafletDirectiveMap.map-simple-map.dragend', function(event) {
39 $scope.eventDetected = "Dragend";
40 console.log($scope.eventDetected);
41 console.log($scope.center);
42 if ($scope.center.zoom > 16) {
43 $scope.getCells($scope.center.lat, $scope.center.lng);
44 }
45 });
46
47 var antennaIcon = {
48 iconUrl: 'img/antenna.png',
49 iconSize: [50, 50], // size of the icon
50 iconAnchor: [25, 50], // point of the icon which will correspond to marker's location
51 };
52 var markX = {
53 iconUrl: 'img/markX.png',
54 iconSize: [50, 50], // size of the icon
55 iconAnchor: [25, 50], // point of the icon which will correspond to marker's location
56 };
57 var markY = {
58 iconUrl: 'img/markY.png',
59 iconSize: [50, 50], // size of the icon
60 iconAnchor: [25, 50], // point of the icon which will correspond to marker's location
61 };
62 $scope.getCells = function(lat, lng) {
63 $scope.status = "getting data";
64 var xLat = lat + 0.002;
65 var xLng = lng - 0.004;
66 var yLat = lat - 0.002;
67 var yLng = lng + 0.004;
68 console.log(xLat + ", " + xLng);
69 console.log(yLat + ", " + yLng);
70 //$http.get(urlapi + 'cells/43.73429/7.41841/43.73210/7.42196')
71 $http.get(urlapi + 'cells/' + xLat + '/' + xLng + '/' + yLat + '/' + yLng)
72 .then(function(data) {
73 console.log('data success');
74 console.log(data);
75 $scope.cells = data.data;
76 //draw markers on map
77 $scope.markers = [];
78 $scope.markers.push({
79 lat: Number(xLat),
80 lng: Number(xLng),
81 icon: markX
82 });
83 $scope.markers.push({
84 lat: Number(yLat),
85 lng: Number(yLng),
86 icon: markY
87 });
88 for (var i = 0; i < $scope.cells.length; i++) {
89 $scope.markers.push({
90 lat: Number($scope.cells[i].lat),
91 lng: Number($scope.cells[i].lon),
92 message: "lat:" + $scope.cells[i].lat + ", lon:" + $scope.cells[i].lon,
93 icon: antennaIcon
94 });
95 }
96
97 /*$scope.center = {
98 lat: (Number($scope.cells[0].lat) + Number($scope.cells[0].lat)) / 2,
99 lng: (Number($scope.cells[0].lon) + Number($scope.cells[0].lon)) / 2,
100 zoom: 16
101 };*/
102 $scope.status = "data charged";
103 }, function(data) {
104 console.log('data error');
105 });
106 };
107 $scope.getCells(41.38014146592283, 2.1773743629455566);
108 $scope.status = "getting data";
109 });