mlptownsend/bingBug.html

## bingBug.html
<!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://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
                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>
	<!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://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
	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>