feat(map): display pins map interactive elements
Closes MIN-78
Objective:
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
andStyle
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 utilisesgetCanvasIcon
(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 than999
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 totop
) - 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
Edited by Adrian Orłów