
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


    <title></title>


    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 


    <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>


     <script type="text/javascript">


         $(document).ready(function () {


             var map = new OpenLayers.Map('map');


             var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",


                "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });


             var vectors = new OpenLayers.Layer.Vector('Vectors');


             map.addLayers([wms, vectors]);


             // load previously serialized feature


             var serialized = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[63.984375,62.578125],[75.9375,40.4296875],[109.6875,51.328125],[101.6015625,67.5],[84.7265625,70.6640625],[63.984375,62.578125]]]}}]}';


             var geojson = new OpenLayers.Format.GeoJSON();


             vectors.features = geojson.read(serialized);


             var polygon = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Polygon);


             var modify = new OpenLayers.Control.ModifyFeature(vectors);


             modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;


             modify.createVertices = true;


             map.addControls([polygon, modify]);


             polygon.activate();


             $('#navigate').click(function (e) {


                 polygon.deactivate();


                 modify.activate();


             });


             $('#polygon').click(function (e) {


                 modify.deactivate();


                 polygon.activate();


             });


             map.setCenter(new OpenLayers.LonLat(0, 0), 2);


         });


    </script>


</head>


<body>


    <h1>ModifyFeature Example</h1> 


    <p>Draw polygon switch to navigate and select it. It works. The deserialized loaded polygon does not work.</p>


    <div id="map" style="width:900px; height:500px; border:1px solid black;"></div>


    <ul id="controlToggle">


        <li>


            <input type="radio" name="type" value="none" id="navigate" checked="checked" />


            <label for="navigate">navigate</label>


        </li>


        <li>


            <input type="radio" name="type" value="polygon" id="polygon" checked="checked" />


            <label for="polygon">draw polygon</label>


        </li>


    </ul>


</body>


</html>