GeoServer WMS Layer not working in OpenLayers

Question

Here is my code:

var map;

function init() {
 var options = {
  maxExtent: new  OpenLayers.Bounds(-135.326858520508,-30.5615100860596,179.357788085938,69.604377746582),
  units: 'm',
  projection: "EPSG:900913",
};
     map = new OpenLayers.Map('map_element', options);            
            // setup tiled layer
            var tiled = new OpenLayers.Layer.WMS(
                "ne_10m_railroads", "http://localhost:8080/geoserver/earth/wms",
                {
                    LAYERS: 'earth:ne_10m_railroads',
                    STYLES: '',
                    format: OpenLayers.Format.WMSGetFeatureInfo,
                    tiled: true,
                    tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                },
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: true,

                } 
            );

            map.addLayer(tiled);

   if(!map.getCenter()){ map.zoomToMaxExtent(); }
}

This is the code for layer preview generated by GeoServer :

 var map;
        var untiled;
        var tiled;
        var pureCoverage = false;
        // pink tile avoidance
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
        // make OL compute scale according to WMS spec
        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

        function init(){
            // if this is just a coverage or a group of them, disable a few items,
            // and default to jpeg format
            format = 'image/png';
            if(pureCoverage) {
                document.getElementById('filterType').disabled = true;
                document.getElementById('filter').disabled = true;
                document.getElementById('antialiasSelector').disabled = true;
                document.getElementById('updateFilterButton').disabled = true;
                document.getElementById('resetFilterButton').disabled = true;
                document.getElementById('jpeg').selected = true;
                format = "image/jpeg";
            }

            var bounds = new OpenLayers.Bounds(
                -135.326858520508, -30.5615100860596,
                179.357788085938, 69.604377746582
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 1.2292369008064297,
                projection: "EPSG:900913",
                units: 'm'
            };
            map = new OpenLayers.Map('map', options);

            // setup tiled layer
            tiled = new OpenLayers.Layer.WMS(
                "earth:ne_10m_railroads - Tiled", "http://localhost:8080/geoserver/earth/wms",
                {
                    LAYERS: 'earth:ne_10m_railroads',
                    STYLES: '',
                    format: format,
                    tiled: true,
                    tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                },
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: true,
                    yx : {'EPSG:900913' : false}
                } 
            );

            // setup single tiled layer
            untiled = new OpenLayers.Layer.WMS(
                "earth:ne_10m_railroads - Untiled", "http://localhost:8080/geoserver/earth/wms",
                {
                    LAYERS: 'earth:ne_10m_railroads',
                    STYLES: '',
                    format: format
                },
                {
                   singleTile: true, 
                   ratio: 1, 
                   isBaseLayer: true,
                   yx : {'EPSG:900913' : false}
                } 
            );

            map.addLayers([untiled, tiled]);

            // build up all controls
            map.addControl(new OpenLayers.Control.PanZoomBar({
                position: new OpenLayers.Pixel(2, 15)
            }));
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.Scale($('scale')));
            map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
            map.zoomToExtent(bounds);

            // wire up the option button
            var options = document.getElementById("options");
            options.onclick = toggleControlPanel;

            // support GetFeatureInfo
            map.events.register('click', map, function (e) {
                document.getElementById('nodelist').innerHTML = "Loading... please wait...";
                var params = {
                    REQUEST: "GetFeatureInfo",
                    EXCEPTIONS: "application/vnd.ogc.se_xml",
                    BBOX: map.getExtent().toBBOX(),
                    SERVICE: "WMS",
                    INFO_FORMAT: 'text/html',
                    QUERY_LAYERS: map.layers[0].params.LAYERS,
                    FEATURE_COUNT: 50,
                    Layers: 'earth:ne_10m_railroads',
                    WIDTH: map.size.w,
                    HEIGHT: map.size.h,
                    format: format,
                    styles: map.layers[0].params.STYLES,
                    srs: map.layers[0].params.SRS};

                // handle the wms 1.3 vs wms 1.1 madness
                if(map.layers[0].params.VERSION == "1.3.0") {
                    params.version = "1.3.0";
                    params.j = parseInt(e.xy.x);
                    params.i = parseInt(e.xy.y);
                } else {
                    params.version = "1.1.1";
                    params.x = parseInt(e.xy.x);
                    params.y = parseInt(e.xy.y);
                }

                // merge filters
                if(map.layers[0].params.CQL_FILTER != null) {
                    params.cql_filter = map.layers[0].params.CQL_FILTER;
                } 
                if(map.layers[0].params.FILTER != null) {
                    params.filter = map.layers[0].params.FILTER;
                }
                if(map.layers[0].params.FEATUREID) {
                    params.featureid = map.layers[0].params.FEATUREID;
                }
                OpenLayers.loadURL("http://localhost:8080/geoserver/earth/wms", params, this, setHTML, setHTML);
                OpenLayers.Event.stop(e);
            });
        }

and its preivew is below:

---

Oh I got it!!! I shouldn't add those extra parameters: But I want to know what it actually means : I changed the Layer code to this and its working:

 map = new OpenLayers.Map('map_element', options);            
            // setup tiled layer
            var tiled = new OpenLayers.Layer.WMS(
                "ne_10m_railroads", "http://localhost:8080/geoserver/earth/wms",
                {
                    LAYERS: 'earth:ne_10m_railroads'},

                {} 
            );

What happens when I add these extra parameters..where it is wrong?

{
                LAYERS: 'earth:ne_10m_railroads',
                STYLES: '',
                format: OpenLayers.Format.WMSGetFeatureInfo,
                tiled: true,
                tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
            },

Answer 1

The WMS object takes 4 parameters - name, baseURL, WMS options. OpenLayers options. As you have in your working code:

 map = new OpenLayers.Map('map_element', options);            
            // setup tiled layer
            var tiled = new OpenLayers.Layer.WMS(
                "ne_10m_railroads", "http://localhost:8080/geoserver/earth/wms",
                {
                    LAYERS: 'earth:ne_10m_railroads'},

                {} 
            );

When you tried to add extra parameters they were OpenLayers parameters and so should have gone in the second map not the first. So

       {
            LAYERS: 'earth:ne_10m_railroads',
            STYLES: '',
            format: OpenLayers.Format.WMSGetFeatureInfo,
            tiled: true,
            tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
        },

Should be:

       {
            LAYERS: 'earth:ne_10m_railroads',
            STYLES: '',
            format: 'image/png'

        },
        {
            tiled: true,
            tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
        } 

so that the tiled parts go to OpenLayers rather than the WMS (which doesn't understand them).

Answer 2

You have added

format: OpenLayers.Format.WMSGetFeatureInfo,

The format parameter controls which MIME Type map images should be (as JPEG, PNG.... or even RSS, GML, KML if it is an WFS).

OpenLayers.Format.WMSGetFeatureInfo is another type of request, not a format as it is meant to be for this parameter, so this association is not allowed.

You have to write

format: 'image/png',

like it is in the layer preview