Commit aad7292c68b9bf95ab79c3cccaa3a21e4329add6

  • avatar
  • arvind
  • Fri Sep 06 14:17:36 IST 2013
Satellite imagery from Bing
  • Bing.js 122 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • index.html 2 -+
  • main.js 11 ----+++++++
  • Diff rendering mode:
  • inline
  • side by side

Bing.js

1L.BingLayer = L.TileLayer.extend({
2 options: {
3 subdomains: [0, 1, 2, 3],
4 type: 'Aerial',
5 attribution: 'Bing',
6 culture: ''
7 },
8
9 initialize: function(key, options) {
10 L.Util.setOptions(this, options);
11
12 this._key = key;
13 this._url = null;
14 this.meta = {};
15 this.loadMetadata();
16 },
17
18 tile2quad: function(x, y, z) {
19 var quad = '';
20 for (var i = z; i > 0; i--) {
21 var digit = 0;
22 var mask = 1 << (i - 1);
23 if ((x & mask) != 0) digit += 1;
24 if ((y & mask) != 0) digit += 2;
25 quad = quad + digit;
26 }
27 return quad;
28 },
29
30 getTileUrl: function(p, z) {
31 var z = this._getZoomForUrl();
32 var subdomains = this.options.subdomains,
33 s = this.options.subdomains[Math.abs((p.x + p.y) % subdomains.length)];
34 return this._url.replace('{subdomain}', s)
35 .replace('{quadkey}', this.tile2quad(p.x, p.y, z))
36 .replace('http:', document.location.protocol)
37 .replace('{culture}', this.options.culture);
38 },
39
40 loadMetadata: function() {
41 var _this = this;
42 var cbid = '_bing_metadata_' + L.Util.stamp(this);
43 window[cbid] = function (meta) {
44 _this.meta = meta;
45 window[cbid] = undefined;
46 var e = document.getElementById(cbid);
47 e.parentNode.removeChild(e);
48 if (meta.errorDetails) {
49 alert("Got metadata" + meta.errorDetails);
50 return;
51 }
52 _this.initMetadata();
53 };
54 var url = document.location.protocol + "//dev.virtualearth.net/REST/v1/Imagery/Metadata/" + this.options.type + "?include=ImageryProviders&jsonp=" + cbid + "&key=" + this._key;
55 var script = document.createElement("script");
56 script.type = "text/javascript";
57 script.src = url;
58 script.id = cbid;
59 document.getElementsByTagName("head")[0].appendChild(script);
60 },
61
62 initMetadata: function() {
63 var r = this.meta.resourceSets[0].resources[0];
64 this.options.subdomains = r.imageUrlSubdomains;
65 this._url = r.imageUrl;
66 this._providers = [];
67 for (var i = 0; i < r.imageryProviders.length; i++) {
68 var p = r.imageryProviders[i];
69 for (var j = 0; j < p.coverageAreas.length; j++) {
70 var c = p.coverageAreas[j];
71 var coverage = {zoomMin: c.zoomMin, zoomMax: c.zoomMax, active: false};
72 var bounds = new L.LatLngBounds(
73 new L.LatLng(c.bbox[0]+0.01, c.bbox[1]+0.01),
74 new L.LatLng(c.bbox[2]-0.01, c.bbox[3]-0.01)
75 );
76 coverage.bounds = bounds;
77 coverage.attrib = p.attribution;
78 this._providers.push(coverage);
79 }
80 }
81 this._update();
82 },
83
84 _update: function() {
85 if (this._url == null || !this._map) return;
86 this._update_attribution();
87 L.TileLayer.prototype._update.apply(this, []);
88 },
89
90 _update_attribution: function() {
91 var bounds = this._map.getBounds();
92 var zoom = this._map.getZoom();
93 for (var i = 0; i < this._providers.length; i++) {
94 var p = this._providers[i];
95 if ((zoom <= p.zoomMax && zoom >= p.zoomMin) &&
96 bounds.intersects(p.bounds)) {
97 if (!p.active && this._map.attributionControl)
98 this._map.attributionControl.addAttribution(p.attrib);
99 p.active = true;
100 } else {
101 if (p.active && this._map.attributionControl)
102 this._map.attributionControl.removeAttribution(p.attrib);
103 p.active = false;
104 }
105 }
106 },
107
108 onRemove: function(map) {
109 for (var i = 0; i < this._providers.length; i++) {
110 var p = this._providers[i];
111 if (p.active && this._map.attributionControl) {
112 this._map.attributionControl.removeAttribution(p.attrib);
113 p.active = false;
114 }
115 }
116 L.TileLayer.prototype.onRemove.apply(this, [map]);
117 }
118});
119
120L.bingLayer = function (key, options) {
121 return new L.BingLayer(key, options);
122};

index.html

13 <![endif]-->13 <![endif]-->
14 <link rel="stylesheet" href="leaflet.label.css" type="text/css" media="screen" />14 <link rel="stylesheet" href="leaflet.label.css" type="text/css" media="screen" />
15 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>15 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
16
16 <script type="text/javascript" src="Bing.js"></script>
17</head>17</head>
18<body>18<body>
19 <script type="text/javascript" src="leaflet-providers.js"></script>19 <script type="text/javascript" src="leaflet-providers.js"></script>

main.js

7 maxZoom: 18,7 maxZoom: 18,
8 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©<a href="http://cloudmade.com">CloudMade</a>'8 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©<a href="http://cloudmade.com">CloudMade</a>'
9 });9 });
10 var sat = L.tileLayer.provider("MapQuestOpen.Aerial");
10 // var sat = L.tileLayer.provider("MapQuestOpen.Aerial");
11 var bing = new L.BingLayer("AjuZVKHlyC5_471vh2TFunhEtLhMF9tI6TNBQddvUK0lpMJXrJmFBlCssPC68WxS");
11 var overlays = {12 var overlays = {
12 "Places" : markers,13 "Places" : markers,
13 "Photos": photos14 "Photos": photos
14 };15 };
15 var baseLayer = {16 var baseLayer = {
16 "Base Map": tileLayer,17 "Base Map": tileLayer,
17 "Satellite": sat
18 "Satellite": bing
18 };19 };
19 map = L.map('map', {layers:[tileLayer, markers, photos, sat]}).setView([14.31336, 76.64973], 10);
20 map = L.map('map', {layers:[tileLayer, markers, photos, bing]}).setView([14.31336, 76.64973], 12);
20 map.minZoom = 10;21 map.minZoom = 10;
21 map.maxZoom = 13;22 map.maxZoom = 13;
22 map.zoomControl = true;23 map.zoomControl = true;