how to change color of feature to mark it as recently modified with openlayers

Question

I am developing a crowd sourced app using openlayers. after user clicks an feature, a popup form is displayed. After clicking the save button, the data is used in processing which takes some time so the changes are not visible immediately.

In such case, i want to change the color of the recently modified feature say to yellow, so that in the legend i can say it is being processed.

UPDATED:

the style changes just as i need(turns yellow), but when i pan map, the style is removed (ie it changes back to orange), i am using BBOX strategy with ratio 0.5.

    //OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url=";  
    //global variables
    var map, 
        selector, 
        selectedfeature, 
        building, 
        data_url,  
        popup, 
        field,
        text;

    var centerX = 85.33141;//491213.721224323//-123.1684986291807;//9497800;
    var centerY = 27.72223;//5456645.24607268//49.245339757767844;//3212000;
    var center = new OpenLayers.LonLat(centerX, centerY);
    var ranger = 0.015;//10000000//.5;//10000;
    var map_bound = [centerX-ranger,centerY-ranger,centerX+ranger,centerY+ranger];
    var extent = new OpenLayers.Bounds(map_bound[0],map_bound[1],map_bound[2],map_bound[3]);
    var zoom = 18;

    //other options
    var proj4326 = new OpenLayers.Projection("EPSG:4326");
    var proj900913 = new OpenLayers.Projection("EPSG:900913");
    var popup;

    var field = [
                {key:"building",alias:"Building",value:["N/A","commercial","residential","public_admin","health_facility","academic"]},
                {key:"building:typology",alias:"Building Typology",value:["N/A","Reinforced_Concrete_Frame","Mud_Packed"]},
                {key:"building:level",alias:"Storeys",value:["N/A","1","2","3","4","5"]},
                {key:"building:use",alias:"Use of Building",value:["N/A","Commercial","Residential","Public_Admin","Health_Facility","Academic"]},
                {key:"building:floor_type",alias:"Floor Type",value:["N/A","Concrete","Wood"]},
                {key:"building:roof_type",alias:"Roof Type",value:["N/A","Flat","Sloped"]}
                ];

function removepopup(){
    if(map.popups[0]){
                //alert("popup exists");
        map.removePopup(map.popups[0]);
    }
};

function onFeatureSelect(feature) {
    removepopup();
    selectedfeature = feature;
    var name = selectedfeature.attributes['name'];
    if(!name){
        name = selectedfeature.attributes['operator'];
    }
    if(!name){
        name = '';
    }
    text = "<h3>"+name+"</h3>"+"<form id='formStructuralData'>";
    text+="<table>";

    for (var i in field) 
    {   //lists all fieldibutes
            prop = field[i];
            val = selectedfeature.attributes[field[i].key];
        text += "<tr><td>"+prop.alias+"</td><td><select id="+prop.key+" style='width: 250px'>";
        for (var j in prop.value)
        {
            if(prop.value[j]==val)
            text +="<option selected='selected' value="+prop.value[j]+">"+prop.value[j]+"</option>";
            else
            text +="<option value="+prop.value[j]+">"+prop.value[j]+"</option>";
        }
        text+="</select></td></tr>";
        }
    text +="</table>";
    text +="<input id='save' type='button' value='Save' onClick='validateForm("+selectedfeature.osm_id+");removepopup();building.refresh()'/></form>";

    popup = new OpenLayers.Popup.FramedCloud(
        "chicken",
        selectedfeature.geometry.getBounds().getCenterLonLat(),
        null,
        text,
        null,
        true,
        onPopupClose

    );
    map.addPopup(popup);
    selectedfeature.style = {fillcolor:"#000000"};
    building.drawFeature(selectedfeature);
}

function onPopupClose(evt) {
    removepopup();
    selector.unselectAll();
}

function onFeatureUnselect(feature){
    removepopup();
}

function init(){
    //map configuration
    map = new OpenLayers.Map('map',{
        maxExtent:extent,
        controls:[new OpenLayers.Control.PanZoom(),
            new OpenLayers.Control.MousePosition({
                suffix:'',
                emptyString:'',
                displayProjection:new OpenLayers.Projection("EPSG:4015")
            }),
            new OpenLayers.Control.ScaleLine(),
            new OpenLayers.Control.Scale(),
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.Attribution()
        ],
        projection:proj4326,
        displayProjection:proj900913
    });
    bing = new OpenLayers.Layer.Bing({name: "Bing Aerial Layer",type: "Aerial",key: "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf",});
    osm = new OpenLayers.Layer.OSM("OSM");
    map.addLayer(osm);
    map.addLayer(bing);
    map.setCenter(center.transform(proj4326,proj900913),zoom);

    //OSM data layer
    var data_url = "http://overpass-api.de/api/interpreter?data=(way[building](bbox);node(w););out meta;"; //main working url
    //var data_url = "Ktm valley 2013-01-01_10-47.osm";

    building = new OpenLayers.Layer.Vector("Building", {
        strategies: [new OpenLayers.Strategy.BBOX({ratio:0.5}),new OpenLayers.Strategy.Refresh()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: data_url,   //<-- relative or absolute URL to your .osm file
            format: new OpenLayers.Format.OSMMeta()
        }),
        projection: new OpenLayers.Projection("EPSG:4326")
    });

    map.addLayer(building);
    //controls      
    selector = new OpenLayers.Control.SelectFeature(building,{
        onSelect: onFeatureSelect,
        onUnselect: onFeatureUnselect
    });
    map.addControl(selector);
    selector.activate();

    highlightor =new OpenLayers.Control.SelectFeature(building,{
        highlightOnly:true,
        autoActivate:true
    });
}

Answer 1

Can u post some code? I guess you might not assign the style to the feature otherwise the feature's style will not change after panning. I can give you some sample codes.

Wrong code:

layer.drawFeature(feature, yourStyle);

This line not assign the style to feature, it just draw the feature using the style and the feature will be restored to its default style after map redrawing (after panning or zooming in/out).

Right code:

feature.style = yourStyle; 
layer.drawFeature(feature);

Here you assign the style to your feature, and don't provide second params to drawFeature function, it will use the assigned style when drawing. The style will not be changed only you assign a new one to the feature.

Answer 2

There is a similar question here. You may just assign a new style to the feature that are recently modified.

Answer 3

Probably you can use renderIntent, so that you can specify which style for the particular feature belongs to.

Here an example: http://rndxpress.wordpress.com/2013/03/12/openlayers-custom-style-for-individual-features/

Regards, Nas