OpenLayers Overlays Only Example
http://openlayers.org/dev/examples/all-overlays.html
Note: Not sure why this doesn't work. Maybe external URL.
HTML
<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<div id="map"></div>
CSS
body {
font-family: sans-serif;
padding: 5px;
margin: 0;
}
#map {
width: 1000px;
height: 600px;
float: left;
margin: 0 15px 0 0 !important;
}
JavaScript
var myLayer = new OpenLayers.Layer.XYZ('My Map Layer',
['https://api.mapbox.com/styles/v1/mapbox/streets-v8/tiles/${z}/${x}/${y}?access_token=pk.eyJ1Ijoic3RldmVtYXNoYSIsImEiOiJjaW5zcmcwdGMwMGw5dnNrbDFhcHRiMzlpIn0.nx8V3jDtK_eGt2UzTWnjAw'], {
sphericalMercator: true,
wrapDateLine: true
});
var map = new OpenLayers.Map({
div: 'map',
layers: [myLayer],
center: [0, 0],
zoom: 4
});