Clustered Features

This example uses OpenLayers v4.0.1. The latest is v.

#### Clustered Features

cluster distance

Example of using <code>ol.source.Cluster</code>.

This example shows how to do clustering on point features.

Related API documentation:

- ol.Feature
,
- ol.Map
,
- ol.View
,
- ol.geom.Point
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.Cluster
,
- ol.source.OSM
,
- ol.source.Vector
,
- ol.style.Circle
,
- ol.style.Fill
,
- ol.style.Stroke
,
- ol.style.Style
,
- ol.style.Text

Copy Edit
Clustered Features Example of using <code>ol.source.Cluster</code>. var distance = document.getElementById('distance'); var count = 20000; var features = new Array(count); var e = 4500000; for (var i = 0; i < count; ++i) { var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; features[i] = new ol.Feature(new ol.geom.Point(coordinates)); } var source = new ol.source.Vector({ features: features }); var clusterSource = new ol.source.Cluster({ distance: parseInt(distance.value, 10), source: source }); var styleCache = {}; var clusters = new ol.layer.Vector({ source: clusterSource, style: function(feature) { var size = feature.get('features').length; var style = styleCache[size]; if (!style) { style = new ol.style.Style({ image: new ol.style.Circle({ radius: 10, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: '#3399CC' }) }), text: new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: '#fff' }) }) }); styleCache[size] = style; } return style; } }); var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ layers: [raster, clusters], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); distance.addEventListener('input', function() { clusterSource.setDistance(parseInt(distance.value, 10)); }); <div id="map" class="map"></div> <form> <label>cluster distance</label> <input id="distance" type="range" min="0" max="100" step="1" value="40"/> </form>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Clustered Features</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <form>
          <label>cluster distance</label>
          <input id="distance" type="range" min="0" max="100" step="1" value="40"/>
        </form>
        <script>
          var distance = document.getElementById('distance');

          var count = 20000;
          var features = new Array(count);
          var e = 4500000;
          for (var i = 0; i < count; ++i) {
            var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
            features[i] = new ol.Feature(new ol.geom.Point(coordinates));
          }

          var source = new ol.source.Vector({
            features: features
          });

          var clusterSource = new ol.source.Cluster({
            distance: parseInt(distance.value, 10),
            source: source
          });

          var styleCache = {};
          var clusters = new ol.layer.Vector({
            source: clusterSource,
            style: function(feature) {
              var size = feature.get('features').length;
              var style = styleCache[size];
              if (!style) {
                style = new ol.style.Style({
                  image: new ol.style.Circle({
                    radius: 10,
                    stroke: new ol.style.Stroke({
                      color: '#fff'
                    }),
                    fill: new ol.style.Fill({
                      color: '#3399CC'
                    })
                  }),
                  text: new ol.style.Text({
                    text: size.toString(),
                    fill: new ol.style.Fill({
                      color: '#fff'
                    })
                  })
                });
                styleCache[size] = style;
              }
              return style;
            }
          });

          var raster = new ol.layer.Tile({
            source: new ol.source.OSM()
          });

          var map = new ol.Map({
            layers: [raster, clusters],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          distance.addEventListener('input', function() {
            clusterSource.setDistance(parseInt(distance.value, 10));
          });
        </script>
      </body>
    </html>