Skip to content

Instantly share code, notes, and snippets.

@sbuscher

sbuscher/ChangeBingMapsAerialVersion.html

Last active October 30, 2017 18:55
Show Gist options
  • Save sbuscher/858ebb740d93423d9eada0c465c24277 to your computer and use it in GitHub Desktop.
Save sbuscher/858ebb740d93423d9eada0c465c24277 to your computer and use it in GitHub Desktop.
Download ZIP
Specify a previous version of Bing Maps to use in an ArcGIS JS VETiledLayer
Raw
ChangeBingMapsAerialVersion.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>VE Tile Layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css">
<script>dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.13/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.virtualearth.VETiledLayer");
dojo.require("dijit.form.Button");
var veTileLayer;
var esrimap;
function init() {
esrimap = new esri.Map("map");
//Creates the Virtual Earth layer to add to the map
//Example for adding a Bing Maps key
// bingMapsKey: "1B2C3OlkbxWHYa1b2c3qkPrO_Ou3nRrGtSa_5Op-xvPNya1b2c3",
veTileLayer = new esri.virtualearth.VETiledLayer({
bingMapsKey: prompt("Please enter your bing maps key"),
mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS
});
/******************************** Work Around - Start ******************************************/
//Cache a reference to the layer initializer function.
var temp = veTileLayer._initLayer;
//Override the initializer function.
veTileLayer._initLayer = function (a, b) {
//Override the map tile URL generation ID.
a.resourceSets[0].resources[0].imageUrl = a.resourceSets[0].resources[0].imageUrl.replace(/g=[0-9]+/, 'g=5772');
//Call the original initializer.
temp(a, b);
};
//Force the layer to refresh.
veTileLayer._getTileInfo();
/******************************** Work Around - End ******************************************/
esrimap.addLayer(veTileLayer);
// center in NNG operational area
esrimap.centerAndZoom([-95.35, 37.6], 5);
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div style="position:relative;">
<div id="map" style="width:1024px; height:1024px; border:1px solid #000;">
<div style="position:absolute; left:350px; top:10px; z-Index:999;">
<button data-dojo-type="dijit.form.Button" onClick="esrimap.centerAndZoom([-94.173556, 41.669311],12);">Zoom to Cloud Cover</button>
<button data-dojo-type="dijit.form.Button" onClick="esrimap.centerAndZoom([-90.673208, 42.29446],17);">Zoom to Snow Cover</button>
<button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL);">Aerial</button>
<button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS)">Aerial with labels</button>
<button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD)">Roads</button>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment