JSFiddle - React, Tailwind, and code Playground

by Kesavamoorthi Subramanian

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.19.0/css/ol.css">
<script src="https://openlayers.org/en/v3.15.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v3.15.1/css/ol.css">
<div id="map" class="map"></div>

CSS

#map
{
  width: 600px;
  height: 600px;
  background-color: #000;
}

JavaScript

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

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

var mouseWheelZoomInteraction = new ol.interaction.MouseWheelZoom({
  useAnchor: false
});

var map = new ol.Map({
  layers: [vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 20,
    minZoom: 15,
    maxZoom: 24,
    resolution: 0.2,
    minResolution: 0.00625,
    maxResolution: 3.2
  })
});

map.getInteractions().extend([mouseWheelZoomInteraction]);

var circle = new ol.Feature({
  geometry: new ol.geom.Point([0, 0])
});

source.addFeature(circle);

function styleFn(feature, resolution)
{
	var svgImg = new Image();
  svgImg.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="28" version="1.1"><style type="text/css"><![CDATA[@keyframes moveTrackPlate1 {0% {y:-3.25;} 100% {y:-2.1;}}@keyframes moveTrackPlate2 {0% {y:-2.1;} 100% {y:-0.9500000000000002;}}@keyframes moveTrackPlate3 {0% {y:-0.9500000000000002;} 100% {y:0.19999999999999973;}}@keyframes moveTrackPlate4 {0% {y:0.19999999999999973;} 100% {y:1.3499999999999996;}}@keyframes moveTrackPlate5 {0% {y:1.3499999999999996;} 100% {y:2.4999999999999996;}}@keyframes moveTrackPlate6 {0% {y:2.4999999999999996;} 100% {y:3.6499999999999995;}}@keyframes moveTrackPlate7 {0% {y:3.6499999999999995;} 100% {y:4.799999999999999;}}@keyframes blinkJack {0% {stroke-opacity:1;} 50% {stroke-opacity:0.3;} 100% {stroke-opacity:1;}}rect.track.moving,circle.jack.in-progress {animation-timing-function:linear; animation-iteration-count:infinite;}rect.track.moving {animation-duration:1.5s; animation-direction:reverse;}rect.track.plate-1.moving {animation-name:moveTrackPlate1;}rect.track.plate-2.moving {animation-name:moveTrackPlate2;}rect.track.plate-3.moving {animation-name:moveTrackPlate3;}rect.track.plate-4.moving {animation-name:moveTrackPlate4;}rect.track.plate-5.moving {animation-name:moveTrackPlate5;}rect.track.plate-6.moving...