I have a custom map, served by our custom internal map server (XYZ) showing up in OL3. This works perfectly, but now I have to put some vector shapes over the top, these shapes are coming from an SVG. Both the tiles and the shapes which are being overlayed are coming from the same source SVG (map server tiles converted to PNG at various zoom levels).

The issue that I have is that the shapes (now converted to GeoJSON for OL3) are appearing upside down, the Y-Axis is inverted through the centre of the map. I have proven this by manually inverting the shape in gimp (flip through the middle of the image) and it then appears as it should.

Is there a way to get OL3 to do this for me or do I have to code something? Both the extent and the SVG shapes have the bottom left corner as 0,0 - the extent therefore is:

var extent = [0, 0, 8192, 8192];

The projection I am using for OL3 is below:

var projection = new ol.proj.Projection({
    code: 'EPSG:4326',
    units: 'pixels',
    extent: extent

The shape from the SVG (converted to GeoJSON) is:

        "type": "Feature",
        "id": 1006,
        "properties": {
            "extId": "svg6",
            "type": "test shape",
            "name": "svg6",
            "category": "test category"
        "geometry": {
            "type": "Polygon",
            "coordinates": [[[4644.3125,6600.9688],[4643.125,7269.5938],[4577.4688,7270.9688],[4578.6562,7990],[5740.5625,7990],[5740.5625,8177.9062],[6298.625,8179.2812],[6298.625,7833.375],[6055.9375,7834.75],[6057.125,6609.125],[4644.3125,6600.9688]]]

Hope that makes sense, let me know if anyone needs any more info...

  • Are your Y values increasing from bottom to top or from top to bottom?
    – ahocevar
    Dec 12, 2014 at 8:53

1 Answer 1


Ok, so I had to write some code to flip the points along the y axis. I had to half of the image height, then find the difference of the y point to that middle (can be negative). I multiplied the difference by 2 and subtracted the result from the middle y value (e.g. if the SVG / underlying map tile image was 5000 pixels tall then the middle would of course be 2500). The result was an image flipped along the middle of the y axis and everything lining up perfectly :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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