Add a new Tilt3d components

src/components/backgroundselector/BackgroundSelectorDirective.js

@@ -19,7 +19,8 @@ goog.require('ga_topic_service');
         templateUrl:
             'components/backgroundselector/partials/backgroundselector.html',
         scope: {
-          map: '=gaBackgroundSelectorMap'
+          map: '=gaBackgroundSelectorMap',
+          ol3d: '=gaBackgroundSelectorOl3d'
         },
         link: function(scope, elt, attrs) {
           scope.isBackgroundSelectorClosed = true;
@@ -45,7 +46,10 @@ goog.require('ga_topic_service');
             } else {
               scope.isBackgroundSelectorClosed = true;
               if (scope.currentLayer != bgLayer) {
-                scope.currentLayer = bgLayer;
+                var ol3dEnabled = scope.ol3d && scope.ol3d.getEnabled();
+                if (!(bgLayer.disable3d && ol3dEnabled)) {
+                  scope.currentLayer = bgLayer;
+                }
               }
             }
           };
@@ -63,7 +67,8 @@ goog.require('ga_topic_service');
               return (selected ? 'ga-bg-highlight ' : '') +
                 'ga-' + splitLayer[splitLayer.length - 1] +
                 ' ' + ((!scope.isBackgroundSelectorClosed) ?
-                'ga-bg-layer-' + index : '');
+                'ga-bg-layer-' + index : '') +
+                ' ' + (layer.disable3d ? 'ga-disable3d' : '');
             }
           };
 

src/components/backgroundselector/BackgroundService.js

@@ -18,7 +18,7 @@ goog.require('ga_permalink');
       var isOfflineToOnline = false;
       var bg; // The current background
       var bgs = [ // The list of backgrounds available
-        {id: 'ch.swisstopo.swissimage', label: 'bg_luftbild'},
+        {id: 'ch.swisstopo.swissimage', label: 'bg_luftbild', disable3d: true},
         {id: 'ch.swisstopo.pixelkarte-farbe', label: 'bg_pixel_color'},
         {id: 'ch.swisstopo.pixelkarte-grau', label: 'bg_pixel_grey'},
         {id: 'voidLayer', label: 'void_layer'}

src/components/backgroundselector/style/backgroundselector.less

@@ -240,3 +240,10 @@
     }
   }
 }
+
+.ga-3d-active {
+  .ga-disable3d {
+    background-color: gray;
+    color: gray;
+  }
+}

src/components/tilt3d/Tilt3dDirective.js

@@ -0,0 +1,39 @@
+goog.provide('ga_tilt3d_directive');
+
+(function() {
+
+  var module = angular.module('ga_tilt3d_directive', []);
+
+  module.directive('gaTilt3d', function(gaBrowserSniffer) {
+    return {
+      restrict: 'A',
+      templateUrl: 'components/tilt3d/partials/tilt3d.html',
+      link: function(scope, element, attrs) {
+
+        scope.supported = gaBrowserSniffer.webgl;
+
+        // FIXME: remove this
+        // true is the selected background layer is not 3d compatible.
+        scope.disabled = false;
+        scope.$on('gaBgChange', function(evt, value) {
+          scope.disabled = value.id == 'ch.swisstopo.swissimage';
+          if (scope.disabled) {
+            // FIXME: set scope.globals.is3dActive to false
+          }
+        });
+
+        scope.tilt = function() {
+          if (scope.supported) {
+            if (!scope.disabled) {
+              scope.globals.is3dActive = !scope.globals.is3dActive;
+            } else {
+              // FIXME: error message "selected background not compatible"
+            }
+          } else {
+            // FIXME: error message "browser not supported"
+          }
+        };
+      }
+    };
+  });
+})();

src/components/tilt3d/Tilt3dModule.js

@@ -0,0 +1,9 @@
+goog.provide('ga_tilt3d');
+
+goog.require('ga_tilt3d_directive');
+(function() {
+
+  angular.module('ga_tilt3d', [
+    'ga_tilt3d_directive'
+  ]);
+})();

src/components/tilt3d/partials/tilt3d.html

@@ -0,0 +1 @@
+<button type="button" class="ga-tilt3d" ng-click="tilt()" ng-class="{'ga-disabled': disabled, 'ga-unsupported': !supported}">3d</button>

src/components/tilt3d/style/tilt3d.less

@@ -0,0 +1,15 @@
+.ga-tilt3d {
+  background-color: #fff !important;
+  &.ga-unsupported {
+
+  }
+  &.ga-disabled {
+    background-color: gray !important;
+  }
+}
+
+.ga-3d-active {
+  .ga-tilt3d {
+    background-color: green !important;
+  }
+}

src/index.mako.html

@@ -217,6 +217,7 @@
   % if device == 'mobile':
         <div ga-offline-bt></div>
   % endif
+        <div ga-tilt3d ng-if="globals.dev3d"></div>
       </div>
       <div ga-swipe 
            ga-swipe-map="map" 
@@ -232,7 +233,8 @@
 
 % if device != 'embed':
     <div ng-cloak ga-background-selector
-         ga-background-selector-map="map"
+         ga-background-selector-map="map",
+         ga-background-selector-ol3d="::ol3d"
          ng-hide="globals.offline">
     </div>
     <div ng-cloak translate-cloak id="footer" class="navbar navbar-fixed-bottom">

src/js/GaModule.js

@@ -47,6 +47,7 @@ goog.require('ga_share');
 goog.require('ga_share_controller');
 goog.require('ga_styles_from_literals_service');
 goog.require('ga_swipe');
+goog.require('ga_tilt3d');
 goog.require('ga_timeselector');
 goog.require('ga_timeselector_controller');
 goog.require('ga_timestamp_control');
@@ -115,7 +116,8 @@ goog.require('ga_waitcursor_service');
     'ga_tooltip_controller',
     'ga_featuretree_controller',
     'ga_draw_controller',
-    'ga_query_controller'
+    'ga_query_controller',
+    'ga_tilt3d'
   ]);
 
 })();

src/js/MainController.js

@@ -133,9 +133,6 @@ goog.require('ga_storage_service');
     $scope.map = createMap();
 
     if (gaGlobalOptions.dev3d && gaBrowserSniffer.webgl) {
-      $rootScope.$on('gaBgChange', function(evt, newBg) {
-        $scope.globals.is3dActive = !!newBg.is3d;
-      });
       $scope.map.on('change:target', function(event) {
         if (!!$scope.map.getTargetElement()) {
           $scope.$watch('globals.is3dActive', function(active) {

src/style/app.less

@@ -31,6 +31,7 @@
 @import "../components/query/style/query.less";
 @import "../components/timestampcontrol/style/timestampcontrol.less";
 @import "../components/translation/style/translation.less";
+@import "../components/tilt3d/style/tilt3d.less";
 
 
 @header-height: 89;