[OpenLayers-Users] selecting marker potential bug
Christopher Schmidt
crschmidt at metacarta.com
Fri Jun 12 14:47:21 EDT 2009
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 at openlayers.org
> http://openlayers.org/mailman/listinfo/users
--
Christopher Schmidt
MetaCarta
More information about the Users
mailing list