OpenLayers 2 Clustering

by mizobata

HTML

<script src="http://dev.openlayers.org/OpenLayers.js"></script>
<p id="shortdesc">Demonstrates the use of the cluster strategy threshold property.</p>
<div id="map" class="smallmap"></div>

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

CSS

ul {
    list-style: none;
    padding-left: 2em;
}
#reset {
    margin-left: 2em;
}
#map {
    width:100%; 
    height:500px;
}

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;

init();

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"
            }
        }),
        protocol: new OpenLayers.Protocol.HTTP({
                url: "http://openlayers.org/en/v3.3.0/examples/data/kml/2012_Earthquakes_Mag5.kml",
                format: new OpenLayers.Format.KML({
                ...