Working with Openlayers 3 and Geoserver - cannot see content

Question

I am trying to display two layers using Openlayers 3, one is a map of Greenland, and the other one is an area of interest. Both layers are tiled.

It seems to be working, but all I get are transparent tiles, so somehow I am placing the view in an area where there is nothing. I am using a UTM 24 N projection (which is the original projection of the layers involved, so no transformation is needed).

Here is my code:

var utm24_projection = new ol.proj.Projection({
      code: 'EPSG:32624',
      extent: [-396882, 6394710, 1280839.6, 9750153.2], 
      units: 'm',
      axisOrientation: 'neu'
 });

 ol.proj.addProjection(utm24_projection);


 layer1 = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: 'http://www.ourmapserver.gl/geoserver/wms',
        params: {'LAYERS': 'ourcompany:greenland', 'TILED': true},
        serverType: 'geoserver',
      })
    });

  layer2 =  new ol.layer.Tile({
      //extent: [-13884991, 2870341, -7455066, 6338219],
      source: new ol.source.TileWMS({
        url: 'http://www.ourmapserver.gl/geoserver/wms',
        params: {'LAYERS': 'ourcompany:interestarea', 'TILED': true},
        //projection = ol.proj.get('EPSG:32624');
        serverType: 'geoserver'
      })
    });

  var layers = [
    layer1,
    layer2
  ];
  var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
      projection: utm24_projection,
      center: [-48864, 7491452],
      zoom: 4
    })  
  });

It worked fine when using Web Mercator.

Answer 1

So I have found a solution.

First of all, I removed the extent from my projection:

  var utm24_projection = new ol.proj.Projection({
      code: 'EPSG:32624',
      units: 'm',
      axisOrientation: 'neu'
  });

Then when defining the view, I only configure the projection, but no center or zoom.

Finally, I adjust the view to the map size and bounds:

map.getView().fit(bounds, map.getSize());

The map is being displayed correctly.