OpenLayers setting position of overlay on a static image - openlayers-3

Question

I have created a map with OpenLayers 3 using static image. It uses fake projection so the map can use to properly display the layer as it's measured in pixels. This is the code:
var pixelProjection = new ol.proj.Projection({
code: 'pixel',
units: 'pixels',
extent: [0, 0, 1389, 1070]
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://s25.postimg.org/4o15oqbmn/jdgf.jpg',
imageSize: [1389, 1070],
projection: pixelProjection,
imageExtent: pixelProjection.getExtent()
})
})
],
target: 'map',
view: new ol.View2D({
projection: pixelProjection,
center: ol.extent.getCenter(pixelProjection.getExtent()),
zoom: 2
})
});
I was trying to add marker overlays to add some more interactions however I'm struggling to specify position and the markers is outside the map rather then inside where I want to place it.
var marker = new ol.Overlay({
position: [200, 200],
element: document.getElementById('marker'),
stopEvent: false
});
I'm very novice to this so if anyone have an idea how to set position correctly I will be thankful.

Answer 1

Using this OpenLayers 3 map as an example, I was able to add a marker to the center of your static image with the following:
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([700, 700])
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
src: 'http://ol3js.org/en/master/examples/data/icon.png'
})
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});