frontend: added petitions on drag the map

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', [

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"
   }
 }

web/index.html

@@ -43,6 +43,7 @@
     <script src="bower_components/leaflet/dist/leaflet.js"></script>
     <script src="bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
     <script src="bower_components/ui-leaflet/dist/ui-leaflet.js"></script>
+    <script src="bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
     <link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
 
     <!-- Angular Chart -->

web/views/main/main.html

@@ -26,12 +26,16 @@
         <div class="col-sm-9">
             <div class="panel">
                 <div class="panel-heading c_blueGrey300">
-                    <h3 class="panel-title">Map</h3>
+                    <h3 class="panel-title">Map - showing {{cells.length}} cells</h3>
                 </div>
                 <div class="panel-body">
-                    <leaflet width="100%" height="600px" markers="markers" paths="paths" center="center" tiles="tiles" id="map-simple-map"></leaflet>
+                    <leaflet width="100%" height="600px" markers="markers" paths="paths" center="center"
+                    tiles="tiles" id="map-simple-map"></leaflet>
                 </div>
             </div>
+            <p><b>Current zoom level: {{center.zoom}}.</b> Due large amount of data, need zoom level equal or greater than 17 to get the cells data.</p>
+            <br>
+            {{status}}
         </div>
     </div>
 </div>

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: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> 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: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> 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";
+    });