Direction of the Y axis in OpenLayers

Question

A have an openlayers map with with two layers: a Tiled image layer (served through zoomify protocol) and a Vector layer. I draw boxes/rectangles on the image then get their geojson coordinates and save them in my DB.

After upgrading from OpenLayers 2 to 3 on my site, all my rectangular features are displayed in the wrong place. It turns out that with my OL2 implementation the Y axis is centered at the bottom of the map and points upward whereas in my OL 3 implementation the Y axis is centered at the top of the map and also points upward.

For backward compatibility reasons I don't want to update the coordinates in the DB. So I want the existing coordinates to show in the right place in my OL 3 image viewer.

How should I define the layers/views/map in OL3 to centre the Y axis of my features at the bottom of the image?

I've tried to reproduce the issue here:

https://jsfiddle.net/zjee9sdw/

You'll see that the box appears above the image. I want this box to appear in the bottom left corner of the image without changing it's input coordinates (or transforming them).

Answer 1

The Zoomify source in OpenLayers 3 has indeed a different coordinate system than in OpenLayers 2. However, both coordinate systems do not make much sense. Ideally, the origin would be in the top left corner, and y coordinates would increase from top to bottom.

For now, all you can do is configure OpenLayers 3 to do an automatic transform of your coordinates. The following projection definition will do the trick:

var proj = new ol.proj.Projection({code: 'ZOOMIFY'});
ol.proj.addProjection(proj);
ol.proj.addCoordinateTransforms('EPSG:4326', proj,
    function(coord) {
      return [coord[0], -options.image_height + coord[1]];
    } /*, inverse transform here */);

To apply this transform, you also have to change the line that reads the features:

var features = (new ol.format.GeoJSON()).readFeatures(geojsonObject,
    {featureProjection: proj});

Note that this will not be necessary when you configure your vector source with a url.

Updated JSFiddle: https://jsfiddle.net/zjee9sdw/2/