OpenStreetMap with OpenLayers

http://openlayers.org

by giuseppe straziota

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

var myTileServer = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    URL: 'https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv',
    LAYERS: 'gebco_latest', 
    crossOrigin: null,
    VERSION: '1.1.1',
    FORMAT: 'image/jpeg' 
  })
});

// Create the map
map = new ol.Map({ 
  target: 'map'
}); 

view = new ol.View({
    projection: 'EPSG:4326',
    center: [-1.81185, 52.44314],
    zoom: 5
  });
  
map.addLayer(myTileServer);
map.setView(view);