How to add WMS layer in OpenLayers from GeoServer?

Question

How to overlay a WMS layer from GeoServer (localhost)in OpenLayers?

What is the basic syntax of a GeoServer WMS layer?

Details are as follows:

workspace name: india
layer name:hospitals

 <script defer="defer" type="text/javascript">
 var map = new OpenLayers.Map('map'); 
 var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "labs.metacarta.com/wms/vmap0";, {layers: 'basic'} );
 var twms = new OpenLayers.Layer.WMS( "World Map", "localhost:8080/geoserver/wms?service=WMS&version=1.1.1& request=GetCapabilities&", 
 { 
     map: 'hospitals', 
     transparent: 'true', 
     layers: 'hospitals'
 } ); 
 map.addLayers([wms, twms]);
 map.zoomToMaxExtent(); 
 </script> 

Answer 1

Your OpenLayers.Layer.WMS statements should look like this:

basemap = new OpenLayers.Layer.WMS( "Layer Name1",
    "http://localhost:8080/geoserver/wms/workspacename", {layers: 'workspacename:layername'} );\
utility = new OpenLayers.Layer.WMS( "Layer Name2",
    "http://localhost:8080/geoserver/wms/workspacename", {layers: 'workspacename:layername', transparent:"true"}, {isBaseLayer:false} );

Answer 2

Please consider the version of the your API. Also define suitable projection for your layer.

var layer2 = new OpenLayers.Layer.WMS(maplayer.displayName,
                maplayer.datasource,
                { layers: [2], version: '1.3.0' ,'srs':maplayer.crs},
                  {singleTile: true,
                      isBaseLayer: false,
                      projection: "EPSG:102113"
                  }
                );

layer2.setOpacity(0.52);

map.addLayer(layer2);

Answer 3

It should be enough removing '? service=wms& version=1.1.1& request=GetCapabilities' from the url parameter of the layer declaration

Answer 4

Test WMS

<link rel="stylesheet" href: "http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css"  />   
<!-- <link rel="stylesheet" href: "C:/ol3_samples/assests/css/samples.css" type="text/css" /> -->

http://openlayers.org/en/v3.0.0/build/ol.js" >

var wms_source = new ol.source.TileWMS({
 url: 'http://localhost:6080/geoserver/Jharkhand/wms',
 params: {
          'LAYERS': 'Jharkhand:Jharkhand_block_boundary1'
          }
          });
var wms_layer = new ol.layer.Tile({
   source:  wms_source
     });       

var base_map = new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'osm'})
    });

    var layers = [
    base_map,
    wms_layer
    ];

    var vw=new ol.View({
      center: ol.proj.transform([85.6082,23.7175], 'EPSG:4326', 'EPSG:3857'),
      zoom:6
      });

     var map= new ol.Map({
     target: 'map',
     layers: layers,
     view: vw
     });

    </script>
    </body>
    </html>