[OpenLayers-Users] Selected items visually return to "default" state upon zooming or other refreshing of the viewport

[sendeman]

Hi all,

After a lot of work and questions on this list (thanks for all the help!), I
currently have a viewport that has two wfs layers in it, that display
properly in all browsers. Phew! It has been a steep learning curve. I have
one more question though, it's about selecting and styles.

I have made a multilayer select control (see also: 
http://dev.openlayers.org/sandbox/ahocevar/singleroot/openlayers/examples/select-feature-multilayer.html
An example of SelectFeature on multiple vector layers ). The selecting
works, the layes are both selecting, I can deselect using control and I can
select multiple features on different layers using the shift key. My custom
styles are being implemented for "default", "temporary" and "select" states.
All seems well, but: there is a problem.

When I select a feature (or more than one) and then zoom in or out or do
something else that makes openlayers redraw, the feature returns to its
"default" style as defined in the stylemap for the feature. I get this in
both IE7 and Firefox 3.0.11. I find it strange, because the example shown in
the above link doesn't show this behaviour. I log the select/unselect events
to a div in the page, and I don't see an unselect statement when I zoom out.
However, when I try to unselect the feature (which looks unselected, but
should in fact still be selected) with ctrl-click, I don't get a log of an
unselect event. Instead when I try to select the feature, that works. It is
correctly displayed in the "select" style from the stylemap and the select
statement becomes/stays(?) selected according to the select statement.

I hope the above clarifies the problem I have. Below you'll find the code of
my init-script, which I hope contains all the information necessary for the
troubleshooting. If not, please let me know what more I should provide.

Thanks in advance for any help! I will be greatly appreciated.

Best regards,
Martijn Senden.

Code of init-script:
_________________________________
// Avoid pink tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

function init(){
  //OpenLayers.ProxyHost="/cgi-bin/proxy.cgi/?url=";
  //Create a new OpenLayers mapwindow with associated controls
  var map = new OpenLayers.Map('map', {
		projection: "EPSG:28992",
		maxResolution: 1328.125,
		numZoomLevels: 14,
		maxExtent : new OpenLayers.Bounds(-23500,289000,316500,629000),
		restrictedExtent: new OpenLayers.Bounds(80000,442000,88000,452000),
		units : "m",
		controls: [
			new OpenLayers.Control.ZoomToMaxExtent(),
			new OpenLayers.Control.PanZoomBar({zoomWorldIcon: true}),
			new OpenLayers.Control.LayerSwitcher({'ascending':false}),
			new OpenLayers.Control.MousePosition({
        'numDigits':0,
        'separator':', ',
        'granularity': 10
      }),
			new OpenLayers.Control.MouseDefaults(),
			new OpenLayers.Control.KeyboardDefaults()
		]                   
	});

  // Add Spoortunnel Delft Mapserver .map-files
  layer = new OpenLayers.Layer.MapServer( "Topografie",
          "/geoviewerbin/mapserv.exe", {map:
"c:/OSGeo4W/apps/geoviewer/maps/spoortunnel.map", layers: "Topografie"} );
  map.addLayer(layer);

  var StyleTunnel = new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
                strokeColor: "#bfac57",
                fillColor: "#ffe674",
                fillOpacity: 0.8,
                strokeWidth: 2
              }),
    "temporary": new OpenLayers.Style({
                strokeColor: "#750c11",
                cursor: "crosshair",
                fillColor: "#b5121b"
              }),
    "select": new OpenLayers.Style({
                strokeColor: "#005676",
                fillColor: "#0084b6"
              })
  });
  var StylePeilbuizen = new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
                fillColor: "#ffe674",
                strokeColor: "#bfac57",
                graphicName: "circle",
                pointRadius: 3,
                strokeWidth: 1
              }),
    "temporary": new OpenLayers.Style({
                fillColor: "#b5121b",
                strokeColor: "#750c11",
                cursor: "crosshair"
              }),
    "select": new OpenLayers.Style({
                fillColor: "#0084b6",
                strokeColor: "#005676"
              })
  });

  wfs = new OpenLayers.Layer.WFS(
  "Contour spoortunnel",
 
"/geoviewerbin/mapserv.exe?map=c:/OSGeo4W/apps/geoviewer/maps/spoortunnel.map",
  {typename: 'SpoortunnelWFS'},
  {
    typename: "SpoortunnelWFS",
    extractAttributes: false,
    styleMap: StyleTunnel
  }
  );
  map.addLayer(wfs);

  wfs2 = new OpenLayers.Layer.WFS(
  "Peilbuizen",
 
"/geoviewerbin/mapserv.exe?map=c:/OSGeo4W/apps/geoviewer/maps/spoortunnel.map",
  {typename: 'PeilbuizenWFS'},
  {
    typename: "PeilbuizenWFS",
    extractAttributes: false,
    styleMap: StylePeilbuizen
  }
  );
  map.addLayer(wfs2);

  // Create a select feature control and add it to the map.
  var highlightCtrl = new OpenLayers.Control.SelectFeature([wfs,wfs2], {
      hover: true,
      highlightOnly: true,
      renderIntent: "temporary"
  });
  
  var selectCtrl = new OpenLayers.Control.SelectFeature([wfs,wfs2], {
      clickout: true,
      toggle: false,
      toggleKey: "ctrlKey", // ctrl key removes from selection
      multipleKey: "shiftKey"//, // shift key adds to selection
  });

  map.addControl(highlightCtrl);
  map.addControl(selectCtrl);

  highlightCtrl.activate();
  selectCtrl.activate();

  wfs.events.on({
      "featureselected": function(e) {
          showStatus("selected feature "+e.feature.id+" on WFS Layer 1");
      },
      "featureunselected": function(e) {
          showStatus("unselected feature "+e.feature.id+" on WFS Layer 1");
      }
  });
  wfs2.events.on({
      "featureselected": function(e) {
          showStatus("selected feature "+e.feature.id+" on WFS Layer 2");
      },
      "featureunselected": function(e) {
          showStatus("unselected feature "+e.feature.id+" on WFS Layer 2");
      }
  });

  //Add a scalebar to the map
  scalebar = new OpenLayers.Control.ScaleBar();
  map.addControl(scalebar);
  
	//Set extents of initial mapview
  var geoviewerExtent=new Array();
    geoviewerExtent[0] = 83600; // x-min
    geoviewerExtent[1] = 446000; // y-min
    geoviewerExtent[2] = 84600; // x-max
    geoviewerExtent[3] = 448200; // y-max
  
 
