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

Question

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

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

I create a map and add an image layer as shown 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 displays an image on top of the card, but it is not installed properly.

A static image displayed above the building but not placed correctly.

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

Based on this: