JSFiddle - React, Tailwind, and code Playground

by flytrap

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css">
    <div id="map" class="map"></div>

CSS

body{
    background-color:black;
}

JavaScript

var imgURL = 'http://i.stack.imgur.com/9C8Xu.png';
var extent = [0,0,488,198];

var projection = new ol.proj.Projection({
  units: 'pixels',
  extent: extent
});

 //A polygon that will represent a white background 
var polyFeature = new ol.Feature({
    geometry: new ol.geom.Polygon([
        [
            [0, extent[1]], 
            [0, extent[3]], 
            [extent[2], extent[3]], 
            [extent[2], extent[1]] 
        ]
    ])
});

//A base layer to hold the polygon feature
var baseLayer = new ol.layer.Image({
                    source: new ol.source.ImageVector({
                                    source: new ol.source.Vector({
                                    features: [polyFeature]
                                }),
                    style: new ol.style.Style({
                                    fill: new ol.style.Fill({color: 'white'})
                                })
                    })
                });

var docLayer = new ol.layer.Image({
                      source: new ol.source.ImageStatic({
                      url: imgURL,
                      imageExtent: extent
                  })});
  
// build the map
var map = new ol.Map({
  layers:[baseLayer,docLayer],
  target: 'map',
  view: new ol.View({
    projection: projection,
    center:  ol.extent.getCenter(extent),
    zoom: 2.5
  })
});