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?

Check out ol.source.Cluster which can limit the amount of data you see on your map. See this example openlayers.org/en/latest/examples/cluster.html — GoinOff
I use it for the same reason..Plus, by using a style function, you can detect group features on the map and color them differently or draw a different shape for them (I enlarge my dot a bit to indicate group feature). Mouse over can provide all the details of a group feature too. Looks like you are creating a cool sailboat racing tracker... — GoinOff
That's awesome, gonna incorporate these features into my project! I'm developing a Navigational system for Icebreakers, which includes some boats as well. — Umbrella

GoinOff GoinOff · Accepted Answer · 2017-06-01T13:28:02

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

Displaying features based on zoom level

1 Answers