OpenLayers add a json layer to existing map on load

Question

I am new to OpenLayers ... i have managed to build a layer with several features (draw tools, delete and save buttons).

When the user draws shapes on the image map and press Save, these are stored as a json String to filesystem/database.

Since a user desires to see or re-edit his drawing on the image i would like to fetch and re-draw this json String. My code is as follows:

function initialiseMap(){
 var options = {
 controls : [],
 maxExtent : new OpenLayers.Bounds(0.0, -72448.0, 142848.0, 0.0),
 maxResolution : 1024.000000,
 numZoomLevels : 10
 };
 map = new OpenLayers.Map(imageEditorID, options);
 imageLayer = new OpenLayers.Layer.TMS(imgURL, "", {
 url : '',
 serviceVersion : '.',
 layername : '.',
 alpha : true,
 type : 'png',
 getURL : overlay_getTileURL,
 transitionEffect: 'resize'
 });
 map.addLayer(imageLayer);
 var vlayer = new OpenLayers.Layer.Vector("Editable");
 var previousLayer = getJSONData(); //<<<--- HERE I CALL A FUNCTION TO FETCH STORED LAYER
 ....
 .... // create some tools for drawing & then provide save option ....
 ....
 var save = new OpenLayers.Control.Button({
 title: 'Save', text: 'Save', 
 trigger: function(){ 
 var GEOJSON_PARSER = new OpenLayers.Format.GeoJSON(); 
 var vectorLayerAsJson = GEOJSON_PARSER.write(vlayer.features); 
 sendJSONToServer([{name:'param', value:vectorLayerAsJson}]);
 }, 'displayClass': "olControlSaveFeatures" 
 });
 ...
 ... 

and the function i would like to built, fetch json String from an XHTML form:

function getJSONData(data) {
 var htmlstring = document.getElementById("A3702:imageEditor:getJSONData").value;
 .... ///<<<--- How am i going to add this json String as Layer on existing image?

Json String is something like:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[43796,-32494],[43852,-30582],[41940,-30526],[41884,-32438],[43796,-32494]]]}}]}

How am i going to maybee parse (serialize/deserialize) json String and properly add it (like e.g. as GEOJson layer) to the map?

Answer 1

function getJSONData(data) {
 var htmlstring = document.getElementById("A3702:imageEditor:getJSONData").value;
 var format = new OpenLayers.Format.GeoJSON(); //create a format to read/write GeoJSON
 return format.read(htmlstring) ; //parse the GeoJSON to an OpenLayers Feature array

then in your initialiseMap()

var previousFeatures = getJSONData(); //call your function
vlayer.addFeatures(previousFeatures); //add the features to your layer

• atlefren: Consider looking at the OpenLayers docs the next time, all this information is readily there

Answer 2

Have you checked the code provided here ?

I tried deleting objects and saving them, and when I refreshed the page they were really deleted. But adding/drawing features and saving the results did not really work. I guess checking their source code will give you quite good ideas on how to progress with your problem...

• thanili: I can save objects as described above as json String (this is the native form OpenLayers produce). What i am trying to achive is to add subsequently (when map is revisited) this save layer to the map!
• Catlover: Doesn't the example I gave you do this?!