Resolve a Mapbox layer to an OL Style

[cristianmadularu]

Hi,

In my case, I have various data sources for diff kinds of vector layers which I would like to represent using a single set of Mapbox styles/layers definitions.

I can't always control the input data (which could be diff. from customer to customer) which is why I can't update the various filters in the Mapbox layers.
My plan was to write a set of mappers for individual features (from various VectorLayers) which would point to individual Mapbox layers. Then, I would apply the correct OL Style (derived from a certain Mapbox layer/style) to each of the features.

Assuming that sounds reasonable, I'm currently stuck trying to figure out how to create an OL Style from a Mapbox layer.
I can apply the entire style to the map using the "apply" function, I know how to get a reference to a Mapbox layer (using the getMapboxLayer function), but then I do not know how to create the OL Style from this Mapbbox layer.

Any help would be appreciated.

Thank you!

[mike-000]

Style objects are returned by style functions and will differ depending on the properties of the feature (most notably for label text) and resolution, so it would be better to set the function as the feature style. But if you must have style objects (e.g. you want to set them on features which do not have the same properties as the original feature) you can obtain them for a specific original feature and resolution

const layer = new VectorLayer();
applyStyle(layer, glStyle).then(() => {
  const styleFunction = layer.getStyleFunction();
  const featureStyle = styleFunction(feature, resolution);
  // now do something with featureStyle
});

[ahocevar]

I'd recommend against feature styles. Instead, I'd set the layer property of each feature, which will be used as source-layer property in the Mapbox layer style. Then just use the style function and apply it to each layer you want to render.

Example:

feature.set('layer', 'mylayer1');

for the feature, and for the style layer:

"layers": [{
  "id": "layer1",
  "source": "mysource",
  "source-layer": "mylayer1"
}]

If you want to only style a few individual features differently, you can use feature-state.

[cristianmadularu]

Thank you both! We can close this issue now. 👍