JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://openlayers.org/en/latest/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/latest/css/ol.css">
<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
</div>

JavaScript

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

var source = new ol.source.Vector();

  var style = new ol.style.Style({
      image: new ol.style.Icon(({
                     opacity: 1,
                     size:20,
                     src: 'https://i.imgsafe.org/73d1273.png'
                     })),
      stroke: new ol.style.Stroke({
      color: 'black',
      width: 5,
      lineDash: [10],
     })
     });


var vector = new ol.layer.Vector({
  source: source,
  style: style
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 4
  })
});

map.addInteraction(new ol.interaction.Draw({
  source: source,
  type: 'LineString'
}));