Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>OpenLayers MapServer Test</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/theme/default/style.css" media="all" />
<style>
html { width:100%; height:100%; margin:0; }
body { width:100%; height:100%; margin:0; font-family:sans-serif; }
#map { width:100%; height:100%; margin:0; }
</style>
</head>
<body>
<div id="map"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<script>
// set projection:
var projData = new OpenLayers.Projection("EPSG:4326");
var projDisplay = new OpenLayers.Projection("EPSG:3857");

// initialize map:
var map = new OpenLayers.Map('map', { projection:projDisplay, controls:[new OpenLayers.Control.Zoom(), new OpenLayers.Control.Navigation({'zoomWheelEnabled':true}), new OpenLayers.Control.ScaleLine()], maxResolution:100  } );

// set basemap:
var rasterLayer = new OpenLayers.Layer.WMS("Tamale (2014 WS)", "http://localhost/cgi-bin/mapserv?map=/mapserver/tamale.map", {layers: 'tamale_2014_ws' } );

map.addLayer(rasterLayer);

// set map center:
map.setCenter(new OpenLayers.LonLat( -0.837,9.3823).transform(projData, projDisplay), 7);
</script>
</body>
</html>