Search code examples
angulartypescriptopenlayersopenlayers-3openlayers-5

OpenLayers 5 add conditional style to Text


I am trying to add conditionally styled text to vector object that I am placing on the map.

I have a service that creates the "Style" that looks like this

let myStyle = new Style(
    {
        fill: new Fill({color: Shade}),
        stroke: new Stroke({color: 'black',width:1}),
        text: new Text({text:Label})

    }) 

This works but I can't seem to figure out how to conditionally style and show/hide based on resolution.

Any help is greatly appreciated!


Solution

  • You will need to make it a style function, for example:

    let myStyle = function(feature, resolution) {
      if (resolution < myCondition) {
        return new Style(
          {
            fill: new Fill({color: Shade}),
            stroke: new Stroke({color: 'black',width:1}),
            text: new Text({text:Label})
    
          });
      }
    }