JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<div id="map"></div>
CSS
#map{
position:absolute;
top:5px;
left:5px;
bottom:5px;
right:5px;
background-color:#fff;
}
JavaScript
var boundaries = new OpenLayers.Bounds(8.098224, 45.772682, 17.74378, 49.478924),
spherical = new OpenLayers.Projection("EPSG:900913"),
geographical = new OpenLayers.Projection("EPSG:4326"),
lat = 47.5,
lon = 13,
zoom = 7;
var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508),
restrictedExtent = maxExtent.clone(),
maxResolution = 156543.0339;
var options = {
projection: spherical,
displayProjection: geographical,
units: "m",
numZoomLevels: 21,
maxResolution: maxResolution,
maxExtent: maxExtent,
restrictedExtent: restrictedExtent
};
var map = new OpenLayers.Map('map', options);
var mqm = new OpenLayers.Layer.OSM("MapQuest Map", [
"http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
], {
attribution: "Tiles Courtesy of <a href='http://open.mapquest.co.uk/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
transitionEffect: "resize",
identifier: "mqm"
});
var imgLayer = new OpenLayers.Layer.Image("Data", "http://farm1.staticflickr.com/49/120077777_84f8d4dd8e.jpg", boundaries.transform(geographical, spherical), new OpenLayers.Size(961, 550), {
isBaseLayer: false,
alwaysInRange: true,
opacity: 0.7,
transitionEffect: "resize"
});
map.addLayers([mqm, imgLayer]);
var center = new OpenLayers.LonLat();
center.lon = lon;
center.lat = lat;
map.addControl(new OpenLayers.Control.ScaleLine({
geodesic: true
}));
map.setCenter(center.transform(geographical, spherical), zoom);