-1

I am using OL 7 version. I am using markers on the map with a PNG icon read from file, and this works very well.

But I would like to personalize icons on the fly, ie. read some PNGs in memory (using pngjs for example), combine them, adjust some pixels (stroke/fill color, background colors...) and use the resulting memory buffer as the feature icon. There are no user interactions, and a limited number (less than 1000) features, and less than 100 different icons.

I found plenty examples using PNG files, but none using memory buffers and icons made on the fly.

It looks like I have to use an HTML canvas.

This example Openlayers 4 use canvas pattern for feature style use a rectangle with a fill color made from a pattern created from a canvas. In that case, I would create an icon from a blank PNG file and fill it with that gradient. I think that it would work, but it is not very elegant.

When looking at the OL code, in ol/style/Icon.js, IconImage.js and Image.js, it seems possible to get the Icon's canvas and its context, and then draw onto it.

On ImageCanvas.js, Mzur is also doing something similar, but with an ImageStatic source.

On The Book of OpenLayers3, A. Santiago is also doing something similar, but with an Image layer.

I do not have too much experience with OL, and I am really confused about the differences between Image, ImageStatic and Icon.

So What should I do?

Thanks,

Michel

mgurzixo
  • 39
  • 2
  • 1
    An icon style can use either an image or a canvas element as in https://openlayers.org/en/latest/examples/icon-negative.html – Mike Nov 15 '22 at 19:02
  • Thanks a lot, @Mike, for showing me this. I have created a working example on github, and will answer my own question. – mgurzixo Nov 17 '22 at 15:54

1 Answers1

0

Thanks to @Mike for putting me on the right direction.

It turned out to be complicated because:

  • It is difficult to import binary data. I used @H.B.'s answer
  • There are not so many maintained PNG parsing libraries without too many dependencies, working in the browser and decoding an existing bitmap. I used the excellent UPNG.js library.
  • Then mastering OpenLayers...

I have created a simple working example available here

mgurzixo
  • 39
  • 2