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() {
         map.layers[1].styleMap.styles.
     default.defaultStyle.pointRadius = Math.random() * 50;
         map.layers[1].styleMap.styles.
     default.defaultStyle.strokeColor = bgcolorlist[Math.floor(Math.random() * bgcolorlist.length)];
         map.layers[1].styleMap.styles.
     default.defaultStyle.fillColor = bgcolorlist[Math.floor(Math.random() * bgcolorlist.length)];
         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))]);
 map.zoomToMaxExtent();