test bing layer

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

openmumbai/places/static/leaflet/TileLayer.Bing.js

@@ -0,0 +1,158 @@
+L.TileLayer.Bing = L.TileLayer.extend({
+  
+  supportedTypes: ['Road', 'Aerial', 'AerialWithLabels'],
+  
+  attributionTemplate: '<span style="display:inline-block">' +
+       '<a target="_blank" href="http://www.bing.com/maps/">' +
+       '<img src="{logo}" /></a><br><span>{copyrights}' +
+       '<a style="white-space: nowrap" target="_blank" '+
+       'href="http://www.microsoft.com/maps/product/terms.html">' +
+       'Terms of Use</a></span></span>',
+  
+  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<ii; ++i) {
+          provider = providers[i];
+          for (j=0,jj=provider.coverageAreas.length; j<jj; ++j) {
+              coverage = provider.coverageAreas[j];
+              if (zoom <= coverage.zoomMax && zoom >= 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<providers.length; i++) {
+    provider = providers[i];
+    for (j=0; j<provider.coverageAreas.length; j++) {
+      bbox = provider.coverageAreas[j].bbox;
+      provider.coverageAreas[j].bbox = new L.LatLngBounds(new L.LatLng(bbox[0],bbox[1],true),new L.LatLng(bbox[2],bbox[3], true));
+    }
+  }
+  
+  this._url = res.imageUrl.replace('{culture}','en-US');
+  this.options.subdomains = [].concat(res.imageUrlSubdomains);
+  script.parentNode.removeChild(script);
+  window[this._callbackId] = undefined; // cannot delete from window in IE
+  delete this._callbackId;
+  this._onMetadataLoaded();
+}

openmumbai/templates/edit.html

@@ -35,6 +35,7 @@ html, body {
         </style>
         <script src="/static/leaflet/leaflet.js"></script>
         <script src="/static/leaflet/leaflet.draw.js"></script>
+        <script src="/static/leaflet/TileLayer.Bing.js"></script>
         <script src="http://code.jquery.com/jquery.js"></script>
         <script>
 CONTENT_TYPE_ID = {{ content_type_id }};