JSFiddle - React, Tailwind, and code Playground

by Pavlos Tsagkis

HTML

<script src="http://openlayers.org/en/v4.0.1/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v4.0.1/css/ol.css">
<div id="map" class="map"></div>
<div id="marker" title="Marker"></div>

CSS

#marker {
  width: 365px;
  height: 360px;
  background: url("https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif") no-repeat scroll 0% 0% transparent;
}

JavaScript

var layer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [layer],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([23.3725, 45.208889]),
    zoom: 4
  })
});
//this the postion of your marker
var pos = ol.proj.fromLonLat([20.3725, 50.208889]);

var marker = new ol.Overlay({
  position: pos,
  positioning: 'center-center',
  element: document.getElementById('marker'),
  stopEvent: false
});
map.addOverlay(marker);