XYZ tiles
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
<body>
<div id="mapDiv"></div>
</body>
CSS
html, body, #mapDiv {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
JavaScript
// Base layer
var base = new ol.layer.Tile({
source: new ol.source.XYZ({
minZoom: 0,
maxZoom: 5,
tileSize: 256,
url: 'http://tileserver.maptiler.com/nasa/{z}/{x}/{y}.jpg'
})
});
// Map layer
var map = new ol.Map({
target: 'mapDiv',
layers: [base],
view: new ol.View({
center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'), // EPSG:4326 -> EPSG:3857
zoom: 0,
minZoom: 0,
maxZoom: 10
})
});