Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

up vote 1 down vote accepted

The option I selected is to listen to the map "click" event and manually test if each marker is contained in the click area:

    var olMap = new ol.Map(mapDiv, {
        projection: new ol.Projection("EPSG:900913"),
        displayProjection: new ol.Projection("EPSG:4326"),
        eventListeners: {
            "click": function (evt)
            {
                var delta = 16;
                var ll = olMap.getLonLatFromPixel({ x: evt.xy.x - delta, y: evt.xy.y + delta });
                var ur = olMap.getLonLatFromPixel({ x: evt.xy.x + delta, y: evt.xy.y - delta });
                var extent = new ol.Bounds(ll.lon, ll.lat, ur.lon, ur.lat);
                var features = array.filter(controls.selectFeature.layer.selectedFeatures, function (f)
                {
                    var center = f.geometry.getCentroid();
                    return extent.contains(center.x, center.y);
                });
                array.forEach(features, controls.selectFeature.unselect);
            }
        }
    });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.