JSFiddle - React, Tailwind, and code Playground

by Paul

HTML

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css">
<div style="overflow: auto">
    <div class="button" onclick="createPolygons()">Create polygons by mask</div>
    <div class="button" onclick="removePolygons()">Remove polygons</div>
</div>
<div id="map"></div>

CSS

.button {
    padding: 4px;
    margin: 4px;
    border: 1px solid black;
    float: left;
}

.button:hover {
    background-color: blue;
    color: white;
    cursor: pointer
}

#map {
  width: 550px;
  height: 300px;
}

.magic-wand-loading {
    cursor: progress !important
}

.magic-wand-add {
    cursor: copy !important
}

Babel + JSX

//import BaseObject from 'ol/Object';
/* import('')
  .then((module) => {
 */
let osm = new ol.layer.Tile({
    source: new ol.source.OSM(),
    zIndex: 1
});

let wms = new ol.layer.Image({
    extent: [-13884991, 2870341, -7455066, 6338219],
    source: new ol.source.ImageWMS({
        url: 'https://ahocevar.com/geoserver/wms',
        params: { 'LAYERS': 'topp:states' },
        ratio: 1,
        serverType: 'geoserver',
        crossOrigin: 'anonymous'
    }),
    zIndex: 2
});

let source = new ol.source.Vector({ wrapX: false });
let vec = new ol.layer.Vector({
    source: source,
    zIndex: 3
});

let map = new ol.Map({
  target: 'map',
  //interactions: defaultInteractions().extend([wand]),
  layers: [osm, vec, wms],
  view: new ol.View({
    center: ol.proj.fromLonLat([-85, 25]),
    zoom: 2
  })
});

/* let wand = new MagicWandInteraction({ 
  layers: [osm, vec], 
  hatchLength: 4, 
  hatchTimeout: 300, 
  waitClass: 'magic-wand-loading', 
  addClass: 'magic-wand-add' 
}); */

//});

createPolygons = function() {
    var contours = mask.tile.getContours();
    if (!contours) return;

    vector.clear();
    var rings = [];
    for (var i = 0, len = contours.length; i < len; ++i) {
        pixels = contours[i].points;
        var points = [];
        for (var j = 0, plen = pixels.length; j < plen; ++j) {
            point = getLonLatFromWorldViewPortPx(new ol.Pixel(pixels[j].x, pixels[j].y));
            points.push(new ol.geom.Point(point.lon, point.lat));
        }
        rings.push(new ol.geom.LinearRing(points))
    }
    source.addFeatures(new ol.feature.Vector(new ol.geom.Polygon(rings)));
    mask.tile.clearImage();
};

removePolygons = function() {
    source.clear();
};