Multiple images per layer in OpenLayers

Question

Is it possible to put multiple images in a layer in OpenLayers?

Ideally I would like to group my pictures into categories (each layer is one category) so I can show and hide each category as a whole instead of showing/hiding every single picture.

Is this possible? I found several examples using the Image layer of OpenLayers (which only seems to support one image) or the Vector layer with a StyleMap (which also seems to allow only one external image).

Have I overlooked something or would it take more effort (ie. creating a custom layer type)?

Thanks in advance!

Answer 1

To put multiple images in the same layer, you can create a styleMap like this

var style = new OpenLayers.StyleMap({
    default :new OpenLayers.Style({
          'pointRadius': 10,
          'externalGraphic': '/images/${icon}.png'
    })
})

Where "${icon}" is an attribute of the feature.

In the next example, i use 2 images "star" and "home"

var path = new OpenLayers.Layer.Vector( "images" );
//set the styleMap
path.styleMap = style;
map.addLayers([path]);

//create a new feature
var pointHome = new OpenLayers.Geometry.Point(-57.533832,-25.33963);
var featureHome = new OpenLayers.Feature.Vector(pointHome);
//set the icon of the feature
featureHome.attributes["icon"] ="home";

var pointStar = new OpenLayers.Geometry.Point(-57.533371,-25.338946);
var featureStar = new OpenLayers.Feature.Vector(pointStar);
//set the icon of the feature
featureStar.attributes["icon"] ="star";

path.addFeatures([featureHome, featureStar]);