diff options
Diffstat (limited to 'misc/openlayers/examples/strategy-cluster-threshold.html')
| -rw-r--r-- | misc/openlayers/examples/strategy-cluster-threshold.html | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/misc/openlayers/examples/strategy-cluster-threshold.html b/misc/openlayers/examples/strategy-cluster-threshold.html new file mode 100644 index 0000000..a47e08d --- /dev/null +++ b/misc/openlayers/examples/strategy-cluster-threshold.html @@ -0,0 +1,149 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <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="../lib/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://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} + ); + + 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, + "select": { + fillColor: "#8aeeef", + strokeColor: "#32a8a9" + } + }) + }); + + var select = new OpenLayers.Control.SelectFeature( + clusters, {hover: true} + ); + map.addControl(select); + select.activate(); + clusters.events.on({"featureselected": display}); + + map.addLayers([base, clusters]); + map.setCenter(new OpenLayers.LonLat(0, 0), 2); + + reset(); + document.getElementById("reset").onclick = reset; + + } + + function reset() { + var distance = parseInt(document.getElementById("distance").value); + var threshold = parseInt(document.getElementById("threshold").value); + strategy.distance = distance || strategy.distance; + strategy.threshold = threshold || strategy.threshold; + document.getElementById("distance").value = strategy.distance; + document.getElementById("threshold").value = strategy.threshold || "null"; + clusters.removeFeatures(clusters.features); + clusters.addFeatures(features); + } + + function display(event) { + var f = event.feature; + var el = document.getElementById("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> + <div id="tags"> + vector, feature, stylemap, wfs, cluster, strategy, cleanup + </div> + <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> |