Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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
    });
}
share|improve this question
    
It depends, how did you define feature style - attached style directly to feature, used layer styling, context functions etc. You should post some code. –  user1702401 Mar 8 '13 at 7:01
add comment

3 Answers

up vote 0 down vote accepted

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.

share|improve this answer
add comment

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

share|improve this answer
    
the style changes just as i need, but when i pan map, the style is removed, i am using BBOX strategy with ratio 0.5. –  neogeomat Mar 10 '13 at 10:02
    
i think is best to use renderIntent. Set the renderIntent to the feature and add the style to the layer style map, so that the feature only redraw based on style declared in renderIntent. Here an example: rndxpress.wordpress.com/2013/01/14/… –  nasrulhazim Mar 14 '13 at 8:09
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.