From 71d4a919b2ad0003535a9bdab29d2dd44671a987 Mon Sep 17 00:00:00 2001 From: Sanj Date: Tue, 14 Aug 2012 17:59:35 +0530 Subject: [PATCH] add bing layers; implement opacity slider for wms layer overlays --- openmumbai/places/static/js/edit.js | 17 +- .../places/static/leaflet/TileLayer.Bing.js | 270 ++++++++---------- openmumbai/templates/edit.html | 3 +- 3 files changed, 132 insertions(+), 158 deletions(-) diff --git a/openmumbai/places/static/js/edit.js b/openmumbai/places/static/js/edit.js index dbaedcf..07997f4 100644 --- a/openmumbai/places/static/js/edit.js +++ b/openmumbai/places/static/js/edit.js @@ -6,7 +6,9 @@ var creds = { var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/' + creds.cloudmade + '/997/256/{z}/{x}/{y}.png', cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}), - bingLayer = new L.TileLayer.Bing(creds.bing, 'Aerial'), + bingRoadsLayer = new L.BingLayer(creds.bing, {'type': 'Road'}), + bingSatelliteLayer = new L.BingLayer(creds.bing, {'type': 'Aerial'}) + bingSatelliteWithLabelsLayer = new L.BingLayer(creds.bing, {'type': 'AerialWithLabels'}) map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(19.11577, 72.855211), zoom: 11 }); @@ -152,7 +154,9 @@ wmsLayers['Test Warped Map'] = L.tileLayer.wms("http://mapwarper.net/maps/wms/33 var baseLayers = { 'OpenStreetMap': cloudmade, - 'Bing Satellite Imagery': bingLayer + 'Bing Satellite Imagery': bingSatelliteLayer, + 'Bing Road Map': bingRoadsLayer, + 'Bing Satellite with Labels': bingSatelliteWithLabelsLayer }; L.control.layers(baseLayers, wmsLayers).addTo(map); @@ -227,4 +231,13 @@ $(function() { var ctype_id = $(this).val(); location.href = '/edit/' + ctype_id; }); + + $('#opacityRange').change(function() { + var val = $(this).val(); + for (wmsLayer in wmsLayers) { + if (wmsLayers.hasOwnProperty(wmsLayer)) { + wmsLayers[wmsLayer].setOpacity(val / 10); + } + } + }); }); diff --git a/openmumbai/places/static/leaflet/TileLayer.Bing.js b/openmumbai/places/static/leaflet/TileLayer.Bing.js index dee1f10..bdc7a31 100644 --- a/openmumbai/places/static/leaflet/TileLayer.Bing.js +++ b/openmumbai/places/static/leaflet/TileLayer.Bing.js @@ -1,158 +1,118 @@ -L.TileLayer.Bing = L.TileLayer.extend({ - - supportedTypes: ['Road', 'Aerial', 'AerialWithLabels'], - - attributionTemplate: '' + - '' + - '
{copyrights}' + - '' + - 'Terms of Use', - - initialize: function(/*String*/ apiKey, /*String*/ mapType, /*Object*/ options) { - - this._apiKey = apiKey; - this._mapType = mapType; - - this._loadMetadata(); - - L.Util.setOptions(this, options); - }, - - _loadMetadata: function() { - - this._callbackId = "_l_tilelayer_bing_" + (L.TileLayer.Bing._callbackId++); - //window[this._callbackId] = L.Util.bind(L.TileLayer.Bing.processMetadata, this); - that = this; - window[this._callbackId] = function() { L.TileLayer.Bing.processMetadata.apply(that, arguments); } +//From https://raw.github.com/shramov/leaflet-plugins/master/layer/tile/Bing.js - var params = { - key: this._apiKey, - jsonp: this._callbackId, - include: 'ImageryProviders' - }, - url = "http://dev.virtualearth.net/REST/v1/Imagery/Metadata/" + - this._mapType + L.Util.getParamString(params), - script = document.createElement("script"); - - script.type = "text/javascript"; - script.src = url; - script.id = this._callbackId; - document.getElementsByTagName("head")[0].appendChild(script); - }, - - _onMetadataLoaded: function() {}, - - onAdd: function(map, insertAtTheBottom) { - if (!this.metadata) { - this._onMetadataLoaded = L.Util.bind(function() { - L.TileLayer.prototype.onAdd.call(this, map, insertAtTheBottom); - map.on('moveend', this._updateAttribution, this); - this._updateAttribution(); - }, this); - } else { - L.TileLayer.prototype.onAdd.call(this, map, insertAtTheBottom); - map.on('moveend', this._updateAttribution, this); - this._updateAttribution(); - } - }, - - onRemove: function(map) { - if (this._map.attributionControl) { - this._map.attributionControl.removeAttribution(this.attribution); - } - this._map.off('moveend', this._updateAttribution, this); - L.TileLayer.prototype.onRemove.call(this, map); - }, - - getTileUrl: function(xy, z) { - var subdomains = this.options.subdomains, - quadDigits = [], - i = z, - digit, - mask, - quadKey; - // borrowed directly from OpenLayers - for (; i > 0; --i) { - digit = '0'; - mask = 1 << (i - 1); - if ((xy.x & mask) != 0) { - digit++; - } - if ((xy.y & mask) != 0) { - digit++; - digit++; - } - quadDigits.push(digit); - } +L.BingLayer = L.TileLayer.extend({ + options: { + subdomains: [0, 1, 2, 3], + type: 'Aerial', + attribution: 'Bing' + }, - return this._url - .replace('{subdomain}', subdomains[(xy.x + xy.y) % subdomains.length]) - .replace('{quadkey}', quadDigits.join("")); - }, - - _updateAttribution: function() { - if (this._map.attributionControl) { - var metadata = this.metadata; - var res = metadata.resourceSets[0].resources[0]; - var bounds = this._map.getBounds(); - var providers = res.imageryProviders, zoom = this._map.getZoom() + 1, - copyrights = "", provider, i, ii, j, jj, bbox, coverage; - for (i=0,ii=providers.length; i= coverage.zoomMin && coverage.bbox.intersects(bounds)) { - copyrights += provider.attribution + " "; - j = jj; - } - } - } - this._map.attributionControl.removeAttribution(this.attribution); - this.attribution = this.attributionTemplate - .replace('{logo}', metadata.brandLogoUri) - .replace('{copyrights}', copyrights); - this._map.attributionControl.addAttribution(this.attribution); - } - } + 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[(p.x + p.y) % subdomains.length]; + return this._url.replace('{subdomain}', s) + .replace('{quadkey}', this.tile2quad(p.x, p.y, z)) + .replace('{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) { + alert("Got metadata" + meta.errorDetails); + return; + } + _this.initMetadata(); + }; + var url = "http://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]); + } }); - -L.TileLayer.Bing._callbackId = 0; - -L.TileLayer.Bing.processMetadata = function(metadata) { - if (metadata.authenticationResultCode != 'ValidCredentials') { - throw "Invalid Bing Maps API Key" - } - - if (!metadata.resourceSets.length || !metadata.resourceSets[0].resources.length) { - throw "No resources returned, perhaps " + this._mapType + " is an invalid map type?"; - } - - if (metadata.statusCode != 200) { - throw "Bing Maps API request failed with status code " + metadata.statusCode; - } - - this.metadata = metadata; - var res = metadata.resourceSets[0].resources[0], - providers = res.imageryProviders, - i = 0, - j, - provider, - bbox, - script = document.getElementById(this._callbackId); - - for (; i {% endfor %} - +
+ Overlay Opacity: