add bing layers; implement opacity slider for wms layer overlays
This commit is contained in:
Sanj
parent
b4cf8491ce
commit
71d4a919b2
|
|
@ -6,7 +6,9 @@ var creds = {
|
||||||
|
|
||||||
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/' + creds.cloudmade + '/997/256/{z}/{x}/{y}.png',
|
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/' + creds.cloudmade + '/997/256/{z}/{x}/{y}.png',
|
||||||
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
|
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 });
|
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 = {
|
var baseLayers = {
|
||||||
'OpenStreetMap': cloudmade,
|
'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);
|
L.control.layers(baseLayers, wmsLayers).addTo(map);
|
||||||
|
|
@ -227,4 +231,13 @@ $(function() {
|
||||||
var ctype_id = $(this).val();
|
var ctype_id = $(this).val();
|
||||||
location.href = '/edit/' + ctype_id;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,158 +1,118 @@
|
||||||
L.TileLayer.Bing = L.TileLayer.extend({
|
//From https://raw.github.com/shramov/leaflet-plugins/master/layer/tile/Bing.js
|
||||||
|
|
||||||
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 = {
|
L.BingLayer = L.TileLayer.extend({
|
||||||
key: this._apiKey,
|
options: {
|
||||||
jsonp: this._callbackId,
|
subdomains: [0, 1, 2, 3],
|
||||||
include: 'ImageryProviders'
|
type: 'Aerial',
|
||||||
},
|
attribution: 'Bing'
|
||||||
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
|
initialize: function(key, options) {
|
||||||
.replace('{subdomain}', subdomains[(xy.x + xy.y) % subdomains.length])
|
L.Util.setOptions(this, options);
|
||||||
.replace('{quadkey}', quadDigits.join(""));
|
|
||||||
},
|
this._key = key;
|
||||||
|
this._url = null;
|
||||||
_updateAttribution: function() {
|
this.meta = {};
|
||||||
if (this._map.attributionControl) {
|
this.loadMetadata();
|
||||||
var metadata = this.metadata;
|
},
|
||||||
var res = metadata.resourceSets[0].resources[0];
|
|
||||||
var bounds = this._map.getBounds();
|
tile2quad: function(x, y, z) {
|
||||||
var providers = res.imageryProviders, zoom = this._map.getZoom() + 1,
|
var quad = '';
|
||||||
copyrights = "", provider, i, ii, j, jj, bbox, coverage;
|
for (var i = z; i > 0; i--) {
|
||||||
for (i=0,ii=providers.length; i<ii; ++i) {
|
var digit = 0;
|
||||||
provider = providers[i];
|
var mask = 1 << (i - 1);
|
||||||
for (j=0,jj=provider.coverageAreas.length; j<jj; ++j) {
|
if ((x & mask) != 0) digit += 1;
|
||||||
coverage = provider.coverageAreas[j];
|
if ((y & mask) != 0) digit += 2;
|
||||||
if (zoom <= coverage.zoomMax && zoom >= coverage.zoomMin && coverage.bbox.intersects(bounds)) {
|
quad = quad + digit;
|
||||||
copyrights += provider.attribution + " ";
|
}
|
||||||
j = jj;
|
return quad;
|
||||||
}
|
},
|
||||||
}
|
|
||||||
}
|
getTileUrl: function(p, z) {
|
||||||
this._map.attributionControl.removeAttribution(this.attribution);
|
var z = this._getZoomForUrl();
|
||||||
this.attribution = this.attributionTemplate
|
var subdomains = this.options.subdomains,
|
||||||
.replace('{logo}', metadata.brandLogoUri)
|
s = this.options.subdomains[(p.x + p.y) % subdomains.length];
|
||||||
.replace('{copyrights}', copyrights);
|
return this._url.replace('{subdomain}', s)
|
||||||
this._map.attributionControl.addAttribution(this.attribution);
|
.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<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();
|
|
||||||
}
|
|
||||||
|
|
@ -52,7 +52,8 @@ CONTENT_TYPE_ID = {{ content_type_id }};
|
||||||
{{ c.name }}
|
{{ c.name }}
|
||||||
</option>
|
</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select>
|
</select> <br />
|
||||||
|
Overlay Opacity: <input type="range" min="0" max="10" value="10" id="opacityRange" />
|
||||||
<ul id="itemsList">
|
<ul id="itemsList">
|
||||||
</ul>
|
</ul>
|
||||||
<div id="itemInfo">
|
<div id="itemInfo">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user