ZoomToSetExtent(geoviewerExtent[0],geoviewerExtent[1],geoviewerExtent[2],geoviewerExtent[3],map);
}

function showStatus(text) {
  document.getElementById("layerindex").innerHTML = text;            
}

function ZoomToSetExtent(Xmin,Ymin,Xmax,Ymax,geoviewermap){
  // Set mapview extents to input parameters 
	var extentRatio = (Xmax-Xmin)/(Ymax-Ymin);
  var geoviewerSize = geoviewermap.getSize();
  var sizeRatio = geoviewerSize.w/geoviewerSize.h;
  if (sizeRatio >= extentRatio) {
    var geoviewerResolution = (Ymax-Ymin)/geoviewerSize.h;
    var minX = ((Xmin+Xmax)/2)-(geoviewerResolution*geoviewerSize.w/2);
    var minY = Ymin;
    var maxX = ((Xmin+Xmax)/2)+(geoviewerResolution*geoviewerSize.w/2);
    var maxY = Ymax; 
  } else {
    var geoviewerResolution = (Xmax-Xmin)/geoviewerSize.w;
    var minX = Xmin;
    var minY = ((Ymin+Ymax)/2)-(geoviewerResolution*geoviewerSize.h/2);
    var maxX = Xmax;
    var maxY = ((Ymin+Ymax)/2)+(geoviewerResolution*geoviewerSize.h/2); 
  };
  // Zoom to set extent
  geoviewermap.zoomToExtent(new OpenLayers.Bounds(minX,minY,maxX,maxY));
}

function ZoomToSelectedFeatures(vectorlayer){
  //ZoomToSelectedFeatures 
  var fts = vectorlayer.selectedFeatures;
  var boundsSelected = fts[0].geometry.getBounds().clone();
  for(var i=1;i<fts.length;i++)
    boundsSelected.extend(fts[i].geometry.getBounds());
  map.zoomToExtent(boundsSelected,false);
}
-- 
View this message in context: http://n2.nabble.com/Selected-items-visually-return-to-%22default%22-state-upon-zooming-or-other-refreshing-of-the-viewport-tp3147690p3147690.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.