Load WFS and use stylemap with external graphic

by Thomas B.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">Click on right button to change Style!
    <div id="map" class="smallmap"></div>
    <div id="panel"></div>
    <p>Active Vector Style: <b><span id="name"></span></b>
    </p>
</body>

CSS

#map {
    width: 400px;
    height: 400px;
    border: 1px solid #dddddd;
}
.Panel2 {
    width: 18px;
    height: 54px;
    cursor: pointer;
    right: 10px;
    top: 74px;
}
.firstItemInactive, .secondItemInactive {
    background: #30d5c8;
    border: 2px solid #075f67;
    width: 18px;
    height: 18px;
}
.firstItemActive, .secondItemActive {
    background: #ffffdd;
    border: 2px solid #dddddd;
    width: 18px;
    height: 18px;
}

JavaScript

var map;
var layer, wms, sty, sty2, sm, sm2, stil;

function init() {
    map = new OpenLayers.Map('map');
    wms = new OpenLayers.Layer.WMS(
        "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
        layers: 'basic'
    });
    var myStyle = {
        fill: true,
        fillColor: "#ff0000"
    };

    var defStyle = {
        externalGraphic: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
        graphicWidth: 32,
        graphicHeight: 37,
        graphicYOffset: -37,
        graphicOpacity: 1,
        cursor: "pointer"
    };
    sty = OpenLayers.Util.applyDefaults(defStyle, OpenLayers.Feature.Vector.style["default"]);
    sm = new OpenLayers.StyleMap({
        'default': sty
    });


    // style2
    var defStyle2 = {
        externalGraphic: "https://maps.google.com/mapfiles/kml/shapes/schools_maps.png",
        graphicWidth: 32,
        graphicHeight: 37,
        graphicYOffset: -37,
        graphicOpacity: 1,
        cursor: "pointer",
        name: "schorsch"
    };
    sty2 = OpenLayers.Util.applyDefaults(defStyle2, OpenLayers.Feature.Vector.style["default"]);
    sm2 = new OpenLayers.StyleMap({
        'default': sty2
    });

    layer = new OpenLayers.Layer.Vector("WFS", {
        styleMap: sm,
        strategies: [new OpenLayers.Strategy.BBOX()],
        protocol: new OpenLayers.Protocol.WFS({
            url: "http://demo.opengeo.org/geoserver/wfs",
            version: "1.0.0",
            featureType: "ne_10m_populated_places",
            featureNS: "http://openstreemap.org"
        })
    });

    var wfs = new OpenLayers.Layer.Vector(
            "Stavros Features",
            {
                strategies: [new OpenLayers.Strategy.Fixed()]
                , projection: new OpenLayers.Projection("EPSG:4326")
                , protocol: new OpenLayers.Protocol.WFS({
                    version: "1.0.0",
                    //url: "http://demo.opengeo.org/geoserver/wfs",
                    url:...