Openlayers - ol.source.Zoomify based layer is not displayed on top of another layer - openlayers-3

Question

I have 2 images of different sizes (but tile size is the same). Images correspond to each other and I want to display them one on another the way that second image is upscaled to correspond first one.
I use ol.source.Zoomify source for both of them and projections with transformations. But I even can't get second image displaying.
See the the sample http://jsfiddle.net/sk5cLj4n/37/.
const imWidth = 31871;
const imHeight = 17770;
const imWidthSmall = 19122.6;
const imHeightSmall = 10662;
// Primary image projection
const primaryImageProjection = new ol.proj.Projection({
code: 'PIXELS',
units: 'pixels',
extent: [0,0, imWidth, imHeight],
getPointResolution: function (resolution, point) { return resolution; }
});
ol.proj.addProjection(primaryImageProjection);
// Overlay image projection
const overlayProjection = new ol.proj.Projection({
code: 'OVERLAY',
units: 'pixels',
extent: [0,0, imWidth, imHeight],
getPointResolution: function (resolution, point) { return resolution; }
});
ol.proj.addProjection(overlayProjection);
// Transformations of projections
function TransformOverlayToPixel(coordinate) {
console.log('TransformOverlayToPixel');
return [
(coordinate[0]),
(coordinate[1])
];
}
function TransformPixelToOverlay(coordinate) {
console.log('TransformPixelToOverlay');
return [
(coordinate[0]),
(coordinate[1])
];
}
ol.proj.addCoordinateTransforms('PIXELS', overlayProjection,
TransformPixelToOverlay,
TransformOverlayToPixel);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
opacity: 0.8,
source: new ol.source.Zoomify({
size: [imWidth, imHeight], // temp
url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/primary/",
projection: 'PIXELS'
})
}),
new ol.layer.Tile({
opacity: 0.8,
source: new ol.source.Zoomify({
size: [imWidth, imHeight], // temp
url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/overlay/",
projection: 'OVERLAY'
})
})
],
target: 'map',
renderer: "canvas",
view: new ol.View({
projection: 'PIXELS',
center: [imWidth / 2, imHeight / 2],
zoom: 0
})
});
Short explanation of the fiddle:
tiles with blue borders are for primary layer
tiles with black borders are for secondary layer (overlay)
only 3 zoom levels are available for zooming
currently projections transformation does nothing. That's just for simplification. There should be a mupliplication to stretch second image.

Answer 1

Here how it's solved
http://jsfiddle.net/sk5cLj4n/41/
const imWidth = 31871;
const imHeight = 17770;
const imWidthSmall = 19122.6;
const imHeightSmall = 10662;
const koef = imWidth / imWidthSmall;
// Primary image projection
const primaryImageProjection = new ol.proj.Projection({
code: 'PIXELS',
units: 'pixels',
extent: [0, -imHeight, imWidth, 0],
getPointResolution: function (resolution, point) { return resolution; }
});
ol.proj.addProjection(primaryImageProjection);
// Overlay image projection
const overlayProjection = new ol.proj.Projection({
code: 'OVERLAY',
units: 'pixels',
extent: [0,-imHeight, imWidth, 0],
getPointResolution: function (resolution, point) { return resolution; }
});
ol.proj.addProjection(overlayProjection);
// Transformations of projections
function TransformOverlayToPixel(coordinate) {
console.log('TransformOverlayToPixel');
return [
(coordinate[0]) * koef,
(coordinate[1]) * koef
];
}
function TransformPixelToOverlay(coordinate) {
console.log('TransformPixelToOverlay');
return [
(coordinate[0]) / koef,
(coordinate[1]) / koef
];
}
ol.proj.addCoordinateTransforms('PIXELS', overlayProjection,
TransformPixelToOverlay,
TransformOverlayToPixel);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
opacity: 0.8,
source: new ol.source.Zoomify({
size: [imWidth, imHeight], // temp
url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/primary/",
projection: 'PIXELS'
})
}),
new ol.layer.Tile({
opacity: 0.8,
source: new ol.source.Zoomify({
size: [imWidth, imHeight], // temp
url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/overlay/",
projection: 'OVERLAY'
})
})
],
target: 'map',
renderer: "canvas",
view: new ol.View({
projection: 'PIXELS',
center: [imWidth / 2, imHeight / 2],
zoom: 0
})
});
See how extent is specified. And also coefficient should be set properly to make images matching each other.