JSFiddle - React, Tailwind, and code Playground

by Thomas B.

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map" style="width:600px;height:600px;"></div>

JavaScript

function saveGeoJSON(geojson) {
    //do something sensible to save here, propably POST/PUT?
    console.log("save", geojson);
}

(function() {
var map, layer;

        
        map = new OpenLayers.Map( 'map');
        layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
        map.addLayer(layer);
        map.setCenter(

        new OpenLayers.LonLat(0.8,52.472).transform(
                new OpenLayers.Projection("EPSG:4326"),
                map.getProjectionObject()
            ), 7
        );    


       var featurecollection = {"type":"Polygon","coordinates":[[[-248052.78111938,6928922.6476283],[-193018.12076172,6933661.7433813],[-167335.27926147,6885812.1636815],[-184915.79576462,6855084.4783151],[-228484.9018811,6854931.6042586],[-260588.45375641,6872512.1207617],[-266703.41601837,6898194.962262],[-248052.78111938,6928922.6476283]]]};
       var geojson_format = new OpenLayers.Format.GeoJSON();
       var vector_layer = new OpenLayers.Layer.Vector({
        projection: new OpenLayers.Projection("EPSG:4326")
       }); 

       map.addLayer(vector_layer);
       vector_layer.addFeatures(geojson_format.read(featurecollection));

        var modify_control = new OpenLayers.Control.ModifyFeature(vector_layer,{
            mode:OpenLayers.Control.ModifyFeature.RESHAPE
        });
        map.addControl(modify_control);
        modify_control.activate();
    
        vector_layer.events.register("afterfeaturemodified", this, function(e){            
            
            //this is the edited feature
            var geoJSON = geojson_format.write(e.feature);
            
            //use the next line instead for all features on layer
            //var geoJSON = geojson_format.write(e.feature.layer.features);
            saveGeoJSON(geoJSON);
        });
}());