[GIS] OpenLayers does not render WMS layer generated by MapServer

mapserveropenlayers-2

I need to add a WMS layer to my OpenLayers map and it should be generated by MapServer installed locally.

OpenLayers HTML file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers Demo</title>
<style type="text/css">
#map{
width: 600px; 
height: 300px; 
border: 2px solid black;
padding:0;
margin:0;
}
</style>
<script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>
<script type="text/javascript">

function init() {
var lon = 80.409;
var lat = 8.329;
var zoom = 14;
var map = new OpenLayers.Map("map");

var t = new OpenLayers.Layer.MapServer( "OpenLayers WMS", 
                "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'},
                {gutter: 15});
map.addLayer(t);

var dist = new OpenLayers.Layer.WMS( "abc","http://localhost:8080/cgi-bin/mapserv.exe?map=C:\\xampp\\htdocs\\mapfile.map",
                {

                    layers: 'parcels',
                    srs: 'EPSG:4326',
                    format: "image/png",
                    isBaseLayer: false,
                    visibility: true,

                }

        );
map.addLayer(dist);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
map.addControl( new OpenLayers.Control.LayerSwitcher() );   
}
</script>
</head>

<body onLoad="init()">
<div id="map"></div>
</body>
</html>

Map File

MAP
    NAME parcels_map
    STATUS ON
    SIZE 420 300
    EXTENT 489885 5450946 490904 5451637
    UNITS METERS
    SHAPEPATH "shapefiles"
    IMAGECOLOR 255 255 255 
    WEB
        TEMPLATE "template.html"
        IMAGEPATH "C:\\xampp\\htdocs\\output\\"
        IMAGEURL "/output/"
        METADATA
            "wms_title" "WMS Demo Server"
            "wms_onlineresource" "http://localhost:8080/cgi-bin/mapserv.exe?map=C:\\xampp\\htdocs\\mapfile.map"    
            "wms_srs" "EPSG:4326" 
            "wms_feature_info_mime_type"  "text/html"
        END
    END
    LAYER
        NAME parcel_boundaries
        DATA parcels
        STATUS DEFAULT
        TYPE POLYGON
        CLASS
            NAME "parcels_color"
            COLOR 255 215 0
        END
    END
END

Obviously MapServer can generate the map using the given shapefile. I have tested it by entering following URL to the browser.

http://localhost/cgi-bin/mapserv.exe?map=C:\\xampp\\htdocs\\mapfile.map

But, when adding this URL as WMS service URL, it just gives broken image tiles.

Any help would be very much appreciated.

Best Answer

When I added WMS version and CRS parameters to the request URL, it worked just fine.

Now it looks something like following.

var my_layer = new OpenLayers.Layer.WMS("Main Roads", "http://localhost/cgi-bin/mapserv.exe?map=C:/xampp/htdocs/sarisara/example.map&version=1.3.0&CRS=CRS:84", {layers: ['roads'], transparent: true}, {opacity:0.5},{isBaseLayer: false}, {bbox: '79.9865,7.95594,80.892,8.90883'});
Related Question