JSFiddle - React, Tailwind, and code Playground

by aidankirrane

HTML

<html> 
  <head> 
    <script src='http://openlayers.org/api/OpenLayers.js' type='text/javascript'></script> 
  </head> 
 
  <body onload="init()"> 
    <div id="map" style='width: 650px; height: 408px;'></div> 
  </body> 
</html>

CSS

.customEditingToolbar {
        float: right;
        right: 0px;
        height: 30px;
    }
    .customEditingToolbar div {
        float: right;
        margin: 5px;
        width: 24px;
        height: 24px;
    }
    .olControlNavigationItemActive {
        background-image: url("http://openlayers.org/api/theme/default/img/editing_tool_bar.png");
        background-repeat: no-repeat;
        background-position: -103px -23px;
    }
    .olControlNavigationItemInactive {
        background-image: url("http://openlayers.org/api/theme/default/img/editing_tool_bar.png");
        background-repeat: no-repeat;
        background-position: -103px -0px;
    }
    .olControlDrawFeaturePolygonItemInactive {
        background-image: url("http://openlayers.org/api/theme/default/img/add_point_off.png");
        background-repeat: no-repeat;
        background-position: 0px 1px;
    }
    .olControlDrawFeaturePolygonItemActive {
        background-image: url("http://openlayers.org/api/theme/default/img/add_point_on.png");
        background-repeat: no-repeat;
        background-position: 0px 1px ;
    }
    .olControlModifyFeatureItemActive {
        background-image: url(http://openlayers.org/api/theme/default/img/move_feature_on.png);
        background-repeat: no-repeat;
        background-position: 0px 1px;
    }
    .olControlModifyFeatureItemInactive {
        background-image: url(http://openlayers.org/api/theme/default/img/move_feature_off.png);
        background-repeat: no-repeat;
        background-position: 0px 1px;
    }
    .olControlDeleteFeatureItemActive {
        background-image: url(http://openlayers.org/api/theme/default/img/remove_point_on.png);
        background-repeat: no-repeat;
        background-position: 0px 1px;
    }
    .olControlDeleteFeatureItemInactive {
        background-image: url(http://openlayers.org/api/theme/default/img/remove_point_off.png);
        background-repeat: no-repeat;
        background-position: 0px 1px;
    }

JavaScript

var map, wfs;
var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
    initialize: function(layer, options) {
        OpenLayers.Control.prototype.initialize.apply(this, [options]);
        this.layer = layer;
        this.handler = new OpenLayers.Handler.Feature(
            this, layer, {click: this.clickFeature}
        );
    },
    clickFeature: function(feature) {
        // if feature doesn't have a fid, destroy it
        if(feature.fid == undefined) {
            this.layer.destroyFeatures([feature]);
        } else {
            feature.state = OpenLayers.State.DELETE;
            this.layer.events.triggerEvent("afterfeaturemodified",
                                           {feature: feature});
            feature.renderIntent = "select";
            this.layer.drawFeature(feature);
        }
    },
    setMap: function(map) {
        this.handler.setMap(map);
        OpenLayers.Control.prototype.setMap.apply(this, arguments);
    },
    CLASS_NAME: "OpenLayers.Control.DeleteFeature"
});

 init = function() {
    map = new OpenLayers.Map('map', {
        controls: [
            new OpenLayers.Control.PanZoom(),
            new OpenLayers.Control.Navigation()
        ]
    });

   
    var options = {
        numZoomLevels: 8,
        'isBaseLayer': true,
        'alwaysInRange': true
    };
    var graphic = new OpenLayers.Layer.Image(
        'OpenLayersXXZ',
        'http://www.mapsofworld.com/russian-federation/maps/russia-map.gif',
            new  OpenLayers.Bounds(20.008697509767,32.076110839844,20.123138427735,32.154235839844),
            new OpenLayers.Size(750, 512),                    //
        options
    );
/*
    graphic.events.on({
        loadstart: function() {
            OpenLayers.Console.log("loadstart");
        },
        loadend: function() {
            OpenLayers.Console.log("loadend");
        }
    });
*/
    map.addLayer(graphic);

    var overview = new OpenLayers.Control.OverviewMap({
        maximized: false
   ...