How to position a static image overlay on top of OpenLayers 3 Map

Question

I am using OpenLayers 3 to display indoor maps in an Angular/Ionic mobile app. The maps are static images that I am placing on top of the OpenLayers map.

I am creating the map and adding the image layer like below.

var extent = ol.proj.transformExtent([-79.180360, 37.351251, -79.179148, 37.349640], 'EPSG:4326', 'EPSG:3857');

var layer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var view = new ol.View({
    center: ol.extent.getCenter(extent),
    zoom: 18,
    rotation: 0
});


// Setting the Overlay Image
var image = new ol.layer.Image({
    source: new ol.sourceImageStatic({
        url: 'http://www.exampleimageurl.png'
        imageExtent: extent
    })
});

var map = new ol.Map({
    target: 'indoor-map',
    layers: [layer, image],
    view: view
});

The above code does display an image on top of the map, but it isn't positioned properly.

Static image displayed over building, but not placed properly.

I am working on the assumption that in OpenLayers, we need to set the extent that will contain the image and thus determine the position of the image on the map.

Based on this:

1. How do we determine the true extent for the image, if we have the coordinates for the 4 corners of the image?

2. How do we get the building floor map to actually lay over the building.

The building is actually rotated to the left. See the Google Map screenshot.

Screenshot of Google Map showing orientation of the map.

Sales

You should correctly transform the image before you load it in OL. GDAL may be of help for this task. gdal.org/gdaltransform.html If you can provide me with the image I might be able to transform it for you and show you how to do it with GDAL. – Zebulen

Answer 1

You need to georeference your image before overlaying it on top of any base map (OSM etc.). You could use QGIS (that actually uses the GDAL plugin) which has a nice graphical environment.

You can also find a fairly good tutorial here

The georeferenced image will be rotated and there will be a black (or white) space because of that, but since it is a PNG that has an alpha channel (transparency) you can delete it.

Mistrot