Using an OpenLayers map in CryEngine3 with Coherent UI

map.js

var map;
var myMarker;

function InitializeMap()
{
	map = new OpenLayers.Map('map');
	
	var graphic = new OpenLayers.Layer.Image(
		'Forest',
		'img/Forest.jpg',
		// Approximate bounds of the region in Forest.jpg found by trial and error
		new OpenLayers.Bounds(6, -1240, 1024, -200),
		new OpenLayers.Size(2048, 2048),
		{numZoomLevels: 4}
	);

	map.addLayer(graphic);
	
	var markers = new OpenLayers.Layer.Markers( "Markers" );
	map.addLayer(markers);
	
	// Some decent default coordinates around the spawn location
	myMarker = new OpenLayers.Marker(new OpenLayers.LonLat(350,-850));
	markers.addMarker(myMarker);
	
	// Bind engine methods
	engine.on('SetPlayerPositionOnMap', function (x, y) {
		// Convert the CryEngine coordinates to OpenLayers coordinates
		MoveMarker(y, -x);
	});
	
	engine.on('SetPlayerRotationOnMap', function (deg) {
		SetMarkerRotation(deg);
	});
	
	engine.on('ShowMap', function (show) {
		ShowMap(show);
	});
}

function MoveMarker(lon, lat){
	var newPx = map.getLayerPxFromViewPortPx(
					map.getPixelFromLonLat(
						new OpenLayers.LonLat(lon, lat)
							.transform(map.displayProjection, map.projection)
					)
				);
	myMarker.moveTo(newPx);
}

function SetMarkerRotation(deg)
{
	myMarker.icon.imageDiv.style.webkitTransform = "rotate(" + deg + "deg)";
}

function ShowMap(show)
{
	$("#map").css("display", show ? "block" : "none");
}