StyleFunction should return Style or Promise<Style>

It seems to be impossible to style a vector layer in asynchronous way. The current signature of the StyleFunction looks like this:

(feature: Feature, resolution: number) => (Style | Style[] | null)

The implementation is as follows (OL version 5.3.0):

    var render = function(feature) {
      var styles;
      var styleFunction = feature.getStyleFunction() || vectorLayer.getStyleFunction();
      if (styleFunction) {
        styles = styleFunction(feature, resolution);
      }
      if (styles) {
        var dirty = this.renderFeature(
          feature, resolution, pixelRatio, styles, replayGroup);
        this.dirty_ = this.dirty_ || dirty;
      }
    }.bind(this);

The styles are returned and applied immediately by the succeeding code (see renderFeature).

SOLUTION:

A promise of the style(s) can be returned.

New signature:

(feature: Feature, resolution: number) => (Style | Style[] | Promise<Style> | Promise<Style[]> | null)

Usage:

const styleFn = (feature, resolution) => {
 return Promise.resolve(new Style({
      stroke: new Stroke({
        color: 'rgb(255, 105, 180)',
        width: 1
      })
    }));
};

layer.setStyle(styleFn);

This feature will facilitate the involvement of promises, observables, workers and any kind of asynchronous stuff, respectively.

Note that the implementation of the style function like this does not solve the issue either because this would return a “constant” style for each feature (independent from the zoom level):

// computeStyle returnes a Promise<Style> for the passed feature
computeStyle(feature).then((style) => {
	feature.setStyle(style);
});

This means that the promisifying the styles is the only option to get both advantages: asynchronous calculation of the style + re-calculation of the style on zoom level etc.

[mktcode]

We save some layer style settings in a database and they are fetched with a separate request. I don’t want to delay the rendering of the map on one hand and on the other hand I don’t want this request to be somewhere after map initialization but right where I configure my layers/styles.

new VectorLayer({
  style: () => {
    return new Promise((resolve, reject) => {
      http.get("...").then(style => resolve(style));
    });
  },
  ...
});

That would be nice!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.