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'

    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:


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

2 Answers 2

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
  • Consider looking at the OpenLayers docs the next time, all this information is readily there
    – atlefren
    Feb 26, 2014 at 13:57

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...

  • 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!
    – thanili
    Feb 26, 2014 at 13:44
  • Doesn't the example I gave you do this?!
    – Catlover
    Feb 26, 2014 at 13:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.