JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/3.6.0/ol-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/3.6.0/ol-debug.css">
<body>
<div id="map">
</div>
</body>

JavaScript

// ########## INIT
/* Map interactions settings */
var controls = ol.control.defaults({
    zoom: false,
    logo: false,
    rotate: false
}).extend([
    new ol.control.ScaleLine({units: 'metric'})
    ]);

var interactions = ol.interaction.defaults({
    doubleClickZoom: false, rotate: false
});

/* Creation of the map */
var map = new ol.Map({
    controls: controls,
    interactions: interactions,
    renderer: 'canvas',
    layers: [new ol.layer.Tile({
        source: new ol.source.OSM({
            attributions: [ ol.source.OSM.ATTRIBUTION ]
        })
    })],
    target: 'map',
    view: new ol.View({
    center: [-600000, 4320000],
    zoom: 1,
    maxZoom: 13, // max zoomlevel the user can zoom to */
    maxResolution: 156543.03390625 // set resolution for zoomlevel 0 (see OSM resolutions list) */
})
});
var view = map.getView();
var toMapProjection = ol.proj.getTransform("EPSG:4326", view.getProjection());

/* @brief Transforms coordinates to current projection in case of 2D input. */
var to3DPositionsWrapper = function(input, output, dimension){
    var linput=[0,0];
    linput[0]=input[0];
    linput[1]=input[1];
    return(toMapProjection(linput));
}

// ########## !INIT


var markers = new ol.source.Vector({features: []});
var geojson_format = new ol.format.GeoJSON();

var COLORS = {
    'cur' : 'blue',
    'fr'  : 'blue',
    'en'  : 'red'
};

var STYLE_ON = new ol.style.Style({
    image: new ol.style.Icon({
        src: "http://images.easyfreeclipart.com/1067/double-up-arrow-1067454.jpg" // not the actual arrow we use: ours is 30*30, 1.9kio
    })
});
var STYLE_OFF = new ol.style.Style({
    image: new ol.style.Icon({
        src: "http://images.easyfreeclipart.com/1067/double-up-arrow-1067454.jpg" // actually a greyed image of the same arrow
    })
});

$(document).ready(function() {
    map.addLayer(new ol.layer.Vector({
        type: 'markers',
        source: markers,
        style: function (feature) {
            var style = null;
       ...