Displaying features based on zoom level

Question

I'm new to openlayers library and I got a question. I render a lot of features and when the map is zoomed out the features overlay each other, which looks pretty ugly, as you can see on the first screenshot. I'd like the zoomed-out map(first screen) to look like zoomed-in map(second screen) at all zoom levels. What would be the most common way of implementing it?

Answer 1

Here is an example of a style function that detects group features from a cluster map layer and draws a square for individual object and circle for group objects:

var styleFunction = function() {
  return function(feature,resolution) {
    var style;
    var radius;
    var offsetY = -26;
    var gotGroup = false;

    var features = feature.get('features');

    if (features.length == 1) { //length = 1 - individual object instead of combo object
      style = new ol.style.Style({
        image: new ol.style.RegularShape({
        radius: 10,
        points: 4,
        angle: Math.PI / 4,
        fill: createFillStyle(feature),
        stroke: createStrokeStyle(feature,resolution,props)
        }),
        text: createTextStyle(feature, resolution, props)
      });
    } else {
      var rad = 11;
      if (features.length > 1) { //If group of features increase radius of object
        rad = 12;
        gotGroup = true;
      }
      style = new ol.style.Style({
        image: new ol.style.Circle({
        radius: rad,
        fill: createFillStyle(feature),
        stroke: createStrokeStyle(feature,resolution,props)
      }),
      text: createTextStyle(feature, resolution, props)
    });
  }
  return [style];
};
};

Hope this helps with your project