arnaucube
arnaucube/cellMapVisualizerPublic Self-hosted repository
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    });