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