Common MapControls in new ReactComponents

IanMayo commented 4 years ago

💬 Brief description of feature

As a Serge player I wish to control the map via the MappingToolbar

In the legacy mapping system, the toolbar elements are created in \packages\client\src\Components\Mapping\index.jsx

We need to refactor them into our new declarative approach.

For the basic controls (zoom-in, zoom-out, home) these can be declared as permanent children of the Mapping control.

Note: this issue does not include the View as buttons that are displayed for White Force: https://serge-review.herokuapp.com/?wargame=wargame-k5xyxas9&access=p2311

@foxleigh81 has requested that the controls use the ButtonGroup controls we have in StoryBook: https://deploy-preview-387--serge-storybook.netlify.app/?path=/story/vendor-buttongroup--icons

But, @lilitkarapetyan - if you find yourself fighting against Leaflet, then it's acceptable to use Leaflet controls.

A toolbar is displayed for the map control which includes: zoom-in, home (fit-to-window) and zoom-out.

The toolbar should be present in all of the StoryBook Mapping components.

foxleigh81 commented 4 years ago

But, @lilitkarapetyan - if you find yourself fighting against Leaflet, then it's acceptable to use Leaflet controls.

Yup, the ButtonGroup component is preferred but it's not essential. If it is too hard to implement using this then the leaflet defaults is fine.

IanMayo commented 4 years ago

Closed in #448