On Fri, Jun 12, 2009 at 02:19:37PM -0400, Chris Abraham wrote: > Hi, > I think I have found a bug. See attached file for a simple test case. > > When you click on one of the points (features) a popup will display. > Since the feature is selected, it's style changes and it turns blue. > This is unexpected. I would have expected it to keep the default > style, that is, for it not to change in appearance. Is this the > desired behavior. To prevent the appearance change, you can change > line 71 to: > "default": style, "select": style > > Please let me know if this is a bug or not.
This is documented behavior. http://docs.openlayers.org/library/feature_styling.html The âdefaultâ intent has a special role: if the extendDefault property of the StyleMap is set to true (default), symbolizers calculated for other render intents will extend the symbolizer calcualated for the âdefaultâ intent. So if we want selected features just to have a different size or color, we only have to set a single property (in this example: pointRadius). Basically: * If you want things to always look the same, pass a symbolizer directly into the StyleMap, not into default. * if you want to control the style when something is selected, pass in a 'select' param to the hash * If you are fine with the default selcetion style when applied to your 'default' rules, then just pass in default. -- Chris > Also, it may be related to this bug http://trac.openlayers.org/ticket/ > 1498. > > Thanks, > Chris > > > > > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <title>OpenLayers Cluster Strategy Threshold</title> > <link rel="stylesheet" href="../theme/default/style.css" > type="text/css" /> > <link rel="stylesheet" href="style.css" type="text/css" /> > <style type="text/css"> > ul { > list-style: none; > padding-left: 2em; > } > #reset { > margin-left: 2em; > } > </style> > <script > src="http://openlayers.org/api/2.8-rc5/OpenLayers.js";></script> > <script type="text/javascript"> > > // create a semi-random grid of features to be clustered > var dx = 3; > var dy = 3; > var px, py; > var features = []; > for(var x=-45; x<=45; x+=dx) { > for(var y=-22.5; y<=22.5; y+=dy) { > px = x + (2 * dx * (Math.random() - 0.5)); > py = y + (2 * dy * (Math.random() - 0.5)); > features.push(new OpenLayers.Feature.Vector( > new OpenLayers.Geometry.Point(px, py), {x: px, y: py} > )); > } > } > > var map, strategy, clusters; > function init() { > map = new OpenLayers.Map('map'); > var base = new OpenLayers.Layer.WMS("OpenLayers WMS", > ["http://t3.labs.metacarta.com/wms-c/Basic.py";, > "http://t2.labs.metacarta.com/wms-c/Basic.py";, > "http://t1.labs.metacarta.com/wms-c/Basic.py";], > {layers: 'satellite'} > ); > > var style = new OpenLayers.Style({ > pointRadius: "${radius}", > fillColor: "#ffcc66", > fillOpacity: 0.8, > strokeColor: "#cc6633", > strokeWidth: "${width}", > strokeOpacity: 0.8 > }, { > context: { > width: function(feature) { > return (feature.cluster) ? 2 : 1; > }, > radius: function(feature) { > var pix = 2; > if(feature.cluster) { > pix = Math.min(feature.attributes.count, 7) + > 2; > } > return pix; > } > } > }); > > strategy = new OpenLayers.Strategy.Cluster(); > > clusters = new OpenLayers.Layer.Vector("Clusters", { > strategies: [strategy], > styleMap: new OpenLayers.StyleMap({ > "default": style > }) > }); > function onSelectFeature(feature) { > var popup = new OpenLayers.Popup.FramedCloud(null, > feature.geometry.getBounds().getCenterLonLat(), > null, 'hi', > {size: new > OpenLayers.Size(1, 1), offset: new OpenLayers.Pixel(1,-2)}, > true, function() { > selectControl.unselect(feature); }); > feature.popup = popup > map.addPopup(popup); > } > > var select = new OpenLayers.Control.SelectFeature( > clusters, {onSelect: onSelectFeature} > ); > map.addControl(select); > select.activate(); > clusters.events.on({"featureselected": display}); > > map.addLayers([base, clusters]); > map.setCenter(new OpenLayers.LonLat(0, 0), 2); > > reset(); > $("reset").onclick = reset; > > } > > function reset() { > var distance = parseInt($("distance").value); > var threshold = parseInt($("threshold").value); > strategy.distance = distance || strategy.distance; > strategy.threshold = threshold || strategy.threshold; > $("distance").value = strategy.distance; > $("threshold").value = strategy.threshold || "null"; > clusters.removeFeatures(clusters.features); > clusters.addFeatures(features); > } > > function display(event) { > var f = event.feature; > var el = $("output"); > if(f.cluster) { > el.innerHTML = "cluster of " + f.attributes.count; > } else { > el.innerHTML = "unclustered " + f.geometry; > } > } > > > </script> > > </head> > <body onload="init()"> > <h1 id="title">Cluster Strategy Threshold</h1> > <p id="shortdesc"> > Demonstrates the use of the cluster strategy threshold property. > </p> > <div id="map" class="smallmap"></div> > <div id="docs"> > <p>The Cluster strategy lets you display points representing > clusters > of features within some pixel distance. You can control the > behavior > of the cluster strategy by setting its distance and threshold > properties. > The distance determines the search radius (in pixels) for > features to > cluster. The threshold determines the minimum number of features > to > be considered a cluster.</p> > > </div> > <br /> > <p>Cluster details: <span id="output">hover over a feature to see > details.</span></p> > <ul> > <li> > <input id="distance" name="distance" type="text" value="" > size="3" /> > <label for="distance">distance</label> > > </li> > <li> > <input id="threshold" name="threshold" type="text" value="" > size="3" /> > <label for="threshold">threshold</label> > </li> > </ul> > <button id="reset">recluster</button> > </body> > > </html> > _______________________________________________ > Users mailing list > Users@openlayers.org > http://openlayers.org/mailman/listinfo/users -- Christopher Schmidt MetaCarta _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users
