use in-app layer chooser on desktop mode

code/boot.js

@@ -5,6 +5,7 @@
 
 // Used to disable on multitouch devices
 window.showZoom = true;
+window.showLayerChooser = true;
 
 window.setupLargeImagePreview = function() {
   $('#portaldetails').on('click', '.imgpreview', function() {
@@ -342,6 +343,81 @@ window.setupQRLoadLib = function() {
   @@INCLUDERAW:external/jquery.qrcode.min.js@@
 }
 
+window.setupLayerChooserApi = function() {
+  // hide layer chooser on mobile devices running desktop mode
+  if (!window.showLayerChooser) {
+    $('.leaflet-control-layers').hide();
+  }
+
+  //hook some additional code into the LayerControl so it's easy for the mobile app to interface with it
+  //WARNING: does depend on internals of the L.Control.Layers code
+  window.layerChooser.getLayers = function() {
+    var baseLayers = new Array();
+    var overlayLayers = new Array();
+
+    for (i in this._layers) {
+      var obj = this._layers[i];
+      var layerActive = window.map.hasLayer(obj.layer);
+      var info = {
+        layerId: L.stamp(obj.layer),
+        name: obj.name,
+        active: layerActive
+      }
+      if (obj.overlay) {
+        overlayLayers.push(info);
+      } else {
+        baseLayers.push(info);
+      }
+    }
+
+    var overlayLayersJSON = JSON.stringify(overlayLayers);
+    var baseLayersJSON = JSON.stringify(baseLayers);
+
+    if (typeof android !== 'undefined' && android && android.setLayers) {
+        android.setLayers(baseLayersJSON, overlayLayersJSON);
+    }
+
+    return {
+      baseLayers: baseLayers,
+      overlayLayers: overlayLayers
+    }
+  }
+
+  window.layerChooser.showLayer = function(id,show) {
+    if (show === undefined) show = true;
+    obj = this._layers[id];
+    if (!obj) return false;
+
+    if(show) {
+      if (!this._map.hasLayer(obj.layer)) {
+        //the layer to show is not currently active
+        this._map.addLayer(obj.layer);
+
+        //if it's a base layer, remove any others
+        if (!obj.overlay) {
+          for(i in this._layers) {
+            if (i != id) {
+              var other = this._layers[i];
+              if (!other.overlay && this._map.hasLayer(other.layer)) this._map.removeLayer(other.layer);
+            }
+          }
+        }
+      }
+    } else {
+      if (this._map.hasLayer(obj.layer)) {
+        this._map.removeLayer(obj.layer);
+      }
+    }
+
+    //below logic based on code in L.Control.Layers _onInputClick
+    if(!obj.overlay) {
+      this._map.setZoom(this._map.getZoom());
+      this._map.fire('baselayerchange', {layer: obj.layer});
+    }
+
+    return true;
+  }
+}
 
 // BOOTING ///////////////////////////////////////////////////////////
 
@@ -407,6 +483,7 @@ function boot() {
     });
 
   window.setMapBaseLayer();
+  window.setupLayerChooserApi();
 
   window.runOnSmartphonesAfterBoot();
 

code/smartphone.js

@@ -105,73 +105,4 @@ window.runOnSmartphonesAfterBoot = function() {
   window.MAX_DRAWN_PORTALS = 500;
   window.MAX_DRAWN_LINKS = 200;
   window.MAX_DRAWN_FIELDS = 100;
-
-  //hook some additional code into the LayerControl so it's easy for the mobile app to interface with it
-  //WARNING: does depend on internals of the L.Control.Layers code
-  window.layerChooser.getLayers = function() {
-    var baseLayers = new Array();
-    var overlayLayers = new Array();
-
-    for (i in this._layers) {
-      var obj = this._layers[i];
-      var layerActive = window.map.hasLayer(obj.layer);
-      var info = {
-        layerId: L.stamp(obj.layer),
-        name: obj.name,
-        active: layerActive
-      }
-      if (obj.overlay) {
-        overlayLayers.push(info);
-      } else {
-        baseLayers.push(info);
-      }
-    }
-
-    var overlayLayersJSON = JSON.stringify(overlayLayers);
-    var baseLayersJSON = JSON.stringify(baseLayers);
-
-    if (typeof android !== 'undefined' && android && android.setLayers) {
-        android.setLayers(baseLayersJSON, overlayLayersJSON);
-    }
-
-    return {
-      baseLayers: baseLayers,
-      overlayLayers: overlayLayers
-    }
-  }
-  window.layerChooser.showLayer = function(id,show) {
-    if (show === undefined) show = true;
-    obj = this._layers[id];
-    if (!obj) return false;
-
-    if(show) {
-      if (!this._map.hasLayer(obj.layer)) {
-        //the layer to show is not currently active
-        this._map.addLayer(obj.layer);
-
-        //if it's a base layer, remove any others
-        if (!obj.overlay) {
-          for(i in this._layers) {
-            if (i != id) {
-              var other = this._layers[i];
-              if (!other.overlay && this._map.hasLayer(other.layer)) this._map.removeLayer(other.layer);
-            }
-          }
-        }
-      }
-    } else {
-      if (this._map.hasLayer(obj.layer)) {
-        this._map.removeLayer(obj.layer);
-      }
-    }
-
-    //below logic based on code in L.Control.Layers _onInputClick
-    if(!obj.overlay) {
-      this._map.setZoom(this._map.getZoom());
-      this._map.fire('baselayerchange', {layer: obj.layer});
-    }
-
-    return true;
-  }
-
 }

code/utils_misc.js

@@ -470,8 +470,6 @@ window.addLayerGroup = function(name, layerGroup, defaultDisplay) {
   layerChooser.addOverlay(layerGroup, name);
 }
 
-
-
 window.clampLat = function(lat) {
   if (lat > 90.0)
     lat = 90.0;

mobile/AndroidManifest.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
           package="com.cradle.iitc_mobile"
-          android:versionCode="24"
+          android:versionCode="25"
-          android:versionName="0.4.3">
+          android:versionName="0.4.4">
 
     <uses-sdk
         android:minSdkVersion="14"

mobile/src/com/cradle/iitc_mobile/IITC_Mobile.java

@@ -507,7 +507,5 @@ public class IITC_Mobile extends Activity {
         item.setVisible(!desktop);
         item = menu.findItem(R.id.menu_debug);
         item.setVisible(!desktop);
-        item = menu.findItem(R.id.layer_chooser);
-        item.setVisible(!desktop);
     }
 }

mobile/src/com/cradle/iitc_mobile/IITC_WebViewClient.java

@@ -105,6 +105,13 @@ public class IITC_WebViewClient extends WebViewClient {
                     "window.showZoom = false;");
         }
 
+        // hide layer chooser on desktop mode
+        // on mobile mode it is hidden via smartphone.css
+        boolean desktopMode = sharedPref.getBoolean("pref_force_desktop", false);
+        if (desktopMode) {
+            js = js.replace("window.showLayerChooser = true;",
+                    "window.showLayerChooser = false");
+        }
         // add all plugins to the script...inject plugins + main script simultaneously
         js += parsePlugins();
         this.js = js;