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, 0 insertions, 149 deletions
diff --git a/misc/openlayers/examples/strategy-cluster-threshold.html b/misc/openlayers/examples/strategy-cluster-threshold.html deleted file mode 100644 index a47e08d..0000000 --- a/misc/openlayers/examples/strategy-cluster-threshold.html +++ /dev/null @@ -1,149 +0,0 @@ -<!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> |