arnaucube/cellMapVisualizer
1
0
Fork 0
mirror of https://github.com/arnaucube/cellMapVisualizer.git synced 2026-02-07 03:06:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

frontend: added petitions on drag the map

Browse Source
This commit is contained in:
arnaucode
2017-08-03 19:38:19 +02:00
parent b02dddb47e
commit 95f8ef3351
7 changed files with 116 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/app.js
View File

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

3
web/bower.json
View File

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

BIN
web/img/markX.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 B

BIN
web/img/markY.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 B

1
web/index.html
View File

@@ -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 -->

8
web/views/main/main.html
View File

@@ -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>

158
web/views/main/main.js
View File

@@ -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
};
$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
});
}
$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');
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/main', {
templateUrl: 'views/main/main.html',
controller: 'MainCtrl'
});
});
}])
.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);
}
});
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";
});