I can see how to do this using a feature style function with 2 styles (similar to the Custom Polygon Styles example). One would be the normal linestring/polygon one and used at high enough zooms.

The second would show just the first coordinate as a point and used at low zooms. I already use style functions, but none have depended on resolution yet.

The cut-off point between the two styles would depend on how big the feature would appear at that zoom (i.e. on resolution, and its extent?).

This seems a standard thing that anyone would want, so is there a simpler way of doing it? If not, can you give me any guidance on how to set the cut-off point?

I have seen the issue addressed elsewhere, but the only answer seemed to be about GeoServer, which I am not using.

  • A typical cutoff might be when the feature extent (calculated in pixels as the extent width or height divided by resolution) is smaller than the symbol used to represent a point. Instead of first coordinate you might want to consider using the label points - getCoordinateAt(0.5) of a linestring or getInteriorPoint() of a polygon. – Mike Jan 31 at 16:28

Thanks for that advice. I have managed to get it working. I wanted to treat polygons and lines the same so, for the record, I used essentially:

if (maxPixels(feature, resolution) > pointRadiusInPixels) {
  // normal ol.style.Style
} else {
    new ol.style.Style({
      image: new ol.style.Circle({...})
      geometry: function(feature) {
        return new ol.geom.Point(ol.extent.getCenter(feature.getGeometry().getExtent()));

function  maxPixels(feature, resolution) {
  var extent = feature.getGeometry().getExtent();
  return Math.max(extent[2]-extent[0], extent[3]-extent[1]) / resolution ;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.