From b4cf8491ced2388fa5eff9bf535161627ed4984e Mon Sep 17 00:00:00 2001 From: Sanj Date: Tue, 14 Aug 2012 17:36:27 +0530 Subject: [PATCH] test bing layer --- openmumbai/places/static/js/edit.js | 17 +- .../places/static/leaflet/TileLayer.Bing.js | 158 ++++++++++++++++++ openmumbai/templates/edit.html | 1 + 3 files changed, 172 insertions(+), 4 deletions(-) create mode 100644 openmumbai/places/static/leaflet/TileLayer.Bing.js diff --git a/openmumbai/places/static/js/edit.js b/openmumbai/places/static/js/edit.js index 360c58f..dbaedcf 100644 --- a/openmumbai/places/static/js/edit.js +++ b/openmumbai/places/static/js/edit.js @@ -1,11 +1,17 @@ var creds = { - 'cloudmade': '534d7b971d044dcaafa6678414f26924' + 'cloudmade': '534d7b971d044dcaafa6678414f26924', + 'bing': 'AkZ3bI3sTc4kQwkQBOMQlM8ZzTPoYy0FrUIZ7SH82Qn8cZKrG638H38NH5kwVgBL' } + 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'), + map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(19.11577, 72.855211), zoom: 11 }); + + var drawControl = new L.Control.Draw({ // position: 'topright', polygon: { @@ -139,14 +145,17 @@ map.addLayer(drawnItems); // }) // .addTo(map); -wmsLayers = {}; +var wmsLayers = {}; wmsLayers['Test Warped Map'] = L.tileLayer.wms("http://mapwarper.net/maps/wms/336", { 'format': 'image/png' });//.addTo(map); +var baseLayers = { + 'OpenStreetMap': cloudmade, + 'Bing Satellite Imagery': bingLayer +}; - -L.control.layers(null, wmsLayers).addTo(map); +L.control.layers(baseLayers, wmsLayers).addTo(map); loadGeoJsonFeatures("/geojson/" + CONTENT_TYPE_ID); diff --git a/openmumbai/places/static/leaflet/TileLayer.Bing.js b/openmumbai/places/static/leaflet/TileLayer.Bing.js new file mode 100644 index 0000000..dee1f10 --- /dev/null +++ b/openmumbai/places/static/leaflet/TileLayer.Bing.js @@ -0,0 +1,158 @@ +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); } + + 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); + } + + 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); + } + } +}); + +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 +