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 mapLat = 12.500502;
var mapLng = 41.890401;
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', 
  
    params:{
        LAYERS: 'gebco_latest',  
        VERSION: '1.1.1',
        FORMAT: 'image/jpeg' 
    }
   
  })
});

var myTileServer2 = new ol.layer.Tile({
  source: new ol.source.TileWMS({ 
   url:'http://ows.terrestris.de/osm/service',
    params:{
        LAYERS: 'OSM-WMS',  
        VERSION: '1.1.1',
        FORMAT: 'image/jpeg' 
    }
   
  })
});

var view = new ol.View({
    projection: 'EPSG:4326',
    center: [mapLat, mapLng],
    zoom: 7
  });
  
// Create the map
var map = new ol.Map({ 
  target: 'map' 
}); 

function add_map_point(lat, lng, fromPrj, toPrj) {
  var vectorLayer = new ol.layer.Vector({
  source:new ol.source.Vector({
  features: [new ol.Feature({
  geometry: new ol.geom.Point(
  //[lng, lat])
   	ol.proj.transform([parseFloat(lng), parseFloat(lat)], 
   	              fromPrj, 
   	              toPrj)
   	              ) 
  })]
  }),
  style: new ol.style.Style({
  image: new ol.style.Icon({
  anchor: [0.5, 0.5],
   anchorXUnits: "fraction",
  anchorYUnits: "fraction", 
  src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
  })
  })
  });
	map.addLayer(vectorLayer);
}
 
map.addLayer(myTileServer2);
//map.addLayer(myTileServer2);
map.setView(view);
//x 1391549.51
//y 5144576.17
//add_map_point( mapLng, mapLat , 'EPSG:4326' , ' EPSG:4326' );
// [parseFloat(lng), parseFloat(lat)]
add_map_point( 5144576.17, 1391549.51,  'EPSG:3857' , 'EPSG:4326' );