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
});
}
