Wrong path when loading WMS layer

Question

I've got an issue I am using GeoServer of boundlessSuite and when I tried to load a layer in OpenLayers 3 it doesn't show on the map. I found the problem but can't fix it.

On my GeoServer when I use the preview to see my layer this is the URL:

http://localhost:8080/geoserver/test1/wms?service=WMS&version=1.1.0&request=GetMap&layers=test1:BoiteOptiqueTest&styles=&bbox=514092.0239487532,1977542.5898263564,522107.6474402136,1981434.1000406644&width=768&height=372&srs=EPSG:32620&format=text%2Fhtml%3B%20subtype%3Dopenlayers

but when I inspect element on Chrome this is what it tries to load:

http://localhost:8080/geoserver/test1/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=test1%3ABoiteOptiqueTest&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=-10018754.171394622%2C2504688.542848654%2C-7514065.628545966%2C5009377.08569731

How can I fix that?

Here is my code:

 var layers = [
 new ol.layer.Tile({
 source: new ol.source.OSM()
 }),
 new ol.layer.Tile({
 extent: [-13884991, 2870341, -7455066, 6338219],
 source: new ol.source.TileWMS({
 url: 'http://localhost:8080/geoserver/test1/wms?',
 params: {'LAYERS': 'test1:BoiteOptiqueTest'},
 serverType: 'geoserver',
 isBaseLayer: false,
 projection: 'EPSG:4326'
 })
 })
 ];
 var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View({
 projection: 'EPSG:4326',
 center: [0, 0],
 zoom: 2
 })
 });

I tried using different projections like EPSG::32620, EPSG::900913 but nothing works.

• Ian Turton: your map projection is wrong
• Hadrien Berthier: yeah I saw that so I tried adding 'EPSG:32620' or 'EPSG:3857' or 'EPSG:4326' to my layer but it still doesn't work what projection should I use and do I haver to change it for my Layer or my Map?

Answer 1

Ok so what was wrong:

My projection for my layer should've been 32620 as it is the projection of my layer,

the extent of my layer shouldn't have been here it causes my layer to fail loading at the right place. so my code works like this:

var layers = [
 new ol.layer.Tile({
 source: new ol.source.OSM()
 }),
 new ol.layer.Tile({
 source: new ol.source.TileWMS({
 url: 'http://localhost:8080/geoserver/test1/wms?',
 params: {'LAYERS': 'test1:BoiteOptiqueTest', 'TILED': true},
 serverType: 'geoserver',
 isBaseLayer: false,
 projection: 'EPSG:32620' //important
 })
 })
 ];
 var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View({
 center: [0, 0],
 zoom: 2
 })
 });