diff --git a/web/app.js b/web/app.js index 0b55ebe..b16d6bf 100644 --- a/web/app.js +++ b/web/app.js @@ -1,6 +1,7 @@ 'use strict'; -var urlapi = "http://127.0.0.1:3017/"; +//var urlapi = "http://127.0.0.1:3017/"; +var urlapi = "http://51.255.193.106:3017/"; // Declare app level module which depends on views, and components angular.module('webApp', [ diff --git a/web/bower.json b/web/bower.json index 8133700..9765a47 100644 --- a/web/bower.json +++ b/web/bower.json @@ -13,6 +13,7 @@ "angular-bootstrap": "^2.5.0", "angular-messages": "^1.6.5", "components-font-awesome": "^4.7.0", - "ui-leaflet": "^2.0.0" + "ui-leaflet": "^2.0.0", + "angular-leaflet-directive": "^0.10.0" } } diff --git a/web/img/markX.png b/web/img/markX.png new file mode 100644 index 0000000..058de6c Binary files /dev/null and b/web/img/markX.png differ diff --git a/web/img/markY.png b/web/img/markY.png new file mode 100644 index 0000000..75b3787 Binary files /dev/null and b/web/img/markY.png differ diff --git a/web/index.html b/web/index.html index 94b5946..e5e8670 100644 --- a/web/index.html +++ b/web/index.html @@ -43,6 +43,7 @@ + diff --git a/web/views/main/main.html b/web/views/main/main.html index 67f6a57..906f270 100644 --- a/web/views/main/main.html +++ b/web/views/main/main.html @@ -26,12 +26,16 @@
-

Map

+

Map - showing {{cells.length}} cells

- +
+

Current zoom level: {{center.zoom}}. Due large amount of data, need zoom level equal or greater than 17 to get the cells data.

+
+ {{status}}
diff --git a/web/views/main/main.js b/web/views/main/main.js index bfca074..9114389 100644 --- a/web/views/main/main.js +++ b/web/views/main/main.js @@ -1,57 +1,109 @@ 'use strict'; -angular.module('app.main', ['ngRoute', 'ui-leaflet']) +angular.module('app.main', ['ngRoute', 'leaflet-directive']) -.config(['$routeProvider', function($routeProvider) { - $routeProvider.when('/main', { - templateUrl: 'views/main/main.html', - controller: 'MainCtrl' - }); -}]) - -.controller('MainCtrl', function($scope, $http) { - //map - $scope.center = {}; - $scope.bounds = {}; - $scope.markers = []; - $scope.paths = []; - $scope.tiles = { - //url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", - url: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", - // més estils https://leaflet-extras.github.io/leaflet-providers/preview/ - options: { - attribution: 'OpenStreetMap contributors' - } - }; - //var antennaIcon = L.icon({ - var antennaIcon = { - iconUrl: 'img/antenna.png', - iconSize: [50, 50], // size of the icon - iconAnchor: [25, 50], // point of the icon which will correspond to marker's location - }; + .config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/main', { + templateUrl: 'views/main/main.html', + controller: 'MainCtrl' + }); + }]) - $http.get(urlapi + 'cells/43.73429/7.41841/43.73210/7.42196') - .then(function(data) { - console.log('data success'); - console.log(data); - $scope.cells = data.data; - //draw markers on map - $scope.markers = []; - for (var i = 0; i < $scope.cells.length; i++) { - $scope.markers.push({ - lat: Number($scope.cells[i].lat), - lng: Number($scope.cells[i].lon), - message: $scope.cells[i].mcc, - icon: antennaIcon - }); + .controller('MainCtrl', function($scope, $http, leafletMapEvents) { + //map + $scope.center = { + lat: 41.38014146592283, + lng: 2.1773743629455566, + zoom: 17 + }; + $scope.bounds = {}; + $scope.markers = []; + $scope.paths = []; + $scope.tiles = { + //url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", + url: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", + // més estils https://leaflet-extras.github.io/leaflet-providers/preview/ + options: { + attribution: 'OpenStreetMap contributors' + } + }; + $scope.events = { + map: { + enable: ['dragend'], + logic: 'emit' + } + }; + $scope.eventDetected = "No events yet..."; + console.log($scope.eventDetected); + $scope.$on('leafletDirectiveMap.map-simple-map.dragend', function(event) { + $scope.eventDetected = "Dragend"; + console.log($scope.eventDetected); + console.log($scope.center); + if ($scope.center.zoom > 16) { + $scope.getCells($scope.center.lat, $scope.center.lng); } - - $scope.center = { - lat: (Number($scope.cells[0].lat) + Number($scope.cells[0].lat)) / 2, - lng: (Number($scope.cells[0].lon) + Number($scope.cells[0].lon)) / 2, - zoom: 16 - }; - }, function(data) { - console.log('data error'); }); -}); + + var antennaIcon = { + iconUrl: 'img/antenna.png', + iconSize: [50, 50], // size of the icon + iconAnchor: [25, 50], // point of the icon which will correspond to marker's location + }; + var markX = { + iconUrl: 'img/markX.png', + iconSize: [50, 50], // size of the icon + iconAnchor: [25, 50], // point of the icon which will correspond to marker's location + }; + var markY = { + iconUrl: 'img/markY.png', + iconSize: [50, 50], // size of the icon + iconAnchor: [25, 50], // point of the icon which will correspond to marker's location + }; + $scope.getCells = function(lat, lng) { + $scope.status = "getting data"; + var xLat = lat + 0.002; + var xLng = lng - 0.004; + var yLat = lat - 0.002; + var yLng = lng + 0.004; + console.log(xLat + ", " + xLng); + console.log(yLat + ", " + yLng); + //$http.get(urlapi + 'cells/43.73429/7.41841/43.73210/7.42196') + $http.get(urlapi + 'cells/' + xLat + '/' + xLng + '/' + yLat + '/' + yLng) + .then(function(data) { + console.log('data success'); + console.log(data); + $scope.cells = data.data; + //draw markers on map + $scope.markers = []; + $scope.markers.push({ + lat: Number(xLat), + lng: Number(xLng), + icon: markX + }); + $scope.markers.push({ + lat: Number(yLat), + lng: Number(yLng), + icon: markY + }); + for (var i = 0; i < $scope.cells.length; i++) { + $scope.markers.push({ + lat: Number($scope.cells[i].lat), + lng: Number($scope.cells[i].lon), + message: "lat:" + $scope.cells[i].lat + ", lon:" + $scope.cells[i].lon, + icon: antennaIcon + }); + } + + /*$scope.center = { + lat: (Number($scope.cells[0].lat) + Number($scope.cells[0].lat)) / 2, + lng: (Number($scope.cells[0].lon) + Number($scope.cells[0].lon)) / 2, + zoom: 16 + };*/ + $scope.status = "data charged"; + }, function(data) { + console.log('data error'); + }); + }; + $scope.getCells(41.38014146592283, 2.1773743629455566); + $scope.status = "getting data"; + });