OpenLayers: modifying feature style

by _DR_

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="panel"></div>
 <div id="mapdiv"></div>

CSS

#mapdiv {
    width: 500px;
    height: 500px;
    border: 1px solid #dddddd;
}

#panel {
    width: 32px;
    height: 32px;
    cursor: pointer;
}

#panel .olControlButtonItemInactive{
    background: url(http://www.veryicon.com/icon/preview/Internet%20&%20Web/Mac%20OS%20X%20Developers/reload%20Icon.jpg)no-repeat;
    width: 32px;
    height: 32px;
}

JavaScript

map = new OpenLayers.Map("mapdiv", {
    controls: []
});
var bgcolorlist = ["#DFDFFF", "#FFFFBF", "#80FF80", "#EAEAFF", "#C9FFA8", "#F7F7F7", "#FF0000", "#00FF00"];

var outside_panel = new OpenLayers.Control.Panel({
    div: OpenLayers.Util.getElement('panel')
});
map.addControl(outside_panel);
var redraw = new OpenLayers.Control.Button({
    title: 'Перерисовать',
    trigger: function() {
        vectorLayer.features[1].style = {fillColor: bgcolorlist[Math.floor(Math.random() * bgcolorlist.length)], pointRadius: Math.random() * 50};
        map.layers[1].redraw();
    }
});


outside_panel.addControls([redraw]);

map.addLayer(new OpenLayers.Layer('', {
    isBaseLayer: true,
    maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200)
}));
var vectorLayer = new OpenLayers.Layer.Vector("Buildings", {
    maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200)
});

map.addLayer(vectorLayer);
vectorLayer.addFeatures([new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-20.126, 20.755)), new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-20.300, 90.780))]);
map.zoomToMaxExtent();