Need help figuring out how to make a vector overlay for a zoomified image using OL3.

Am updating a project from OL2, where what I'm attempting worked fine. Project isn't true map data, the zoomify layer is a scanned document, converted to zoom tiles.

Polygons represent the coordinates of terms/phrases in text found in the OCR text.

This fiddle shows a page with highlighting for 3 hits on the term "texas". Note the position of the terms is correct on one axis, but simply too high on the screen.

I'm sure this is easy, but I'm at a loss as to the problem (if it has to do with extents or projections, or how I'm centering the layer, etc.)


I had same problem. Utilizing mouse position control (ol.control.MousePosition), vector layers has bottom-left origin and Zoomify layer has top-left, so Zoomify layer has negative Y coordinates.

In OpenLayers 3 debug source in method:

ol.source.Zoomify = function(opt_options) {...}

change "extent" variable from:

var extent = [0, -size[1], size[0], 0];


var extent = [0, 0, size[0], size[1]];

I'm sure there is a better solution than changing library source, but it works for me at this time.


Old question, but I had this problem today. For others that might stumble upon this question, the simplest way is to invert the Y-coordinates in the ol.format.GeoJSON class. E.g. if loading it from a XHR then change a feed that looked like this:

"geometry": {
   "type": "Polygon",
   "coordinates": [[[1000,500],[1200,500],[1200,700],[1000,700]]]


"geometry": {
   "type": "Polygon",
   "coordinates": [[[1000,-500],[1200,-500],[1200,-700],[1000,-700]]]

This is due to the fact that Zoomify negates the height values as discussed above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.