JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<script src="https://cdn.rawgit.com/Tamersoul/magic-wand-js/master/jsfiddle/OpenLayers.debug.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Tamersoul/magic-wand-js/master/jsfiddle/theme/default/style.css">
<script src="https://rawgit.com/Tamersoul/magic-wand-js/master/js/magic-wand-min.js"></script>
<script src="https://rawgit.com/Tamersoul/magic-wand-js/master/js/ol-magic-wand-min.js"></script>
<div>Hold RIGHT mouse button and move to change the color threshold</div>
<div>Hold the CTRL key to add selection</div>
<div>Use the CTRL+Z for undo and CTRL+Y for redo</div>
<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" class="smallmap"></div>

CSS

.button {
    padding: 4px;
    margin: 4px;
    border: 1px solid black;
    float: left;
}
.button:hover {
    background-color: blue;
    color: white;
    cursor: pointer
}

.smallmap {
    width: 512px;
    height: 300px;
    border: 1px solid #ccc;
}

.cursor-magic-wand-draw {
    cursor: default !important;    
}

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

.cursor-magic-wand-wait {
    cursor: wait !important;
}

JavaScript

var map, mask, vector;
(function init() {
    var mapDiv = document.getElementById('map');
    map = new OpenLayers.Map(mapDiv, {
        projection: new OpenLayers.Projection("EPSG:3857"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m",
        numZoomLevels: 21,
        fallThrough: true,
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
    });

    mapDiv.addEventListener("contextmenu", function(e) { 
        e.preventDefault(); 
    });    
    
    // SET your key!
    BING_API_KEY = "Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3";
    
    var baseLayers = [
        //new OpenLayers.Layer.Bing({
        //    name: "Bing (road)",
        //    key: BING_API_KEY,
        //    type: "Road"
        //}),
        //new OpenLayers.Layer.Bing({
        //    name: "Bing (hybrid)",
        //    key: BING_API_KEY,
        //    type: "AerialWithLabels"
        //}),
        //new OpenLayers.Layer.Bing({
        //    name: "Bing (aerial)",
        //    key: BING_API_KEY,
        //    type: "Aerial"
        //}),
        new OpenLayers.Layer.OSM("OSM"),
        new OpenLayers.Layer.Google(
            "Google (physical)",
            {
                type: google.maps.MapTypeId.TERRAIN,
            }
        ),
        new OpenLayers.Layer.Google(
            "Google (streets)",
            {
                numZoomLevels: 20
            }
        ),
        new OpenLayers.Layer.Google(
            "Google (satellite)",
            {
                numZoomLevels: 22,
                type: google.maps.MapTypeId.SATELLITE
            }
        )
    ];

    for(var i = 0, len = baseLayers.length; i < len; ++i) {
        l = baseLayers[i];
        l.transitionEffect = 'resize';
        l.isBaseLayer = true;
        l.wrapDateLine = true;
    }
    
    vector = new OpenLayers.Layer.Vector("Polygons", {
       ...