CODEWITHSUNDEEP
openlayersopenlayers-3
Umbrella
Umbrella

Reputation: 1145

Displaying features based on zoom level

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?

enter image description here

enter image description here

Upvotes: 2

Views: 2371

Answers (1)

GoinOff
GoinOff

Reputation: 1802

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

Upvotes: 1

Related Questions