<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<div class="container">
<div class="row">
<div id="map">
<!-- Your map will be shown inside this div-->
</div>
</div>
</div>
#map{
width:100%;
height:600px;
}
var baseMapLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
target: 'map',
layers: [ baseMapLayer],
view: new ol.View({
center: ol.proj.fromLonLat([-1.249,52.034]),
zoom: 7 //Initial Zoom Level
})
});
//Adding a marker on the map
var marker = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([0.520,51.384])
), // Cordinates of New York's Town Hall
});
var vectorSource = new ol.source.Vector({
features: [marker]
});
marker.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
crossOrigin: 'anonymous',
src: 'https://raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker.png'
}))
}));
var markerVectorLayer = new ol.layer.Vector({
source: vectorSource,
});
map.addLayer(markerVectorLayer);
