Example
<html>
<head>
<title>Getting started</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var baseLayer= new ol.layer.Tile({ //a Tile layer is a the background layer for the map
// here we choose an OpenStreetMap base layer
source: new ol.source.OSM({
url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});
var map = new ol.Map({ // we create our map
layers: [baseLayer], // and add the layers to it ( in our case we only have one)
target: 'map', // the div element that will serve as a map
controls: ol.control.defaults({ // we leave the map controls to default
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({ // we define the initial view of the map
center: ol.proj.fromLonLat([0, 0]), //the default projection is the spherical mercator (meter units) so we get coordinates of the center by degrees
zoom: 2 // the initial zoom level
})
});
</script>
</body>
</html>
