I'm attempting to render a point feature as a graphic. When that feature is selected I'd like to display a green indicator above the graphic. It seems backgroundGraphic and externalGraphic are perfect for this...but I can't get it right.
function getStyles()
{
var unselectedMarkerOptions = {
pointRadius : 24,
strokeWidth : 1,
fillOpacity : 1,
graphicHeight : 48,
graphicWidth : 48,
externalGraphic : "http://usgvdcalix2:83/openlayers/img/blank.png",
backgroundWidth : 48,
backgroundHeight : 48,
backgroundGraphic : "http://usgvdcalix2:83/openlayers/img/marker-blue.png"
};
var selectedMarkerOptions = {
pointRadius : 24,
strokeWidth : 1,
fillOpacity : 1,
graphicHeight : 8,
graphicWidth : 8,
externalGraphic : "http://usgvdcalix2:83/openlayers/img/greendot.png",
backgroundWidth : 48,
backgroundHeight : 48,
backgroundGraphic : "http://usgvdcalix2:83/openlayers/img/marker.png"
};
return {
selected : new ol.Style(ol.Util.applyDefaults(selectedMarkerOptions, ol.Feature.Vector.style["default"])),
unselected : new ol.Style(ol.Util.applyDefaults(unselectedMarkerOptions, ol.Feature.Vector.style["default"]))
};
}
I add these styles to a stylemap and associate it with a vector layer but it doesn't behave well:
var styles = getStyles ();
var styleMap = new ol.StyleMap({
"default": styles.unselected,
"select": styles.selected
});
var featureLayer = new ol.Layer.Vector ( "Features", {
styleMap : styleMap,
renderers : ol.Layer.Vector.prototype.renderers
} );
- It requires a transparent image (blank.png).
- User must click the externalGraphic meaning the 8x8 "greendot.png".
- Setting backgroundGraphicZIndex to a large value to make it a foreground graphic didn't work.
The OL select-feature-multilayer example works well. But I'm looking for a tiny green indicator to show that a feature is selected with the ability to click the feature and toggle the indicator. How is this possible?