JSFiddle - React, Tailwind, and code Playground

by wsgrah

HTML

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

JavaScript

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
            })
          ],
          view: new ol.View({
            center: [0, 0],
            zoom: 2
    })
});

// Flag indicating whether the postcompose listener should
        // draw the "mask" on the map.
        var drawMask = false;

        // Create a drag box interaction that sets drawMask to true
        // on "boxstart" and sets drawMask to false on "boxend".
        var boxInteraction = new ol.interaction.DragBox({
          condition: ol.events.condition.shiftKeyOnly,
          style: new ol.style.Style({})
        });
        boxInteraction.on('boxstart', function() {
          drawMask = true;
        });
        boxInteraction.on('boxend', function() {
          drawMask = false;
        });
        map.addInteraction(boxInteraction);

        // Add a "postcompose" listener that draws on mask on the map
        // when drawMask is true.
        map.on('postcompose', function(evt) {
          if (!drawMask) {
            return;
          }
          var ctx = evt.context;
          var size = map.getSize();
          var height = size[1] * ol.has.DEVICE_PIXEL_RATIO;
          var width = size[0] * ol.has.DEVICE_PIXEL_RATIO;
          var polygon = boxInteraction.getGeometry();
          var coordinates = polygon.getCoordinates()[0];
          var bl, br, tr, tl;
          bl = map.getPixelFromCoordinate(coordinates[0]);
          tl = map.getPixelFromCoordinate(coordinates[1]);
          tr = map.getPixelFromCoordinate(coordinates[2]);
          br = map.getPixelFromCoordinate(coordinates[3]);
          ctx.beginPath();
          // Outside polygon, must be clockwise
          ctx.moveTo(0, 0);
          ctx.lineTo(width, 0);
          ctx.lineTo(width, height);
          ctx.lineTo(0, height);
          ctx.lineTo(0, 0);
          ctx.closePath();
          // Inner polygon, must be counter-clockwise
         ...