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 = ""+name+"
"+"";
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
});
}
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.
