canvas-hit-detection.js

// create some sample features
var Feature = OpenLayers.Feature.Vector;
var Geometry = OpenLayers.Geometry;
var features = [
    new Feature(new Geometry.Point(-90, 45)),
    new Feature(
        new Geometry.Point(0, 45),
        {cls: "one"}
    ),
    new Feature(
        new Geometry.Point(90, 45),
        {cls: "two"}
    ),
    new Feature(
        Geometry.fromWKT("LINESTRING(-110 -60, -80 -40, -50 -60, -20 -40)")
    ),
    new Feature(
        Geometry.fromWKT("POLYGON((20 -20, 110 -20, 110 -80, 20 -80, 20 -20), (40 -40, 90 -40, 90 -60, 40 -60, 40 -40))")
    )    
];

// create rule based styles
var Rule = OpenLayers.Rule;
var Filter = OpenLayers.Filter;
var style = new OpenLayers.Style({
    pointRadius: 10,
    strokeWidth: 3,
    strokeOpacity: 0.7,
    strokeColor: "navy",
    fillColor: "#ffcc66",
    fillOpacity: 1
}, {
    rules: [
        new Rule({
            filter: new Filter.Comparison({
                type: "==",
                property: "cls",
                value: "one"
            }),
            symbolizer: {
                externalGraphic: "../img/marker-blue.png"
            }
        }),
        new Rule({
            filter: new Filter.Comparison({
                type: "==",
                property: "cls",
                value: "two"
            }),
            symbolizer: {
                externalGraphic: "../img/marker-green.png"
            }
        }),
        new Rule({
            elseFilter: true,
            symbolizer: {
                graphicName: "circle"
            }
        })
    ]
});

var layer = new OpenLayers.Layer.Vector(null, {
    styleMap: new OpenLayers.StyleMap({
        "default": style,
        select: {
            fillColor: "red",
            pointRadius: 13,
            strokeColor: "yellow",
            strokeWidth: 3
        }
    }),
    isBaseLayer: true,
    renderers: ["Canvas"]
});
layer.addFeatures(features);

var map = new OpenLayers.Map({
    div: "map",
    layers: [layer],
    center: new OpenLayers.LonLat(0, 0),
    zoom: 0
});

var select = new OpenLayers.Control.SelectFeature(layer);
map.addControl(select);
select.activate();