mlptownsend/gist:51684e0e988250dd3630b4d5fa6d67b7

## gistfile1.txt
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?&callback=BingMapCallback&key=YOURKEYHERE"></script>
        <script type="text/javascript">
            window.BingMapCallback = function() {
                var center = {
                    lat: 40,
                    lng: -99
                }
                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 NOAAWeatherRadar = new Microsoft.Maps.TileLayer({
                    mercator: new Microsoft.Maps.TileSource({
                        uriConstructor: 'https://idpgis.ncep.noaa.gov/arcgis/services/NWS_Observations/radar_base_reflectivity/MapServer/WmsServer?REQUEST=GetMap&SERVICE=WMS&VERSION=1.3.0&LAYERS=1&STYLES=default&FORMAT=image/png&TRANSPARENT=TRUE&CRS=CRS:84&BBOX={bbox}&WIDTH=256&HEIGHT=256',
                        minZoom: 3,
                        maxZoom: 10,
                        bounds: Microsoft.Maps.LocationRect.fromEdges(50.415613, -127.629361, 21.661516, -66.526907)
                    })
                });

                map.layers.insert(NOAAWeatherRadar);


                //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=YOURKEYHERE"></script>
	<script type="text/javascript">
	window.BingMapCallback = function() {
	var center = {
	lat: 40,
	lng: -99
	}
	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 NOAAWeatherRadar = new Microsoft.Maps.TileLayer({
	mercator: new Microsoft.Maps.TileSource({
	uriConstructor: 'https://idpgis.ncep.noaa.gov/arcgis/services/NWS_Observations/radar_base_reflectivity/MapServer/WmsServer?REQUEST=GetMap&SERVICE=WMS&VERSION=1.3.0&LAYERS=1&STYLES=default&FORMAT=image/png&TRANSPARENT=TRUE&CRS=CRS:84&BBOX={bbox}&WIDTH=256&HEIGHT=256',
	minZoom: 3,
	maxZoom: 10,
	bounds: Microsoft.Maps.LocationRect.fromEdges(50.415613, -127.629361, 21.661516, -66.526907)
	})
	});

	map.layers.insert(NOAAWeatherRadar);


	//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>