diff options
Diffstat (limited to 'misc/openlayers/examples/strategy-cluster-extended.html')
| -rw-r--r-- | misc/openlayers/examples/strategy-cluster-extended.html | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/misc/openlayers/examples/strategy-cluster-extended.html b/misc/openlayers/examples/strategy-cluster-extended.html new file mode 100644 index 0000000..51d3e87 --- /dev/null +++ b/misc/openlayers/examples/strategy-cluster-extended.html @@ -0,0 +1,125 @@ +<!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>Extended clustering example</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"> + label { + cursor: pointer + } + + #wrap { + width: 925px; + margin: 10px; + } + + #strategy-chooser, #generalinfo, #info { + width: 400px; + padding: 0; + float: right; + clear: right; + margin-bottom: 4px; + } + + #map { + float: left; + } + </style> + </head> + <body> + <h1 id="title">Extended clustering</h1> + <div id="tags"> + cluster, advanced + </div> + <p id="shortdesc"> + Shows the usage of custom classes for a fine grained control about + the clustering behaviour. + </p> + <div id="wrap"> + <div id="map" class="smallmap"> + </div> + <div id="strategy-chooser"> + <p> + Select the desired clustering strategy: + </p> + <label> + <input type="radio" name="strategy" value="none" id="no-strategy" checked="checked">No strategy + </label> + <br> + <label> + <input type="radio" name="strategy" value="cluster" id="cluster-strategy">Simple cluster-strategy + </label> + <br> + <label> + <input type="radio" name="strategy" value="attribute-cluster" id="attributive-cluster-strategy">Attributive cluster-strategy + </label> + <br> + <label> + <input type="radio" name="strategy" value="rule-cluster" id="rulebased-cluster-strategy">Rulebased cluster-strategy + </label> + </div> + <div id="generalinfo"> + </div> + <div id="info"> + </div> + </div> + <div id="docs" style="clear: both; padding-top: 10px"> + <p> + The vectorlayer in this example contains random data with an + attribute "clazz" that can take the values 1, 2, 3 and 4. The + features with clazz = 4 are considered more important than the + others. + </p> + <p> + The radiobuttons on the right of the map control the + cluster strategy to be applied to the features. + </p> + <ul> + <li> + <strong>No strategy</strong> + means that all features are + rendered, no clustering shall be applied + </li> + <li> + <strong>Simple cluster-strategy</strong> + applies the cluster + strategy with default options to the layer. You should notice + that many of the important features with clazz = 4 are getting + lost, since clustering happens regardless of feature attributes + </li> + <li> + <strong>Attributive cluster-strategy</strong> + uses a + customized cluster strategy. This strategy is configured to + cluster features of the same clazz only. You should be able to see all + red points (clazz = 4) even though the data is clustered. A + cluster now contains only features of the same clazz. + </li> + <li> + <strong>Rulebased cluster-strategy</strong> + uses another + customized cluster strategy. This strategy is configured to + cluster features that follow a certain rule only. In this case only + features with a clazz different from 4 are considered as + candidates for clustering. That means that usually you have fewer + clusters on the map, yet all with clazz = 4 are easily + distinguishable + </li> + </ul> + <p> + Hover over the features to get a short infomation about the + feature or cluster of features. + </p> + </div> + <p> + View the <a href="strategy-cluster-extended.js" target="_blank">strategy-cluster-extended.js</a> + source to see how this is done. + </p> + <script type="text/javascript" src="../lib/OpenLayers.js"></script> + <script type="text/javascript" src="strategy-cluster-extended.js"></script> + </body> +</html> |