mapbox_openlayers.html

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'https://api.mapbox.com/styles/v1/nmerm/cjb6kd9f02omm2sl6m5y24f17/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibm1lcm0iLCJhIjoiY2piNmVjdmFsOHFrNDJ3bnE1ajJ0Ymg3ZiJ9.UYhpPkbczYcIiwybM9KArA'
                })
            })
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
</script>
</body>
</html>