JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css">
<script src="http://openlayers.org/en/v3.7.0/build/ol.js"></script>
<div id="map"></div>

CSS

#map {
    width: 1024px;
    height: 512px;
    background-color: lightblue;
}

JavaScript

tileSize = 512;

var minX = 0;
var minY = 0;
var maxX = 2048;
var maxY = 1024;

projection = new ol.proj.Projection({
    code: 'ZOOMIFY',
    units: 'pixels',
    extent: [minX, minY, maxX, maxY]
});

projectionExtent = projection.getExtent();

var maxResolution = ol.extent.getWidth(projectionExtent) / tileSize;
window.resolutions = [];
for (var z = 0; z <= 10; z++) {
    resolutions[z] = maxResolution / Math.pow(2, z+1);

}

urlTemplate = 'http://services.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer/tile/{z}/{y}/{x}';

tileLayer = new ol.layer.Tile({
    source: new ol.source.TileImage({
        tileUrlFunction: function(tileCoord, pixelRatio, projection) {
            tileCoordGlobal = tileCoord;

            return urlTemplate
                .replace('{z}', (tileCoord[0]).toString())
                .replace('{x}', (tileCoord[1]).toString())
                .replace('{y}', (((-tileCoord[2])-1)).toString())
            ;
        },
        wrapX: true,
        projection: projection,
        tileGrid: new ol.tilegrid.TileGrid({
            origin: ol.extent.getTopLeft(projectionExtent),
            resolutions: resolutions,
            tileSize: tileSize
        }),
    }),
    extent: projectionExtent		
});

view = new ol.View ({
    projection: projection,
    center: [maxX/2, maxY/2],
    extent: projectionExtent,
    zoom: 0,
    resolutions: resolutions
});

window.map = new ol.Map({
    layers: [tileLayer],
    target: 'map',
    view: view
});

var mousePositionControl = new ol.control.MousePosition({});

map.addControl(mousePositionControl);