OpenLayers Stylemap Style Context vectorlayer

by Thomas B.

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<h2>OpenLayers Vector Strategy.Refresh for displaying Realtime Data </h2>

<div id="map"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:400, 700, 300);
 html, body {
    font-family:'Oswald', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #2F8CEA;
    width:100%;
    height:100%;
}
#map {
    width:97%;
    height:87%;
    border:1px solid #2F8CEA;
    margin: auto;
}

JavaScript

(function () {
    //OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
    var map, layer;


    map = new OpenLayers.Map('map');
    layer = new OpenLayers.Layer.OSM("Simple OSM Map");
    map.addLayer(layer);
    map.setCenter(

    new OpenLayers.LonLat(-1.1240386962890625,
    44.68500966685889).transform(
    new OpenLayers.Projection("EPSG:4326"),
    map.getProjectionObject()), 0);




    var geojson_format = new OpenLayers.Format.GeoJSON({
        'internalProjection': new OpenLayers.Projection("EPSG:900913"),
            'externalProjection': new OpenLayers.Projection("EPSG:4326")
    });


    var realtime = new OpenLayers.Layer.Vector("Realtime", {
        strategies: [new OpenLayers.Strategy.Fixed(), new OpenLayers.Strategy.Refresh({
            force: true,
            interval: 1000
        })],
        protocol: new OpenLayers.Protocol.HTTP({
            url:
                "http://wanderdrone.appspot.com",
            format: new OpenLayers.Format.GeoJSON()
        }),
    });

    realtime.events.on({
        "loadstart": function (e) {
            console.log(e.object.features.length);
            $("body").css("background", "rgba(0,0,255,0.3)");
            setTimeout(function () {
                $("body").css("background", "white");
            }, 200);
        }
    })


    map.addLayer(realtime);


}());