1

I'm working on project that uses Open Layers. I have a problem with styling some features. Is it possible to set as Style image and also specify fill and stroke for it, for example background of the png image? At the moment I'm trying to do this like this:

this.styleHomeGreen = new Style({
      image: new Icon({
        src: 'content/map-icons/home-green.png',
      }),
      fill: new Fill({
        color: 'red'
      })
    });

In result image is being shown properly but there's no fill. I also tried with Stroke but with same result.

1

You could try using the color option for the Icon style (it might need to be a semi opaque rgba value)

this.styleHomeGreen = new Style({
      image: new Icon({
        src: 'content/map-icons/home-green.png',
        color: 'red'
      })
    });

or a style array could provide a background and an icon

this.styleHomeGreen = [
    new Style({
      image: new RegularShape({
        points: 4,
        radius: 16,
        fill: new Fill({
          color: 'red'
        })
      })
    }),
    new Style({
      image: new Icon({
        src: 'content/map-icons/home-green.png',
      })
    })
];

or you could modify the icon as in https://openlayers.org/en/latest/examples/icon-negative.html

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.