OpenStreetMap with OpenLayers

http://openlayers.org

HTML

<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css">
<div tabindex="700" id="map" class="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// Set up the OSM layer
var myTileServer = new ol.layer.Tile({
  source: new ol.source.OSM({
    crossOrigin: null,
    url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  })
});

// Create the map
var map = new ol.Map({
  layers: [ myTileServer ],
  target: 'map',
  view: new ol.View({
    center: ol.proj.transform([10, 45], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4
  })
});