JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="mapl" style="height: 250px; width:250px; border: 1px solid red;"></div>
<div id="mapo" style="height: 250px; width:250px; border: 1px solid red;"></div>

JavaScript

var mapl = L.map('mapl', {
    crs: L.CRS.Simple,
    attributionControl: false
});

mapl.setMaxBounds(new L.LatLngBounds([0,691], [541,0]));

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'

L.imageOverlay(imageUrl, new L.LatLngBounds([0,691], [541,0]), { noWrap: true, maxZoom: 3, minZoom: 0}).addTo(mapl);

mapl.setView(new L.LatLng(691/2, 541/2), 0);

mapo = new OpenLayers.Map('mapo', {
    restrictedExtent: new OpenLayers.Bounds(0, 0, 691, 541),
    numZoomLevels: 3,
    units: 'pixels'
});

var graphic = new OpenLayers.Layer.Image(
    'Test',
    imageUrl,
    new OpenLayers.Bounds(0, 0, 691, 541),
    new OpenLayers.Size(250, 195),
    {isBaseLayer: true}
);

mapo.addLayers([graphic]);
mapo.zoomToMaxExtent();