[GIS] Cannot access GeoServer WMS

geoserveropenlayerswms

I am trying to connect a WMS layer from GeoServer with OpenLayers 3 like below, however, my JavaScript file does not show my WMS layer.

My Chrome says it failed to load response data (WMS). My source is redirected to below URL. This URL works on my server, but not through the JavaScript source.

http://localhost:8080/geoserver/Mars/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&layers=Mars%3AMercury_basemap&tiled=true&format=application%2Fopenlayers&srs=EPSG%3A4326&transparent=true&WIDTH=512&HEIGHT=512&CRS=EPSG%3A3857&STYLES=&FORMAT_OPTIONS=dpi%3A180&BBOX=-15028131.257091932%2C5009377.085697312%2C-12523442.714243276%2C7514065.628545968

Can someone please help?

It seems like the problem is caused from security settings in GeoServer and I tried to create roles to getread() as well. (http://docs.geoserver.org/stable/en/user/security/service.html)

enter image description here

var layers = [
 new ol.layer.Tile({
 extent: [-13884991, 2870341, -7455066, 6338219],
 source: new ol.source.TileWMS({
  url: "http://localhost:8080/geoserver/Mars/wms",
  params: {'layers': 'Mars:Mercury_basemap', 'tiled': true, 'format': 'application/openlayers', 'srs': 'EPSG:4326', 'transparent': true},
  serverType: 'geoserver'
 }))
 })
];

var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View({
   center: [-10997148, 4569099],
   zoom: 4
  })
});

Best Answer

You are asking geoserver to return a javascript application rather than the image that openlayers is expecting.

Remove the format parameter and the srs and tiled ones too.

Related Question