Working with Openlayers 3 and Geoserver - cannot see content - openlayers-3

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.