Through the example provided by the examples section of the OpenLayers website I was able to replicate the overlay method of an image. But when I try to add a different raster, now present in the filesystem, I can not get the same result. The format of the raster is in PNG.

I'm trying to do something like this: openaerialmap.org. Where I can overlay my own aerial images above a map (in example is OSM, but I will use Bing Maps in the beggining).

Other similar questions that did not help me:

  1. Using Custom Aerial Raster Imagery with OpenLayers 3 or 4
  2. Raster overlay in OpenLayers
  3. OpenLayers 4 adding a georeferenced image
  4. How to define layer order in Openlayers?

I'm using OpenLayers v5.3

JS code:

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer.js';
import {transform} from 'ol/proj.js';
import Static from 'ol/source/ImageStatic.js';
import OSM from 'ol/source/OSM.js';
import {register} from 'ol/proj/proj4.js';
import proj4 from 'proj4';

var imageExtent = [591338.2230843633878976, -3835585.6850060112774372, 591735.8523469158681110, -3834804.7757325535640121];

var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    new ImageLayer({
      source: new Static({
        url: "/img/test.png",
        crossOrigin: '',
        projection: 'EPSG:32655',
        imageExtent: imageExtent,
        imageSize: [7953,15619]
  target: 'map',
  view: new View({
    center: [-10997148, 4569099],
    zoom: 4

Extent from raster was extracted from QGIS

The console shows no error and the image seems to load, but I can't find antwhere in the map.

  • If you center the view on one of the image corners (center: [ 591338, -3835585 ] in the view definition) do you see the image? If not, try switching coordinates - i always get coordinate order wrong, because it differs between GIS frameworks). Can you access the image file directly in a browser (via the URL http(s)://<yourserver, or localhost>/img/test.png)
    – til_b
    Commented Jan 14, 2019 at 14:08

1 Answer 1


You need to define the projection

  proj4.defs('EPSG:32655', '+proj=utm +zone=55 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ');

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.