Created
September 20, 2022 20:17
-
-
Save mlptownsend/45885a1f2b40544373e583340dfd8920 to your computer and use it in GitHub Desktop.
bingBugNationalMap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?&callback=BingMapCallback&key=YOURKEY"></script> | |
<script type="text/javascript"> | |
window.BingMapCallback = function() { | |
var center = { | |
lat: 30, | |
lng: -85 | |
} | |
var zoom = 5; | |
var minZoom = 0; | |
var maxZoom = 21; | |
var options = { | |
center: new Microsoft.Maps.Location(center.lat, center.lng), | |
zoom: zoom, | |
}; | |
var div = window.document.getElementById('mapDiv'); | |
var map = window.map = new Microsoft.Maps.Map(div, options); | |
map.setMapType(Microsoft.Maps.MapTypeId.mercator); | |
var baseUrl = 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}'; | |
var tileSource = new Microsoft.Maps.TileSource({ | |
uriConstructor: function(tile) { | |
baseUrl = baseUrl.replace("{z}", "{zoom}"); | |
return baseUrl.replace('{x}', String(tile.x)).replace('{y}', String(tile.y)).replace('{zoom}', String(tile.zoom)); | |
}, | |
minZoom: 0, | |
maxZoom: 20 | |
}); | |
var baseLayer = new Microsoft.Maps.TileLayer({ | |
mercator: tileSource, | |
zIndex: 10000, | |
visible: true | |
}) | |
map.layers.insert(baseLayer); | |
//Define a custom overlay class that inherts from the CustomOverlay class. | |
PanningOverlay.prototype = new Microsoft.Maps.CustomOverlay({ beneathLabels : false }); | |
//Define a constructor for the custom overlay class. | |
function PanningOverlay() { | |
this.panUpBtn = document.createElement('input'); | |
this.panUpBtn.type = 'button'; | |
this.panUpBtn.value = '˄'; | |
this.panUpBtn.onclick = function () { | |
panMap('up'); | |
}; | |
this.panDownBtn = document.createElement('input'); | |
this.panDownBtn.type = 'button'; | |
this.panDownBtn.value = '˅'; | |
this.panDownBtn.onclick = function () { | |
panMap('down'); | |
}; | |
this.panLeftBtn = document.createElement('input'); | |
this.panLeftBtn.type = 'button'; | |
this.panLeftBtn.value = '<'; | |
this.panLeftBtn.onclick = function () { | |
panMap('left'); | |
}; | |
this.panRightBtn = document.createElement('input'); | |
this.panRightBtn.type = 'button'; | |
this.panRightBtn.value = '>'; | |
this.panRightBtn.onclick = function () { | |
panMap('right'); | |
}; | |
function panMap(dir) { | |
var dx = 0, dy = 0; | |
switch (dir) { | |
case 'up': | |
dy = 30; | |
break; | |
case 'down': | |
dy = -30; | |
break; | |
case 'left': | |
dx = 30; | |
break; | |
case 'right': | |
dx = -30; | |
break; | |
} | |
map.setView({ center: map.getCenter(), centerOffset: new Microsoft.Maps.Point(dx, dy)}) | |
} | |
} | |
//Implement the onAdd method to set up DOM elements, and use setHtmlElement to bind it with the overlay. | |
PanningOverlay.prototype.onAdd = function () { | |
//Create a div that will hold pan buttons. | |
var container = document.createElement('div'); | |
container.appendChild(this.panUpBtn); | |
container.appendChild(this.panDownBtn); | |
container.appendChild(this.panLeftBtn); | |
container.appendChild(this.panRightBtn); | |
container.style.position = 'absolute'; | |
container.style.top = '10px'; | |
container.style.left = '10px'; | |
this.setHtmlElement(container); | |
}; | |
//Implement the new custom overlay class. | |
var overlay = new PanningOverlay(); | |
//Add the custom overlay to the map. | |
map.layers.insert(overlay); | |
} | |
</script> | |
</head> | |
<body> | |
<div id="mapDiv" style="width:100%;height:100%;"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment