basemap cleanups

- updated Google, Bing and Yandex externals from https://github.com/shramov/leaflet-plugins
- also renamed Google file, removed internal hacks for INGRESS map type
- used external included file for Bing maps, instead of embedded in the plugin
- used Google map tile API to set the options for the INGRESS and 'Google Grey' map layers

code/boot.js

@@ -114,9 +114,22 @@ window.setupMap = function() {
   //var mqSatOpt = {attribution: 'Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency', mazZoom: 18, subdomains: mqSubdomains};
   //var mqSat = new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg',mqSatOpt);
 
+  var ingressGMapOptions = {
+    backgroundColor: '#0e3d4e', //or #dddddd ? - that's the Google tile layer default
+    styles: [
+        { featureType:"all", elementType:"all",
+          stylers: [{visibility:"on"}, {hue:"#131c1c"}, {saturation:"-50"}, {invert_lightness:true}] },
+        { featureType:"water", elementType:"all",
+          stylers: [{visibility:"on"}, {hue:"#005eff"}, {invert_lightness:true}] },
+        { featureType:"poi", stylers:[{visibility:"off"}]},
+        { featureType:"transit", elementType:"all", stylers:[{visibility:"off"}] }
+      ]
+  };
+
+
   var views = [
     /*0*/ mqMap,
-    /*1*/ new L.Google('INGRESS',{maxZoom:20}),
+    /*1*/ new L.Google('ROADMAP',{maxZoom:20, mapOptions:ingressGMapOptions}),
     /*2*/ new L.Google('ROADMAP',{maxZoom:20}),
     /*3*/ new L.Google('SATELLITE',{maxZoom:20}),
     /*4*/ new L.Google('HYBRID',{maxZoom:20}),
@@ -581,7 +594,7 @@ try { console.log('Loading included JS now'); } catch(e) {}
 @@INCLUDERAW:external/L.Geodesic.js@@
 // modified version of https://github.com/shramov/leaflet-plugins. Also
 // contains the default Ingress map style.
-@@INCLUDERAW:external/leaflet_google.js@@
+@@INCLUDERAW:external/Google.js@@
 @@INCLUDERAW:external/autolink.js@@
 
 try { console.log('done loading included JS'); } catch(e) {}

external/Bing.js

@@ -0,0 +1,124 @@
+L.BingLayer = L.TileLayer.extend({
+	options: {
+		subdomains: [0, 1, 2, 3],
+		type: 'Aerial',
+		attribution: 'Bing',
+		culture: ''
+	},
+
+	initialize: function(key, options) {
+		L.Util.setOptions(this, options);
+
+		this._key = key;
+		this._url = null;
+		this.meta = {};
+		this.loadMetadata();
+	},
+
+	tile2quad: function(x, y, z) {
+		var quad = '';
+		for (var i = z; i > 0; i--) {
+			var digit = 0;
+			var mask = 1 << (i - 1);
+			if ((x & mask) != 0) digit += 1;
+			if ((y & mask) != 0) digit += 2;
+			quad = quad + digit;
+		}
+		return quad;
+	},
+
+	getTileUrl: function(p, z) {
+		var z = this._getZoomForUrl();
+		var subdomains = this.options.subdomains,
+			s = this.options.subdomains[Math.abs((p.x + p.y) % subdomains.length)];
+		return this._url.replace('{subdomain}', s)
+				.replace('{quadkey}', this.tile2quad(p.x, p.y, z))
+				.replace('http:', document.location.protocol)
+				.replace('{culture}', this.options.culture);
+	},
+
+	loadMetadata: function() {
+		var _this = this;
+		var cbid = '_bing_metadata_' + L.Util.stamp(this);
+		window[cbid] = function (meta) {
+			_this.meta = meta;
+			window[cbid] = undefined;
+			var e = document.getElementById(cbid);
+			e.parentNode.removeChild(e);
+			if (meta.errorDetails) {
+				if (window.console) console.log("Leaflet Bing Plugin Error - Got metadata: " + meta.errorDetails);
+				return;
+			}
+			_this.initMetadata();
+		};
+		var url = document.location.protocol + "//dev.virtualearth.net/REST/v1/Imagery/Metadata/" + this.options.type + "?include=ImageryProviders&jsonp=" + cbid + "&key=" + this._key;
+		var script = document.createElement("script");
+		script.type = "text/javascript";
+		script.src = url;
+		script.id = cbid;
+		document.getElementsByTagName("head")[0].appendChild(script);
+	},
+
+	initMetadata: function() {
+		var r = this.meta.resourceSets[0].resources[0];
+		this.options.subdomains = r.imageUrlSubdomains;
+		this._url = r.imageUrl;
+		this._providers = [];
+		if (r.imageryProviders) {
+			for (var i = 0; i < r.imageryProviders.length; i++) {
+				var p = r.imageryProviders[i];
+				for (var j = 0; j < p.coverageAreas.length; j++) {
+					var c = p.coverageAreas[j];
+					var coverage = {zoomMin: c.zoomMin, zoomMax: c.zoomMax, active: false};
+					var bounds = new L.LatLngBounds(
+							new L.LatLng(c.bbox[0]+0.01, c.bbox[1]+0.01),
+							new L.LatLng(c.bbox[2]-0.01, c.bbox[3]-0.01)
+					);
+					coverage.bounds = bounds;
+					coverage.attrib = p.attribution;
+					this._providers.push(coverage);
+				}
+			}
+		}
+		this._update();
+	},
+
+	_update: function() {
+		if (this._url == null || !this._map) return;
+		this._update_attribution();
+		L.TileLayer.prototype._update.apply(this, []);
+	},
+
+	_update_attribution: function() {
+		var bounds = this._map.getBounds();
+		var zoom = this._map.getZoom();
+		for (var i = 0; i < this._providers.length; i++) {
+			var p = this._providers[i];
+			if ((zoom <= p.zoomMax && zoom >= p.zoomMin) &&
+					bounds.intersects(p.bounds)) {
+				if (!p.active && this._map.attributionControl)
+					this._map.attributionControl.addAttribution(p.attrib);
+				p.active = true;
+			} else {
+				if (p.active && this._map.attributionControl)
+					this._map.attributionControl.removeAttribution(p.attrib);
+				p.active = false;
+			}
+		}
+	},
+
+	onRemove: function(map) {
+		for (var i = 0; i < this._providers.length; i++) {
+			var p = this._providers[i];
+			if (p.active && this._map.attributionControl) {
+				this._map.attributionControl.removeAttribution(p.attrib);
+				p.active = false;
+			}
+		}
+        	L.TileLayer.prototype.onRemove.apply(this, [map]);
+	}
+});
+
+L.bingLayer = function (key, options) {
+    return new L.BingLayer(key, options);
+};

external/Google.js

@@ -0,0 +1,202 @@
+/*
+ * Google layer using Google Maps API
+ */
+//(function (google, L) {
+
+L.Google = L.Class.extend({
+	includes: L.Mixin.Events,
+
+	options: {
+		minZoom: 0,
+		maxZoom: 18,
+		tileSize: 256,
+		subdomains: 'abc',
+		errorTileUrl: '',
+		attribution: '',
+		opacity: 1,
+		continuousWorld: false,
+		noWrap: false,
+		mapOptions: {
+			backgroundColor: '#dddddd'
+		}
+	},
+
+	// Possible types: SATELLITE, ROADMAP, HYBRID, TERRAIN
+	initialize: function(type, options) {
+		L.Util.setOptions(this, options);
+
+		this._ready = google.maps.Map != undefined;
+		if (!this._ready) L.Google.asyncWait.push(this);
+
+		this._type = type || 'SATELLITE';
+	},
+
+	onAdd: function(map, insertAtTheBottom) {
+		this._map = map;
+		this._insertAtTheBottom = insertAtTheBottom;
+
+		// create a container div for tiles
+		this._initContainer();
+		this._initMapObject();
+
+		// set up events
+		map.on('viewreset', this._resetCallback, this);
+
+		this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
+		map.on('move', this._update, this);
+
+		map.on('zoomanim', this._handleZoomAnim, this);
+
+		//20px instead of 1em to avoid a slight overlap with google's attribution
+		map._controlCorners['bottomright'].style.marginBottom = "20px";
+
+		this._reset();
+		this._update();
+	},
+
+	onRemove: function(map) {
+		this._map._container.removeChild(this._container);
+		//this._container = null;
+
+		this._map.off('viewreset', this._resetCallback, this);
+
+		this._map.off('move', this._update, this);
+
+		this._map.off('zoomanim', this._handleZoomAnim, this);
+
+		map._controlCorners['bottomright'].style.marginBottom = "0em";
+		//this._map.off('moveend', this._update, this);
+	},
+
+	getAttribution: function() {
+		return this.options.attribution;
+	},
+
+	setOpacity: function(opacity) {
+		this.options.opacity = opacity;
+		if (opacity < 1) {
+			L.DomUtil.setOpacity(this._container, opacity);
+		}
+	},
+
+	setElementSize: function(e, size) {
+		e.style.width = size.x + "px";
+		e.style.height = size.y + "px";
+	},
+
+	_initContainer: function() {
+		var tilePane = this._map._container,
+			first = tilePane.firstChild;
+
+		if (!this._container) {
+			this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
+			this._container.id = "_GMapContainer_" + L.Util.stamp(this);
+			this._container.style.zIndex = "auto";
+		}
+
+		if (true) {
+			tilePane.insertBefore(this._container, first);
+
+			this.setOpacity(this.options.opacity);
+			this.setElementSize(this._container, this._map.getSize());
+		}
+	},
+
+	_initMapObject: function() {
+		if (!this._ready) return;
+		this._google_center = new google.maps.LatLng(0, 0);
+		var map = new google.maps.Map(this._container, {
+		    center: this._google_center,
+		    zoom: 0,
+		    tilt: 0,
+		    mapTypeId: google.maps.MapTypeId[this._type],
+		    disableDefaultUI: true,
+		    keyboardShortcuts: false,
+		    draggable: false,
+		    disableDoubleClickZoom: true,
+		    scrollwheel: false,
+		    streetViewControl: false,
+		    styles: this.options.mapOptions.styles,
+		    backgroundColor: this.options.mapOptions.backgroundColor
+		});
+
+		var _this = this;
+		this._reposition = google.maps.event.addListenerOnce(map, "center_changed",
+			function() { _this.onReposition(); });
+		this._google = map;
+
+		google.maps.event.addListenerOnce(map, "idle",
+			function() { _this._checkZoomLevels(); });
+	},
+
+	_checkZoomLevels: function() {
+		//setting the zoom level on the Google map may result in a different zoom level than the one requested
+		//(it won't go beyond the level for which they have data).
+		// verify and make sure the zoom levels on both Leaflet and Google maps are consistent
+		if (this._google.getZoom() !== this._map.getZoom()) {
+			//zoom levels are out of sync. Set the leaflet zoom level to match the google one
+			this._map.setZoom( this._google.getZoom() );
+		}
+	},
+
+	_resetCallback: function(e) {
+		this._reset(e.hard);
+	},
+
+	_reset: function(clearOldContainer) {
+		this._initContainer();
+	},
+
+	_update: function(e) {
+		if (!this._google) return;
+		this._resize();
+
+		var center = e && e.latlng ? e.latlng : this._map.getCenter();
+		var _center = new google.maps.LatLng(center.lat, center.lng);
+
+		this._google.setCenter(_center);
+		this._google.setZoom(this._map.getZoom());
+
+		this._checkZoomLevels();
+		//this._google.fitBounds(google_bounds);
+	},
+
+	_resize: function() {
+		var size = this._map.getSize();
+		if (this._container.style.width == size.x &&
+		    this._container.style.height == size.y)
+			return;
+		this.setElementSize(this._container, size);
+		this.onReposition();
+	},
+
+
+	_handleZoomAnim: function (e) {
+		var center = e.center;
+		var _center = new google.maps.LatLng(center.lat, center.lng);
+
+		this._google.setCenter(_center);
+		this._google.setZoom(e.zoom);
+	},
+
+
+	onReposition: function() {
+		if (!this._google) return;
+		google.maps.event.trigger(this._google, "resize");
+	}
+});
+
+L.Google.asyncWait = [];
+L.Google.asyncInitialize = function() {
+	var i;
+	for (i = 0; i < L.Google.asyncWait.length; i++) {
+		var o = L.Google.asyncWait[i];
+		o._ready = true;
+		if (o._container) {
+			o._initMapObject();
+			o._update();
+		}
+	}
+	L.Google.asyncWait = [];
+};
+//})(window.google, L)

external/Yandex.js

@@ -95,7 +95,9 @@ L.Yandex = L.Class.extend({
 
 		// Check that ymaps.Map is ready
 		if (ymaps.Map === undefined) {
+			if (console) {
 				console.debug("L.Yandex: Waiting on ymaps.load('package.map')");
+			}
 			return ymaps.load(["package.map"], this._initMapObject, this);
 		}
 
@@ -103,7 +105,9 @@ L.Yandex = L.Class.extend({
 		if (this.options.traffic)
 			if (ymaps.control === undefined ||
 					ymaps.control.TrafficControl === undefined) {
+				if (console) {
 					console.debug("L.Yandex: loading traffic and controls");
+				}
 				return ymaps.load(["package.traffic", "package.controls"],
 					this._initMapObject, this);
 			}
@@ -117,7 +121,7 @@ L.Yandex = L.Class.extend({
 			this._type = new ymaps.MapType("null", []);
 			map.container.getElement().style.background = "transparent";
 		}
-		map.setType(this._type)
+		map.setType(this._type);
 
 		this._yandex = map;
 		this._update(true);

external/leaflet_google.js

@@ -1,158 +0,0 @@
-/*
- * L.TileLayer is used for standard xyz-numbered tile layers.
- */
-L.Google = L.Class.extend({
-  includes: L.Mixin.Events,
-
-  options: {
-    minZoom: 0,
-    maxZoom: 18,
-    tileSize: 256,
-    subdomains: 'abc',
-    errorTileUrl: '',
-    attribution: '',
-    opacity: 1,
-    continuousWorld: false,
-    noWrap: false,
-  },
-
-  // Possible types: SATELLITE, ROADMAP, HYBRID, INGRESS
-  initialize: function(type, options, styles) {
-    L.Util.setOptions(this, options);
-    if(type === 'INGRESS') {
-      type = 'ROADMAP';
-      this._styles = [{featureType:"all", elementType:"all", stylers:[{visibility:"on"}, {hue:"#131c1c"}, {saturation:"-50"}, {invert_lightness:true}]}, {featureType:"water", elementType:"all", stylers:[{visibility:"on"}, {hue:"#005eff"}, {invert_lightness:true}]}, {featureType:"poi", stylers:[{visibility:"off"}]}, {featureType:"transit", elementType:"all", stylers:[{visibility:"off"}]}];
-    } else {
-      this._styles = null;
-    }
-    this._type = google.maps.MapTypeId[type || 'SATELLITE'];
-  },
-
-  onAdd: function(map, insertAtTheBottom) {
-    this._map = map;
-    this._insertAtTheBottom = insertAtTheBottom;
-
-    // create a container div for tiles
-    this._initContainer();
-    this._initMapObject();
-
-    this._map.options.zoomAnimation = false;
-
-    // set up events
-    //~ map.on('viewreset', this._resetCallback, this);
-    map.on('move', this._update, this);
-
-    this._reset();
-    this._update();
-  },
-
-  onRemove: function(map) {
-    this._map._container.removeChild(this._container);
-    //this._container = null;
-
-    //~ this._map.off('viewreset', this._resetCallback, this);
-    this._map.options.zoomAnimation = true;
-
-    this._map.off('move', this._update, this);
-    //this._map.off('moveend', this._update, this);
-  },
-
-  getAttribution: function() {
-    return this.options.attribution;
-  },
-
-  setOpacity: function(opacity) {
-    this.options.opacity = opacity;
-    if (opacity < 1) {
-      L.DomUtil.setOpacity(this._container, opacity);
-    }
-  },
-
-  _initContainer: function() {
-    var tilePane = this._map._container
-      first = tilePane.firstChild;
-
-    if (!this._container) {
-      this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
-      this._container.id = "_GMapContainer";
-    }
-
-    if (true) {
-      tilePane.insertBefore(this._container, first);
-
-      this.setOpacity(this.options.opacity);
-      var size = this._map.getSize();
-      this._container.style.width = size.x + 'px';
-      this._container.style.height = size.y + 'px';
-    }
-  },
-
-  _initMapObject: function() {
-    this._google_center = new google.maps.LatLng(0, 0);
-    var map = new google.maps.Map(this._container, {
-        center: this._google_center,
-        zoom: 0,
-        styles: this._styles,
-        tilt: 0,
-        mapTypeId: this._type,
-        disableDefaultUI: true,
-        keyboardShortcuts: false,
-        draggable: false,
-        disableDoubleClickZoom: true,
-        scrollwheel: false,
-        streetViewControl: false
-    });
-
-    var _this = this;
-    this._reposition = google.maps.event.addListenerOnce(map, "center_changed",
-      function() { _this.onReposition(); });
-
-    map.backgroundColor = '#ff0000';
-    this._google = map;
-    this._lastZoomPosition = null;
-    this._lastMapPosition = null;
-  },
-
-  _resetCallback: function(e) {
-    this._reset(e.hard);
-  },
-
-  _reset: function(clearOldContainer) {
-    this._initContainer();
-  },
-
-  _update: function() {
-    this._resize();
-
-    // update map position if required
-    var newCenter = this._map.getCenter();
-    if(this._lastMapPosition !== newCenter) {
-      var _center = new google.maps.LatLng(newCenter.lat, newCenter.lng);
-      this._google.setCenter(_center);
-    }
-    this._lastMapPosition = newCenter;
-
-    // update zoom level if required
-    var newZoom = this._map.getZoom();
-    if(this._lastZoomPosition !== newZoom) {
-      this._google.setZoom(this._map.getZoom());
-    }
-    this._lastZoomPosition = newZoom;
-  },
-
-  _resize: function() {
-    var size = this._map.getSize();
-    if (parseInt(this._container.style.width) == size.x &&
-        parseInt(this._container.style.height) == size.y)
-      return;
-
-    this._container.style.width = size.x + 'px';
-    this._container.style.height = size.y + 'px';
-
-    google.maps.event.trigger(this._google, "resize");
-  },
-
-  onReposition: function() {
-    //google.maps.event.trigger(this._google, "resize");
-  }
-});

plugins/basemap-bing.user.js

@@ -1,9 +1,8 @@
 // ==UserScript==
-// ==UserScript==
 // @id             iitc-plugin-bing-maps
 // @name           IITC plugin: Bing maps
 // @category       Map Tiles
-// @version        0.1.0.@@DATETIMEVERSION@@
+// @version        0.1.1.@@DATETIMEVERSION@@
 // @namespace      https://github.com/jonatkins/ingress-intel-total-conversion
 // @updateURL      @@UPDATEURL@@
 // @downloadURL    @@DOWNLOADURL@@
@@ -22,127 +21,7 @@
 window.plugin.mapBing = function() {};
 
 window.plugin.mapBing.setupBingLeaflet = function() {
-//---------------------------------------------------------------------
+@@INCLUDERAW:external/Bing.js@@
-// https://github.com/shramov/leaflet-plugins/blob/master/layer/tile/Bing.js
-L.BingLayer = L.TileLayer.extend({
-	options: {
-		subdomains: [0, 1, 2, 3],
-		type: 'Aerial',
-		attribution: 'Bing',
-		culture: ''
-	},
-
-	initialize: function(key, options) {
-		L.Util.setOptions(this, options);
-
-		this._key = key;
-		this._url = null;
-		this.meta = {};
-		this.loadMetadata();
-	},
-
-	tile2quad: function(x, y, z) {
-		var quad = '';
-		for (var i = z; i > 0; i--) {
-			var digit = 0;
-			var mask = 1 << (i - 1);
-			if ((x & mask) != 0) digit += 1;
-			if ((y & mask) != 0) digit += 2;
-			quad = quad + digit;
-		}
-		return quad;
-	},
-
-	getTileUrl: function(p, z) {
-		var z = this._getZoomForUrl();
-		var subdomains = this.options.subdomains,
-			s = this.options.subdomains[Math.abs((p.x + p.y) % subdomains.length)];
-		return this._url.replace('{subdomain}', s)
-				.replace('{quadkey}', this.tile2quad(p.x, p.y, z))
-				.replace('{culture}', this.options.culture);
-	},
-
-	loadMetadata: function() {
-		// TODO? modify this to cache the metadata in - say - sessionStorage? localStorage?
-		var _this = this;
-		var cbid = '_bing_metadata_' + L.Util.stamp(this);
-		window[cbid] = function (meta) {
-			_this.meta = meta;
-			window[cbid] = undefined;
-			var e = document.getElementById(cbid);
-			e.parentNode.removeChild(e);
-			if (meta.errorDetails) {
-				alert("Got metadata" + meta.errorDetails);
-				return;
-			}
-			_this.initMetadata();
-		};
-		var url = "//dev.virtualearth.net/REST/v1/Imagery/Metadata/" + this.options.type + "?include=ImageryProviders&jsonp=" + cbid + "&key=" + this._key;
-		var script = document.createElement("script");
-		script.type = "text/javascript";
-		script.src = url;
-		script.id = cbid;
-		document.getElementsByTagName("head")[0].appendChild(script);
-	},
-
-	initMetadata: function() {
-		var r = this.meta.resourceSets[0].resources[0];
-		this.options.subdomains = r.imageUrlSubdomains;
-		this._url = r.imageUrl;
-		this._providers = [];
-		for (var i = 0; i < r.imageryProviders.length; i++) {
-			var p = r.imageryProviders[i];
-			for (var j = 0; j < p.coverageAreas.length; j++) {
-				var c = p.coverageAreas[j];
-				var coverage = {zoomMin: c.zoomMin, zoomMax: c.zoomMax, active: false};
-				var bounds = new L.LatLngBounds(
-						new L.LatLng(c.bbox[0]+0.01, c.bbox[1]+0.01),
-						new L.LatLng(c.bbox[2]-0.01, c.bbox[3]-0.01)
-				);
-				coverage.bounds = bounds;
-				coverage.attrib = p.attribution;
-				this._providers.push(coverage);
-			}
-		}
-		this._update();
-	},
-
-	_update: function() {
-		if (this._url == null || !this._map) return;
-		this._update_attribution();
-		L.TileLayer.prototype._update.apply(this, []);
-	},
-
-	_update_attribution: function() {
-		var bounds = this._map.getBounds();
-		var zoom = this._map.getZoom();
-		for (var i = 0; i < this._providers.length; i++) {
-			var p = this._providers[i];
-			if ((zoom <= p.zoomMax && zoom >= p.zoomMin) &&
-					bounds.intersects(p.bounds)) {
-				if (!p.active)
-					this._map.attributionControl.addAttribution(p.attrib);
-				p.active = true;
-			} else {
-				if (p.active)
-					this._map.attributionControl.removeAttribution(p.attrib);
-				p.active = false;
-			}
-		}
-	},
-
-	onRemove: function(map) {
-		for (var i = 0; i < this._providers.length; i++) {
-			var p = this._providers[i];
-			if (p.active) {
-				this._map.attributionControl.removeAttribution(p.attrib);
-				p.active = false;
-			}
-		}
-        	L.TileLayer.prototype.onRemove.apply(this, [map]);
-	}
-});
-//---------------------------------------------------------------------
 }
 	
 

plugins/basemap-gmaps-gray.user.js

@@ -2,7 +2,7 @@
 // @id             iitc-plugin-basemap-gmaps-gray@jacob1123
 // @name           IITC plugin: Gray Google Roads
 // @category       Map Tiles
-// @version        0.1.0.@@DATETIMEVERSION@@
+// @version        0.1.1.@@DATETIMEVERSION@@
 // @namespace      https://github.com/jonatkins/ingress-intel-total-conversion
 // @updateURL      @@UPDATEURL@@
 // @downloadURL    @@DOWNLOADURL@@
@@ -21,8 +21,23 @@
 // use own namespace for plugin
 window.plugin.grayGMaps = function() {};
 window.plugin.grayGMaps.addLayer = function() {
-    var grayGMaps = new L.Google('ROADMAPS',{maxZoom:20});
+  var grayGMapsOptions = {
-    grayGMaps._styles = [{featureType:"landscape.natural",stylers:[{visibility:"simplified"},{saturation:-100},{lightness:-80},{gamma:2.44}]},{featureType:"road",stylers:[{visibility:"simplified"},{color:"#bebebe"},{weight:.6}]},{featureType:"poi",stylers:[{saturation:-100},{visibility:"on"},{gamma:.14}]},{featureType:"water",stylers:[{color:"#32324f"}]},{featureType:"transit",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"poi",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"poi"},{featureType:"landscape.man_made",stylers:[{saturation:-100},{gamma:.13}]},{featureType:"water",elementType:"labels",stylers:[{visibility:"off"}]}]
+    backgroundColor: '#0e3d4e', //or #dddddd ? - that's the Google tile layer default
+    styles: [
+      {featureType:"landscape.natural",stylers:[{visibility:"simplified"},{saturation:-100},{lightness:-80},{gamma:2.44}]},
+      {featureType:"road",stylers:[{visibility:"simplified"},{color:"#bebebe"},{weight:.6}]},
+      {featureType:"poi",stylers:[{saturation:-100},{visibility:"on"},{gamma:.14}]},
+      {featureType:"water",stylers:[{color:"#32324f"}]},
+      {featureType:"transit",stylers:[{visibility:"off"}]},
+      {featureType:"road",elementType:"labels",stylers:[{visibility:"off"}]},
+      {featureType:"poi",elementType:"labels",stylers:[{visibility:"off"}]},
+      {featureType:"poi"},
+      {featureType:"landscape.man_made",stylers:[{saturation:-100},{gamma:.13}]},
+      {featureType:"water",elementType:"labels",stylers:[{visibility:"off"}]}
+    ]
+  };
+
+  var grayGMaps = new L.Google('ROA#DMAP',{maxZoom:20, mapOptions: grayGMapsOptions});
 
   layerChooser.addBaseLayer(grayGMaps, "Google Gray");
 };