MapServer WMS – Setting Up MapServer WMS and Using It with OpenLayers

mapserveropenlayers-2wms

I have set up MapServer WMS on the localhost by the following map file:

MAP
  NAME "Prvi_WMS"
  SIZE 600 300              # 600 by 300 pixel image output
  PROJECTION
       "init=epsg:4326"
  END  
    #EXTENT -180 -90 180 90
    WEB
    IMAGEPATH "/ms4w/tmp/ms_tmp/"
    IMAGEURL "/ms_tmp/"
    METADATA
      "wms_title" "My Global Map WMS Server"
      "wms_onlineresource" "http://localhost/cgi-bin/mapserv.exe?mode=map&map=c:/ms4w/Apache/htdocs/MapFile06_wms.map&"
      "wms_enable_request" "*"
      "wms_srs" "EPSG:4326"
    END
  END

  LAYER

    NAME countries
    TYPE POLYGON
    STATUS DEFAULT
    DATA "/ms4w/data/countries_simpl.shp"
    MINSCALE 1000
    MAXSCALE 1000000000     
    PROJECTION
       "init=epsg:4326"
    END  
    EXTENT -180 -90 180 90

    CLASSITEM 'NAME'
    CLASS
      NAME 'Bulgaria'
      EXPRESSION 'Bulgaria'
      OUTLINECOLOR 100 100 100
      COLOR 255 255 150
    END

    CLASS
      NAME 'All Countries'
      EXPRESSION ("[NAME]" ne 'Bulgaria')
      STYLE
        OUTLINECOLOR 100 100 100
      END
    END
    METADATA
      "wms_title" "World Boundaries"
      "wms_onlineresource" "http://localhost/cgi-bin/mapserv.exe?" 
      "wms_srs" "EPSG:4326"
      "wms_enable_request" "*"
    END
  END
END

then, I checked GetCapabilities and GetMap requests and the results seem fine. However, I have problems getting the map inside the OpenLayers. Here is how I define my WMS layer:

<html>
<head>
    <title>Karta</title>
    <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script  type="text/javascript">
    function inicializacija(){
        var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            units: "m",
            numZoomLevels: 18,
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
            };
         var map = new OpenLayers.Map("map-id", options);
         var osm = new OpenLayers.Layer.OSM("Open Street Map");
         var wms = new OpenLayers.Layer.MapServer( "World Map", "http://localhost/cgi-bin/mapserv.exe", {layers: 'countries',map: '/ms4w/Apache/htdocs/MapFile06_wms.map', srs: 'EPSG:4326'} );

        map.addLayers([osm,wms]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addControl(new OpenLayers.Control.MousePosition());


        map.zoomToExtent(new OpenLayers.Bounds(1490000, 5600000,1850000, 5900000));
    }
</script>
    <style>
        #map-id {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload= 'inicializacija()'>
    <h1>Primer prekrivanja slojev in izbire podlag</h1>
    <div id="map-id"></div>
</body>
</html>

The WMS layer shown in OpenLayers is completely white. What am I missing?

Best Answer

You say you have checked the GetCapabilities and GetMap requests/responses which indicates you are running MapServer as a WMS. Thus you need to be using a WMS layer in OpenLayers - I'm not sure of the status of the MapServer layer. so you need something like:

    map = new OpenLayers.Map( 'map' );
    layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
    map.addLayer(layer);

UPDATE

You'll need to provide a wms_srs element for each projection you need in your map file to enable reprojection (see http://mapserver.org/ogc/wms_server.html#setting-up-a-wms-server-using-mapserver)

Related Question