JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/en/v3.4.0/build/ol-debug.js"></script>
<h2>My Map</h2>
<div id="map" class="map"></div>

CSS

#map {
    height: 400px;
    width: 100%;
    background-color: #37CACC;}

JavaScript

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

var wkt = new ol.format.WKT(),
    vectorLayer,
    source,
    features = [],
    feature,
    markers;

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

$.ajax('test.xml').then(function(response) {
    var markers = response.getElementsByTagName('marker');
    for (var i = 0; i < markers.length; i++) {
        feature=wkt.readFeature(markers[i].attributes.geometry.nodeValue);
        features.push(feature);
    }
    source = new ol.source.Vector({
        features: features
    });
    vectorLayer = new ol.layer.Vector({
        source: source
    });
    map.addLayer(vectorLayer);    
});