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]);
  • 1
    what have you tried so far? Have you tried this sample: openlayers.org/dev/examples/wms.html – Devdatta Tengshe Apr 23 '13 at 9:07
  • Ya i tried the basic wms layer, now i want to overlay my layers from geoserver . what me to do? – Satya Chandra Apr 23 '13 at 9:10
  • please post the code that you have already used, and let us know where you are stuck right now. – Devdatta Tengshe Apr 23 '13 at 9:20
  • Please edit your question and put it there, instead of in a comment. Also, what is the url of your geoserver? – Devdatta Tengshe Apr 23 '13 at 9:32
  • GeoServer WMS layers conform to the WMS specification, so any OpenLayers example with any service providing a WMS should help you. Your comment i tried the basic wms layer, now i want to overlay my layers from geoserver doesn't make any sense. There should be no syntax difference. If it's not working for you, and you are hosting the GeoServer WMS service, perhaps you should look first at getting your WMS working first. – nmtoken Jan 14 '17 at 20:02

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} );

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

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



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


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 = [

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

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.