Continue zooming in when smaller clusters are tapped

Question

I am using openlayers 5.3. I want to continue zooming in when smaller clusters are tapped or clicked. I have used some code to achieve such requirement but it doesn't work.

getStyleForCluster = (size: number): ol.style.Style => {
    let clusterStyle = (<any>window).styleCache[size];
    if (!clusterStyle) {

        clusterStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: (Math.log(size) / Math.log(10)) * 3 + 10,
                fill: new ol.style.Fill({
                    color: this.getFillColorForPlace(size)
                })
            }),
            text: new ol.style.Text({
                text: size.toString(),
                fill: new ol.style.Fill({
                    color: "#fff"
                })
            })
        });

        (<any>window).styleCache[size] = clusterStyle;
    }
    return clusterStyle;
}


this.ClusterSource = new ol.source.Cluster({
      distance: distance,
      source: vectorSource
});

 var vectorLayer = new ol.layer.Vector({
       renderMode: 'image',
       source: this.ClusterSource,
       style: this.styleFunction,
       zIndex: 9999
 });

could you please suggest me how to resolve such issue.

Mike · Accepted Answer · 2019-05-23T14:42:03.157

If you mean zoom in on a cluster when it is clicked you could get the extents of the features within the cluster and fit the map to that. Here is an example of doing that (using zoomCluster function added to this example https://openlayers.org/en/v4.6.5/examples/cluster.html )

  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));
  });

  var zoomCluster = function(pixel) {

    var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
      return feature;
    });

    if (feature) {

      var features = feature.get('features');
      if (features.length > 1) {

        var extent = ol.extent.createEmpty();
        features.forEach(function(feature) {
          ol.extent.extend(extent, feature.getGeometry().getExtent());
        });
        map.getView().fit(extent);

      }

    }

  };

  map.on('click', function(evt) {
    zoomCluster(evt.pixel);
  });

.map (
  width: 100%;
  height: 80%;
}

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<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>

This version cancels the zoom if individual pins cannot be displayed:

  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));
  });

  var zoomCluster = function(pixel) {

    var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
      return feature;
    });

    if (feature) {

      var features = feature.get('features');
      if (features.length > 1) {

        var oldExtent = map.getView().calculateExtent();
        var extent = ol.extent.createEmpty();
        features.forEach(function(feature) {
          ol.extent.extend(extent, feature.getGeometry().getExtent());
        });
        map.getView().fit(extent, {
          callback: function() {
            var feature = clusterSource.forEachFeatureInExtent(extent, function(feature) {
              if (feature.get('features').length > 1) {
                return feature;
              }
            });
            if (feature) {
              map.getView().fit(oldExtent);
            }
          }
        });

      }

    }

  };

  map.on('click', function(evt) {
    zoomCluster(evt.pixel);
  });

.map (
  width: 100%;
  height: 80%;
}

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<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>

Hi Mike, thanks again for your help. I want map should continue zooming in when smaller clusters are tapped, all the way down to a zoom level that has the individual pins visible. — user10496245, May 23 '19 at 13:20
If you zoom in to expand a cluster you may see individual pins or more (but smaller) clusters. It would depend on the spacing of the individual features and how the cluster source groups them. Because of the working of the cluster source it would be difficult to know without trying it, although you could cancel (there would be a flicker) and let the user zoom manually and choose where to zoom. Alternative you could zoom regardless, hide the cluster layer and display another layer with the primary source unclustered. — Mike, May 23 '19 at 14:43

Continue zooming in when smaller clusters are tapped

1 Answers1

Linked