<!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>