Openlayers Vector Layer Features are empty even after DrawFeature executed

Question

I am new to Openlayers and Javascript.

I am creating a web map that will allow users to draw shapes on top of a base map. I'm trying to figure out how to access the coordinates of the shapes that are drawn on the map, but the layer that I thought would contain the drawings always appears empty.

My current code:

function getFeatures() {
 var annotation_layer = map.getLayersByName("Annotations")
 window.alert(annotation_layer.features)
 for(var a = 0; a < annotation_layer.features.length; a++ ){
 window.alert(annotation_layer.features[a].geometry)
 };
}
function init() {
 map = new OpenLayers.Map('map', {
 projection: new OpenLayers.Projection("EPSG:900913"),
 displayProjection: new OpenLayers.Projection("EPSG:4326"),
 controls: [
 new OpenLayers.Control.PanZoom(),
 new OpenLayers.Control.Navigation()
 ]
 });
 var gphy = new OpenLayers.Layer.Google(
 "Google Streets"
 );
 annotation = new OpenLayers.Layer.Vector("Annotations", {
 strategies: [new OpenLayers.Strategy.BBOX()],
 projection: new OpenLayers.Projection("EPSG:4326"),
 protocol : new OpenLayers.Protocol.HTTP({
 url : 'polygons.geojson',
 format : new OpenLayers.Format.GeoJSON()
 })
 })
 map.addLayers([gphy, annotation]);
 var panel = new OpenLayers.Control.Panel({
 displayClass: 'customEditingToolbar',
 allowDepress: true
 });
 var draw = new OpenLayers.Control.DrawFeature(
 annotation, OpenLayers.Handler.Polygon,
 {
 title: "Draw Feature",
 displayClass: "olControlDrawFeaturePolygon",
 multi: true
 }
 );
 panel.addControls([draw]);
 map.addControl(panel);
}

The function getFeatures() is linked to a button in the html. When pressed, I would like it to create popups for the features that have been drawn.

The problem is that the features array inside the annotations vector layer always appears empty to the getFeatures() function even after several shapes have been drawn on the map. How do I get annotations vector layer to correctly contain the drawn features?

Answer 1

The problem with the above code was that map.getLayersByName("Annotations") returns a list and not a single object. So the drawn features were actually being added to the layer but my accessing of the layer was incorrect.

Correct getFeatures() code:

function getFeatures() {
 var annotation_layer_list = map.getLayersByName("Annotations")
 var annotation_layer = annotation_layer_list[0]
 window.alert(annotation_layer.features)
 for(var a = 0; a < annotation_layer.features.length; a++ ){
 window.alert(annotation_layer.features[a].geometry)
 };
}