Question

I am trying to plot country positions in OpenLayers, and am having problems changing the default icon.

My basic code is as follows:

    function addCountryMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
        var feature = new OpenLayers.Feature(alumniCountries, ll); 
        feature.closeBox = closeBox;
        feature.popupClass = popupClass;
        feature.data.popupContentHTML = popupContentHTML;
        feature.data.overflow = (overflow) ? "auto" : "hidden";

        var marker = feature.createMarker();

        var markerClick = function (evt) {
            if (this.popup == null) {
                this.popup = this.createPopup(this.closeBox);
                map.addPopup(this.popup);
                this.popup.show();
            } else {
                this.popup.toggle();
            }
            currentPopup = this.popup;
            OpenLayers.Event.stop(evt);
        };
        marker.events.register("mousedown", feature, markerClick);
        alumniCountries.addMarker(marker);
    }

And this all works fine, but displays the default openLayers icon. The following line changes the icon BUT it breaks the popup in the markerClick function:

feature.icon = new OpenLayers.Icon("marker-blue.png");

The same line using marker.icon also changes the icon, but also breaks the popup. Any pointers on how to change icon without breaking the popup would be very much appreciated.

Answer 1

It took a while, but it was quite simple in the end:

feature.data.icon = new OpenLayers.Icon("marker-blue.png");