OpenLayers adding properties to geojson

Question

With the save strategy I am posting the geojson to a php script where it is merged and reloaded when the map is loaded.

How do I add properties attributes to the geojson that is posted? Like a label,color, comment etc.

Posted GeoJson:

{"type" : "FeatureCollection",
        "features" : [{"type":"Feature",
                      "properties" : {"attr_a":"TEST PROPERTY"},
                      "geometry" : {
                                 "type" : "Point",
                                  "coordinates" : [-4.1808968764,49.2150111528]                                      
                                  }
                   }]
}

Code snippet....

 var saveStrategy = new OpenLayers.Strategy.Save();
     saveStrategy.events.on({
        'success': function(event) {
             alert('Changes saved!');
        },
        'fail': function(event) {
             alert('Error! Changes not saved');
        },
        scope: this
    });


     vlayer = new OpenLayers.Layer.Vector( "Editable" , {
              style: { externalGraphic: 'red-pin.png', graphicWidth: 21, graphicHeight: 25, graphicYOffset: -24  },
              projection: wgs84,
              strategies: [ new OpenLayers.Strategy.Fixed(), saveStrategy],
              protocol: new OpenLayers.Protocol.HTTP({url: "./run.php", format: new OpenLayers.Format.GeoJSON({ignoreExtraDims: true }) })
              });

Answer 1

Your GeoJSON looks ok.

just as an addition to the answer of @ryansstack:

You can visit http://geojsonlint.com/ to check your geojson or paste the following GeoJSON into http://geojson.io/ to get an idea of how to save and read attributes like color, label and so on:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#FFFF00",
        "marker-size": "medium",
        "marker-symbol": "star",
        "attr_a":"TEST PROPERTY"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -4.180375635623932,
          49.215032129722225
        ]
      }
    }
  ]
}

PS: are your coordinates correct? seems to be pretty wet where this point lies: http://bl.ocks.org/anonymous/raw/1042b63407a54f4153b2/

EDIT1 ( as answer to your comment):

If you want to set the attributes after drawing a new feature you can listen to the beforefeatureadded event. As the features are added to the layer when you load your layer you want to make sure that you register this event not before the layer has finished loading.

// wfs_layer is your vectorLayer

// function to be called after you added a new feature

 var testfunction=
 function(e)
 { 
 e.feature.attributes.attr_a= window.prompt("attr_a:","Set attr_a");

 };

 wfs_layer.events.register("loadend",map,function()
 {
     wfs_layer.events.register("beforefeatureadded",map,testfunction
     );
 }
 );

 wfs_layer.events.register("loadstart",map,function()
 {
 wfs_layer.events.unregister("beforefeatureadded",map, testfunction);
 }
 );

Answer 2

The properties attribute is a dictionary, not an array. Here's a sample that worked for me, with openlayers 2 and 3.

{"type":"FeatureCollection",
 "features": [
    {"type":"Feature",
        "crs":{"type":"name", "properties":{"name":"EPSG:4326"}},
        "geometry":{
            "type":"Point",
            "coordinates":[-100.000,36.000]
        },
        "properties":{
                "attr_a":36,
                "attr_b":71,
                "attr_c":41,
                "attr_d":82,
                "attr_e":13,
                "attr_f":8,
                "attr_g":8,
                "attr_h":55,
                "attr_i":83.7008345406502,
                "attr_j":83.5064527578652
        }
    },
 ]
}

To make this a little more complete, here's some openlayers 2 code that reads these properties. (dislcaimer: I've changed this from the original version to use false data names so there may be a bug)

...
var vectorLayer = new OpenLayers.Layer.Vector( "test layer",
    { isBaseLayer: true, 
      styleMap: new OpenLayers.StyleMap({ 'default': { 
          strokeWidth: '${attr_a}', 
          strokeColor: '#ff00ff',
          pointRadius: '${attr_g}'
      }}),
    });
...
$.getJSON("/some/json/file.json", loadLayer) 
...
function loadLayer( data ) { 
    var featurecollection = data
    var geojson_format = new OpenLayers.Format.GeoJSON()
    var features = geojson_format.read(data, 'FeatureCollection');
    vector_layer.addFeatures( features )
}
...