Bounding box coordinates and strange WMS behavior

Question

I'm having trouble with using OpenLayers to render a GeoServer WMS layer. I have searched about it on the internet but have found no workaround yet. I intend to provide as much as I know on this issue, that's why my post is quite long!

I am trying to render a shp layer which is located inside a donnees_validees workspace (in GeoServer). I am using a 1.1.0 version for Web Map Service (WMS). I can reach this layer on GeoServer; the SRC is "EPSG:3857" :

And it looks like this :

This is the URL used by GeoServer to access it:

http://localhost:8080/geoserver/donnees_validees/wms? 
service=WMS&
version=1.1.0&
request=GetMap&
layers=donnees_validees%3Ashp&
bbox=4.7153439%2C44.6334029%2C5.1199732%2C45.6618753&
width=330&
height=768&
srs=EPSG%3A3857&
format=application/openlayers

It tells us the bounding box is the following: 4.7153439,44.6334029,5.1199732,45.6618753

My problem is that when using OpenLayers (v3) library to render that, I'm getting nothing on my screen even though the page have been reached. It might come from a wrong view initialization, but I'm not sure.

On top of that, my request has been modified meanwhile; it now turned to:

http://localhost:8080/geoserver/donnees_validees/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&FORMAT=image%2Fpng8&TRANSPARENT=true&LAYERS=donnees_validees%3Ashp&SRS=EPSG%3A3857&BBOX=-21846.05200578905%2C-21805.38973278905%2C21855.544965789053%2C21896.20723878905&STYLES=&FORMAT_OPTIONS=dpi%3A81&WIDTH=1&HEIGHT=1

You can notice my bounding box parameter turned to: -21846.05200578905,-21805.38973278905,21855.544965789053,21896.20723878905.

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import OSM from 'ol/source/OSM.js';

var mysource = new ImageWMS
({
  url: 'http://localhost:8080/geoserver/donnees_validees/wms',
  params: {'VERSION': '1.1.0',
             'LAYERS': 'donnees_validees:shp', 
             'SRS': 'EPSG:3857', 
             'FORMAT': 'image/png8',
             'BBOX':'4.713221,45.393568,4.779739,45.423938'
             },
            serverType: 'geoserver',
});

var layerlist = [ myUpperLayer ];
var myview = new View
({
    center: [4.55, 45.4009],
    zoom: 2
});

var map = new Map
({
  layers: layerlist,
  target: 'map',
  view: myview
});

In my case, trying to force the weight and height arguments (which have changed as well) didn't work out.

I can't tell why has my bbox parameter changed but I would like to keep the bounding box with the same SRC I have given in the imageWMS constructor.

Does someone have a clue about that?

Is it the cause of my blank screen?

---

After reviewing answers from Ian Turton♦︎, and Mike, I have put back the good CRS in the Geoserver Interface.

I have also tweaked my code to set up a projection in my view. I tried to set the projection as 'EPSG:4326' in my ImageWMS but it resulted in a suspicious request http://localhost:8080/geoserver/donnees_validees/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&FORMAT=image%2Fpng8&TRANSPARENT=true&LAYERS=donnees_validees%3Ashp&SRS=EPSG%3A4326&STYLES=&FORMAT_OPTIONS=dpi%3A81&WIDTH=1&HEIGHT=1&BBOX=-0.1962464241397277%2C-0.1958811487264987%2C0.19633170085032303%2C0.19669697626355204

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import OSM from 'ol/source/OSM.js';


var myextent =  [4.713221,45.393568,4.779739,45.423938]; //  bbox
var mycenter =[(myextent[0] + myextent[2])/2 ,(myextent[1] + myextent[3])/2]; // center (x;y) 


var mysource = new ImageWMS
({
  url: 'http://localhost:8080/geoserver/donnees_validees/wms',
  params: {
            'VERSION': '1.1.0', 
            'LAYERS': 'donnees_validees:shp'
          },
  serverType: 'geoserver'
});

var myUpperLayer = new ImageLayer
({
  extent: myextent, // REMOVING THIS LINE DID THE TRICK !
  source: mysource
});

var layerlist = [myUpperLayer ];

var myview = new View
({
    projection: 'EPSG:4326',
    center: [4.73, 45.408],
    zoom: 2
});

var map = new Map
({
  layers: layerlist,
  target: 'map',
  view: myview
});

The request is now : http://localhost:8080/geoserver/donnees_validees/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&FORMAT=image/png8&TRANSPARENT=true&LAYERS=donnees_validees:shp&SRS=EPSG:4326&STYLES=&FORMAT_OPTIONS=dpi:81&WIDTH=1&HEIGHT=1&BBOX=4.5501909375,45.212463937500004,4.9427690625,45.605042062500004

I end up with a bbox quite close from the "myextent" variable, which seems fine !

I still have this blank page problem .. Perhaps it's a css problem. Mine is currently embedded into the html page of my app : (edited)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> My title</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css"> -
  </head>
  <body>
    <div id="map" style="height:400px; width:600px;">
    <script src="./index.js"></script>
  </body>
</html>

---

I am now sure the problem is related to the CSS.

I've added this line since :

If I manually enter a "png " request with decent parameters for width and height.. ( http://localhost:8080/geoserver/donnees_validees/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&FORMAT=image%2Fpng8&TRANSPARENT=true&LAYERS=donnees_validees%3Ashp&SRS=EPSG%3A4326&STYLES=&FORMAT_OPTIONS=dpi%3A27&WIDTH=500&HEIGHT=500&BBOX=4.1605425%2C44.822815500000004%2C5.3324175%2C45.994690500000004 ) .. I get a nice image .. But something is going wrong with width and height when I go through OL. (cf commentary)

Answer 1

Your data is in lat/lon (EPSG:4326) not Web mercator(EPSG:3857). Try not to lie to GeoServer about projections as it will believe you and it won't work.