MapServer OpenLayers Example.

The following is a simple example of using OpenLayers with a MapServer WMS.

It is based on the OpenLayers examples.

<!doctype html>
<html lang="en">
    <link rel="stylesheet" href="ol.css" type="text/css">
      .map {
        height: 600px;
        width: 100%;
    <script src="ol.js" type="text/javascript"></script>
    <title>OpenLayers (4.3.2) MapServer WMS - Wales Imagery Example</title>
    <h2>OpenLayers (4.3.2) MapServer WMS - Wales Imagery Example</h2>
    <div id="map" class="map"></div>
<div id="mouse-position"></div>
      <label>Projection </label>
      <select id="projection">
        <option value="EPSG:4326">EPSG:4326</option>
      <label>Precision </label>
      <input id="precision" type="number" min="0" max="12" value="4"/>
    <script type="text/javascript">
      var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(4),
        projection: 'EPSG:4326',
        // comment the following two lines to have the mouse position
        // be placed within the map.
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp;'
      var map = new ol.Map({
    controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
               collapsible: false
        layers: [
  new ol.layer.Tile({
            source: new ol.source.TileWMS({
      // MapServer URL this must be the same as the one declared in the
                      // MapServer .map file.
                          url : 'http://mapserver:8080/cgi-bin/mapserv.exe?',
  params : {
                                 // This must be the layer name as defined in the capabilities document
         'LAYERS' : 'wales_imagery',  
  'TILED': true,
'FORMAT': 'image/png',
'TRANSPARENT': 'true',
serverType: 'mapserver',
crossOrigin: 'anonymous'
  projection : 'EPSG:4326',
  wrapX : false
//opacity: 0.5
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([-4.0, 51.7]),   // initial view position
          zoom: 9  // larger more zoomed in
      var projectionSelect = document.getElementById('projection');
      projectionSelect.addEventListener('change', function(event) {

      var precisionInput = document.getElementById('precision');
      precisionInput.addEventListener('change', function(event) {
        var format = ol.coordinate.createStringXY(;

The bits in bold are what need to be configured correctly.

You can find out what layers are supported by a WMS Server using the GetCapabilities command:

Make sure the ip address and port are correct.

What you are looking for is:

<Title>WMS Server</Title>
<Abstract>This server was setup by damian.dixon at</Abstract>

I was the Team Leader for MapLink Pro. Neil Tippett wrote a large part of the MapLink WMS Server. I ported the WMS server to Solaris and Linux and implemented the Xlib rendering and fine tuned it to run on multiple threads.