revert(map): revert loading

use resolve in ui-router again

app/index.html

@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
     <link rel="stylesheet" href="bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css" />
     <link rel="stylesheet" href="bower_components/leaflet.markercluster/dist/MarkerCluster.css" />
+    <link rel="stylesheet" href="bower_components/ngprogress/ngProgress.css" />
     <!-- endbower -->
     <!-- endbuild -->
 
@@ -332,6 +333,7 @@
     <script src="bower_components/d3/d3.js"></script>
     <script src="bower_components/Leaflet.FeatureGroup.SubGroup/src/subgroup.js"></script>
     <script src="bower_components/angular-ismobile/dist/angular-ismobile.js"></script>
+    <script src="bower_components/ngprogress/build/ngprogress.min.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 

app/scripts/app.js

@@ -8,6 +8,7 @@ angular
     'ngResource',
     'ngSanitize',
     'ngDialog',
+    'ngProgress',
     'ui.bootstrap',
     'ui.bootstrap.datetimepicker',
     'osemFilters',
@@ -44,7 +45,23 @@ angular
         url: '',
         controller: 'MapController',
         controllerAs: 'map',
-        templateUrl: 'views/explore2.map.html'
+        templateUrl: 'views/explore2.map.html',
+        resolve: { /* @ngInject */
+          boxes: function (OpenSenseMapAPI, ngProgressFactory) {
+            var progressbar = ngProgressFactory.createInstance();
+            progressbar.setColor('#4EAF47');
+            progressbar.start();
+            return OpenSenseMapAPI.getBoxes({params: {classify: true}})
+              .then(function (data) {
+                progressbar.complete();
+                return data;
+              })
+              .catch(function (error) {
+                progressbar.complete();
+                return new Error('Could not resolve getBoxes() on explore.map.');
+              });
+          }
+        }
       })
       .state('explore.map.sidebar', {
         url: 'explore',

app/scripts/controllers/map.js

@@ -5,15 +5,14 @@
     .module('openSenseMapApp')
     .controller('MapController', MapController);
 
-  MapController.$inject = ['$scope', '$state', '$timeout', '$document', '$templateRequest', '$compile', 'OpenSenseMapData', 'osemMapData', 'isMobile', 'OpenSenseMapAPI'];
+  MapController.$inject = ['$scope', '$state', '$timeout', '$document', '$templateRequest', '$compile', 'OpenSenseMapData', 'osemMapData', 'isMobile', 'OpenSenseMapAPI', 'boxes'];
 
-  function MapController ($scope, $state, $timeout, $document, $templateRequest, $compile, OpenSenseMapData, osemMapData, isMobile, OpenSenseMapAPI) {
+  function MapController ($scope, $state, $timeout, $document, $templateRequest, $compile, OpenSenseMapData, osemMapData, isMobile, OpenSenseMapAPI, boxes) {
     var vm = this;
     vm.showAllMarkers = true;
     vm.showClustering = true;
     vm.showLegend = false;
     vm.cssClass = '';
-    vm.loaded = false;
 
     vm.mapMarkers = {};
     // the following get filled from childscope sidebar.boxdetails.js
@@ -38,22 +37,17 @@
     ////
 
     function activate () {
-      vm.loadingCaption = 'Loading senseBoxes...'
-      return OpenSenseMapAPI.getBoxes({params: {classify: true}})
-        .then(function (data) {
-          vm.loadingCaption = 'Classifying markers...'
-          return OpenSenseMapData.setMarkers(data)
-            .then(function (response) {
-              vm.mapMarkers = response;
-              vm.loaded = true;
-            })
-            .catch(function (error) {
-              console.error(error);
-            });
-      })
-      .catch(function (error) {
-        return new Error('Could not resolve getBoxes() on explore.map.');
-      });
+      if (boxes instanceof Error) {
+        $state.go('explore.map.sidebar.error');
+        return;
+      }
+      return OpenSenseMapData.setMarkers(boxes)
+        .then(function (response) {
+          vm.mapMarkers = response;
+        })
+        .catch(function (error) {
+          console.error(error);
+        });
     }
 
     function createLegendFromTemplate (templateURI, clickHandler) {
@@ -159,7 +153,7 @@
 
     $scope.$on('osemMarkerClick.map_main', function (e, args) {
       $state.go('explore.map.sidebar.boxdetails', { id: args.target.options.station._id });
-    })
+    });
 
     $scope.$on('markersChanged', function (data) {
       vm.mapMarkers = OpenSenseMapData.getMarkers();

app/views/explore2.map.html

@@ -1,10 +1,3 @@
-<div ng-hide="map.loaded" style="position: absolute;z-index:1002; background-color: white; min-width: 50px; height: 100%; width: 100%;top: 0; left: 0; opacity: 0.5">
-  <div id="loader">
-    <div id="shadow"></div>
-    <div id="box"></div>
-    <div id="caption">{{map.loadingCaption}}</div>
-  </div>
-</div>
 <osem-map id="map_main" markers="map.mapMarkers" mobile-trajectory="map.boxLocations" mobile-measurements="map.selectedSensorMeasurements" mobile-legend-info="map.legendInfo" highlighted-measurement="map.highlightedMeasure"></osem-map>
 <div id="marker-label" style="position: absolute;z-index:1002; background-color: white; min-width: 50px; padding: 4px; border: 2px solid #4EAF47;" ng-style="{ left: map.hoverlabel.left, top: map.hoverlabel.top }">{{map.hoverlabel.name}}</div>
 <div ui-view="sidebar"></div>

bower.json

@@ -25,7 +25,8 @@
     "leaflet.markercluster": "Leaflet.markercluster#^1.0.6",
     "d3": "^4.10.0",
     "Leaflet.FeatureGroup.SubGroup": "^1.0.3",
-    "angular-ismobile": "^1.1.0"
+    "angular-ismobile": "^1.1.0",
+    "ngprogress": "^1.1.3"
   },
   "devDependencies": {
     "angular-mocks": "1.5",

package.json

@@ -2,7 +2,7 @@
   "name": "opensensemap",
   "version": "1.1.0",
   "dependencies": {
-    "@sensebox/opensensemap-i18n": "^2.2.0",
+    "@sensebox/opensensemap-i18n": "^2.3.0",
     "angular-i18n": "^1.6.7"
   },
   "devDependencies": {