Implement displaying pins on the map with it's number
Simplification decision:
This PR implements displaying pins only for data in bioEntity reducer.
Due to the fact above, pins colors are always the same
Also that's why useOlMapPinsLayer is not tested - it will be after we'll implement all the possible cases
How it works? - overall
Pins layer uses bioEntites selector as source for pins rendering
Every bioEntity position is converted to an projection
Every bioEntity data is mapped to instances of Feature and Style which are used to place (Feature) and style/show (Style) the element on the map. Check the docs for more info about them
Style instance in our case utilises getCanvasIcon (described below)
All Feature instances are then combined into one layer and its source
Finally all layers are combined in one array
How it works? - getCanvasIcon
getCanvas - returns the Canvas instance of provided size
drawPinOnCanvas - draws pin icon (without number) of provided color with use of Path2D (svg path)
getTextWidth - returns text width depending of number value. For eg. 1 should be narower than 999 as its visual width is smaller
getTextPosition - returns top-left position of the text (start point of drawing on the canvas as textBaseline is set to top)
getFontSizeToFit - returns the fitting font size for provided text width
drawNumberOnCanvas
with use of text metrics, gets text height - what is an ascend/descend is described below
with use of utils and text metrics, gets text size and position
draws text on the canvas
Important info:
layers rendering functions has been divided into separate hooks as there will be more of them in the future
if !54 (merged) is not merged, changes from this PR may appear here
