Bing Maps REST Services - Imagery Metadata
Trying to zoom in on BirdsEye imagery and it's not working.
HTML
<img id="birdseye" />
<div id="error">
<h1>
Error
</h1>
</div>
CSS
img#birdseye {
height: 500px;
}
div#error:not(.visible) {
display: none;
}
JavaScript
let getBirdsEyeImage = function(latitude, longitude) {
const imagerySet = 'Birdseye';
const apiKey = 'YOUR API KEY';
const url = `https://dev.virtualearth.net/REST/v1/Imagery/Metadata/${imagerySet}/${latitude},${longitude}`;
const zoomLevel = 20;
return fetch(`${url}?key=${apiKey}&uriScheme=https&zoomLevel=${zoomLevel}`)
.then((response) => {
if (response.ok) return response.json();
throw new Error(`Could not fetch imagery metadata for ${latitude}, ${longitude}`);
})
.then((responseJson) => {
if (!responseJson.resourceSets.length) throw new Error(`No resources found for ${latitude}, ${longitude}`);
const imageryMetadata = responseJson.resourceSets[0].resources[0];
const tileUrlTemplate = imageryMetadata.imageUrl;
const tileUrlSubdomains = imageryMetadata.imageUrlSubdomains;
const tileWidth = imageryMetadata.imageWidth;
const tilesX = imageryMetadata.tilesX;
const tilesY = imageryMetadata.tilesY;
const maxTileIndex = (tilesX * tilesY) - 1;
const mapWidth = tileWidth * tilesX;
const mapHeight = tileWidth * tilesY;
let mapCanvas = document.createElement('canvas');
mapCanvas.width = mapWidth;
mapCanvas.height = mapHeight;
let context = mapCanvas.getContext('2d');
return new Promise(function(resolve, reject) {
[...Array(tilesY).keys()].forEach((y) => {
[...Array(tilesX).keys()].forEach((x) => {
let tileNumber = ((y * tilesX) + x);
let tileUrl = tileUrlTemplate.replace('{tileId}', tileNumber).replace('{subdomain}', tileUrlSubdomains[0])
let tileImage = new Image(tileWidth, tileWidth)
tileImage.crossOrigin = 'anonymous';
tileImage.src = tileUrl;
tileImage.onload = function() {
context.drawImage(tileImage, x * tileWidth, y * tileWidth, tileWidth, tileWidth);
if (tileNumber >= maxTileIndex) {
...