mirror of
https://github.com/arnaucube/cellMapVisualizer.git
synced 2026-02-07 11:16:40 +01:00
Backend: implemented get cells in a rectangle geolocation. Frontend: added map style, and antena icon.
This commit is contained in:
arnaucode
@@ -1,16 +1,3 @@
|
||||
/* red */
|
||||
.c_red50{
|
||||
background: #FFEBEE!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_red100{
|
||||
background: #FFCDD2!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_red200{
|
||||
background: #EF9A9A!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_red300{
|
||||
background: #E57373!important;
|
||||
color: #ffffff!important;
|
||||
@@ -23,117 +10,6 @@
|
||||
background: #F44336!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_red600{
|
||||
background: #E53935!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_red700{
|
||||
background: #D32F2F!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_red800{
|
||||
background: #C62828!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_red900{
|
||||
background: #B71C1C!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
|
||||
.ctext_red400{
|
||||
color: #EF5350!important;
|
||||
}
|
||||
.ctext_red500{
|
||||
color: #F44336!important;
|
||||
}
|
||||
.ctext_red600{
|
||||
color: #E53935!important;
|
||||
}
|
||||
|
||||
/* pink */
|
||||
.c_pink50{
|
||||
background: #FCE4EC!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_pink100{
|
||||
background: #F8BBD0!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_pink200{
|
||||
background: #F48FB1!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_pink300{
|
||||
background: #F06292!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_pink400{
|
||||
background: #EC407A!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_pink500{
|
||||
background: #E91E63!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_pink600{
|
||||
background: #D81B60!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_pink700{
|
||||
background: #C2185B!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_pink800{
|
||||
background: #AD1457!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_pink900{
|
||||
background: #880E4F!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
|
||||
/* deepPurple */
|
||||
.c_deepPurple50{
|
||||
background: #EDE7F6!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_deepPurple100{
|
||||
background: #D1C4E9!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_deepPurple200{
|
||||
background: #B39DDB!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_deepPurple300{
|
||||
background: #9575CD!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_deepPurple400{
|
||||
background: #7E57C2!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_deepPurple500{
|
||||
background: #673AB7!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_deepPurple600{
|
||||
background: #5E35B1!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_deepPurple700{
|
||||
background: #512DA8!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_deepPurple800{
|
||||
background: #4527A0!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_deepPurple900{
|
||||
background: #311B92!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
|
||||
/* indigo */
|
||||
.c_indigo50{
|
||||
background:#E8EAF6!important;
|
||||
@@ -265,19 +141,6 @@
|
||||
color: #ffffff!important;
|
||||
}
|
||||
|
||||
/* green */
|
||||
.c_green50{
|
||||
background: #E8F5E9!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_green100{
|
||||
background: #C8E6C9!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_green200{
|
||||
background: #A5D6A7!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_green300{
|
||||
background: #81C784!important;
|
||||
color: #ffffff!important;
|
||||
@@ -290,107 +153,6 @@
|
||||
background: #4CAF50!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_green600{
|
||||
background: #43A047!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_green700{
|
||||
background: #388E3C!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_green800{
|
||||
background: #2E7D32!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_green900{
|
||||
background: #1B5E20!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
|
||||
/* yellow */
|
||||
.c_yellow50{
|
||||
background: #FFFDE7!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_yellow100{
|
||||
background: #FFF9C4!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_yellow200{
|
||||
background: #FFF59D!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_yellow300{
|
||||
background: #FFF176!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_yellow400{
|
||||
background: #FFEE58!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_yellow500{
|
||||
background: #FFEB3B!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_yellow600{
|
||||
background: #FDD835!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_yellow700{
|
||||
background: #FBC02D!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_yellow800{
|
||||
background: #F9A825!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_yellow900{
|
||||
background: #F57F17!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
|
||||
/* orange */
|
||||
.c_orange50{
|
||||
background: #FFF3E0!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_orange100{
|
||||
background: #FFE0B2!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_orange200{
|
||||
background: #FFCC80!important;
|
||||
color: #000000!important;
|
||||
}
|
||||
.c_orange300{
|
||||
background: #FFB74D!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_orange400{
|
||||
background: #FFA726!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_orange500{
|
||||
background: #FF9800!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_orange600{
|
||||
background: #FB8C00!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_orange700{
|
||||
background: #F57C00!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_orange800{
|
||||
background: #EF6C00!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
.c_orange900{
|
||||
background: #E65100!important;
|
||||
color: #ffffff!important;
|
||||
}
|
||||
|
||||
/* grey */
|
||||
.c_grey50{
|
||||
background: #FAFAFA!important;
|
||||
|
||||
BIN
web/img/antenna.png
Normal file
BIN
web/img/antenna.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
web/img/antenna2.png
Normal file
BIN
web/img/antenna2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
web/img/antenna3.png
Normal file
BIN
web/img/antenna3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@@ -16,13 +16,21 @@ angular.module('app.main', ['ngRoute', 'ui-leaflet'])
|
||||
$scope.markers = [];
|
||||
$scope.paths = [];
|
||||
$scope.tiles = {
|
||||
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
//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 + 'allcells')
|
||||
$http.get(urlapi + 'cells/43.73429/7.41841/43.73210/7.42196')
|
||||
.then(function(data) {
|
||||
console.log('data success');
|
||||
console.log(data);
|
||||
@@ -33,19 +41,15 @@ angular.module('app.main', ['ngRoute', 'ui-leaflet'])
|
||||
$scope.markers.push({
|
||||
lat: Number($scope.cells[i].lat),
|
||||
lng: Number($scope.cells[i].lon),
|
||||
message: $scope.cells[i].mcc
|
||||
});
|
||||
$scope.markers.push({
|
||||
lat: Number($scope.cells[i].lat),
|
||||
lng: Number($scope.cells[i].lon),
|
||||
message: $scope.cells[i].mcc
|
||||
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: 4
|
||||
zoom: 16
|
||||
};
|
||||
}, function(data) {
|
||||
console.log('data error');
|
||||
|
||||
Reference in New Issue
Block a user