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
This commit is contained in:
Jon Atkins
2013-11-22 20:46:03 +00:00
parent 34115cb04e
commit 85255f476b
7 changed files with 372 additions and 293 deletions

View File

@ -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) {}

124
external/Bing.js vendored Normal file
View File

@ -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);
};

202
external/Google.js vendored Normal file
View File

@ -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)

14
external/Yandex.js vendored
View File

@ -95,15 +95,19 @@ L.Yandex = L.Class.extend({
// Check that ymaps.Map is ready
if (ymaps.Map === undefined) {
console.debug("L.Yandex: Waiting on ymaps.load('package.map')");
if (console) {
console.debug("L.Yandex: Waiting on ymaps.load('package.map')");
}
return ymaps.load(["package.map"], this._initMapObject, this);
}
// If traffic layer is requested check if control.TrafficControl is ready
if (this.options.traffic)
if (ymaps.control === undefined ||
ymaps.control.TrafficControl === undefined) {
console.debug("L.Yandex: loading traffic and controls");
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);
@ -147,7 +151,7 @@ L.Yandex = L.Class.extend({
_resize: function(force) {
var size = this._map.getSize(), style = this._container.style;
if (style.width == size.x + "px" &&
style.height == size.y + "px")
style.height == size.y + "px")
if (force != true) return;
this.setElementSize(this._container, size);
var b = this._map.getBounds(), sw = b.getSouthWest(), ne = b.getNorthEast();

View File

@ -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");
}
});

View File

@ -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() {
//---------------------------------------------------------------------
// 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]);
}
});
//---------------------------------------------------------------------
@@INCLUDERAW:external/Bing.js@@
}

View File

@ -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,14 +21,29 @@
// use own namespace for plugin
window.plugin.grayGMaps = function() {};
window.plugin.grayGMaps.addLayer = function() {
var grayGMaps = new L.Google('ROADMAPS',{maxZoom:20});
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"}]}]
var grayGMapsOptions = {
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"}]}
]
};
layerChooser.addBaseLayer(grayGMaps, "Google Gray");
var grayGMaps = new L.Google('ROA#DMAP',{maxZoom:20, mapOptions: grayGMapsOptions});
layerChooser.addBaseLayer(grayGMaps, "Google Gray");
};
var setup = window.plugin.grayGMaps.addLayer;
// PLUGIN END //////////////////////////////////////////////////////////
@@PLUGINEND@@
@@PLUGINEND@@